Design your first button
This article is available for both the previous Figma UI and the new Figma UI. Use the toggle at the bottom left of the page to select your current UI. Get to know UI3: Figma’s redesign →
- Product: Figma Design
- Topics: Text, auto layout, color
- Length: 10 minutes
In this project, we’re going to design a simple button that automatically resizes based on the length of its label. Buttons are common elements used in UI design and this project will give you hands-on experience using the Text tool and auto layout.
To create our button, we’ll do the following:
- Add a text layer
- Convert the text layer to an auto layout frame
- Style the button
- Turn the button into a component
If you follow along step by step, your final button will look similar to the following:
Add a text layer
We’ll start by adding a text layer.
- Enable the Text tool by clicking the Text tool in the toolbar or using the T keyboard shortcut.
- Click on the canvas and type
Buttonto create the text layer.
In the left sidebar, you’ll notice the Layers panel in the left sidebar has a new text layer named “Button”. Double-click on the layer and rename it to Label.
Why name layers?
Naming layers in Figma Design is an optional, but beneficial practice. Naming your layers helps you organize your designs, find and modify layers faster, and ensure that your collaborators can find what they need when viewing your file.
When you add a text layer, the layer name automatically matches what you typed on the canvas until you rename it. For other object types, the default names are less descriptive. For example, each frame you add to a design file will be called “Frame 1”, “Frame 2”, and so on. Consider giving these layers descriptive names to improve your workflow and file organization.
To change a layer name, double-click the layer in the left sidebar and type in a new name.
While we’re here, let’s increase the font size on our text layer. With the text layer selected, use the setting in the Text section of the right sidebar to change the font size to 16. We’ll be sticking with the default Inter font but feel free to pick another font style.
How to choose a font size?
When designing digital experiences, it’s useful to establish a foundation for your type system.
You can do this by creating a typography hierarchy that determines the scale of your fonts, from smallest to largest. Start by deciding the size of the body copy font, since that’s what you’ll use most often throughout your designs. It’s good practice to set your body copy between 16px and 18px, depending on the font you choose.
16px is often recommended for its ease in creating consistent typography scales. The number 16 is easily divisible into sections to create harmonious spacing, margins, heading sizes, and so on.
Keep in mind, it’s important to consider the context of your overall design when building your hierarchy. For example, if you were designing buttons for a car touchscreen, the font scale may need to be increased to fit buttons with larger clickable surfaces.
Additionally, not all fonts scale to the same size visually. If users are having a hard time reading your body copy, consider increasing your body copy size or changing your font to another style.
Convert the text layer into an auto layout frame
Our button isn’t looking too glamorous yet but we’re about to spice things up using auto layout.
You can apply auto layout to an existing frame or use it to turn a layer into a frame. We’ll use the second option. Select the Label layer and use the shortcut Shift A
In the Auto layout section of the right sidebar, check to make sure that the Horizontal resizing and Vertical resizing settings are both set to Hug. Double-click on the new frame in the left sidebar and rename it to Button.
Why use auto layout?
Auto layout is one of the most powerful features in Figma Design. You can use auto layout to create responsive designs that look great on different device types, and that adapt to changes such as content size. Auto layout frames have resizing properties, which tells the frame how to behave when layers within it are resizing and reflowing.
There are two resizing properties you can choose from for an auto layout frame:
- Fixed width or Fixed height: The frame will not resize, even if its nested layers are resizing and reflowing
- Hug contents: The frame will resize to fit its nested layers
Because we’re using the Hug contents resizing property, our button will resize depending on the length of the label. Test it out for yourself by double-clicking on the text and typing Sign up or Continue.
Style the button
Add some color
- Select the Button layer and click the plus in the Fill section of the right sidebar to add a fill color.
- Use the color picker to change the color. We’re using color code
#33B249. - Select the Label layer nested inside the frame layer and adjust the fill to
#FFFFFF.
Round the corners
- Select the Button layer.
- In the right sidebar, set the Corner radius to 6.
Why round button corners?
Rounded corners may seem like a small thing, but it can have a large impact on the look and feel of your final designs. Rounded corners soften the aesthetics of your design, making it feel friendlier and more approachable than objects with sharp edges.
Beyond aesthetics, it’s common for interactive elements in modern digital interfaces to have rounded corners. This means that your users are more likely to understand that they can click your button if its design matches other interfaces they use.
Fix the padding
Finally, let’s fix the frame’s padding. When we converted the text layer to an auto layout frame, it automatically added padding between the frame’s boundary and the text inside. Right now, the padding is equal on all sides. We want the top and bottom padding to be less than the left and right padding.
- Select the Button layer.
- Hover your cursor over the selected frame. Handles that appear allow you to change the padding. You can either click and drag the handle to modify the padding, or click once on the handle and type a number in the box that displays.
- Use either method to update the padding to the following:
- Top and bottom padding:
8 - Left and right padding:
16
- Top and bottom padding:
Tip: You can change the top and bottom padding or the left and right padding at the same time using the following shortcuts:
- Hold ⌥ Option (macOS) or Alt (Windows) then click the padding area to input padding value for opposite sides
- Hold ⌥ Option (macOS) or Alt (Windows) while dragging handles to change padding for opposite sides
Turn the button into a component
Our button design is complete! Before we wrap up our project, let’s turn it into a component so we can reuse it in future designs.
- Select the Button layer.
- Click Create component in the right sidebar.
Now you can add instances of your button from the Assets tab in the left sidebar so you never have to design a button from scratch again. Learn more about using components →
What’s next?
Congratulations! You designed a responsive button in Figma Design using auto layout. Looking for your next challenge? Check out our Design an interactive button project to get more hands-on experience.
- Product: Figma Design
- Topics: Text, auto layout, color
- Length: 10 minutes
In this project, we’re going to design a simple button that automatically resizes based on the length of its label. Buttons are common elements used in UI design and this project will give you hands-on experience using the Text tool and auto layout.
If you follow along step by step, your final button should look similar to this:
To create the button, we’ll do the following:
- Add a text layer
- Convert the text layer to an auto layout frame
- Style the button
- Turn the button into a component
Create a text layer
We’ll start by adding a text layer.
- Enable the Text tool by clicking the Text tool in the toolbar or by pressing T.
- Click on the canvas and type
Buttonto create the text layer.
In the left sidebar, you’ll notice the Layers panel in the left sidebar has a new text layer named “Button”. Double-click on the layer and rename it to Label.
Why name layers?
Naming layers in Figma Design is an optional, but beneficial practice. Naming your layers helps you organize your designs, find and modify layers faster, and ensure that your collaborators can find what they need when viewing your file.
When you add a text layer, the layer name automatically matches what you typed on the canvas until you rename it. For other object types, the default names are less descriptive. For example, each frame you add to a design file will be called “Frame 1”, “Frame 2”, and so on. Consider giving these layers descriptive names to improve your workflow and file organization.
To change a layer name, double-click the layer in the left sidebar and type in a new name.
While we’re here, let’s increase the font size on our text layer. With the text layer selected, use the setting in the Text section of the right sidebar to change the font size to 16. We’ll be sticking with the default Inter font but feel free to pick another font style.
Convert the text layer into an auto layout frame
Our button isn’t looking too glamorous yet but we’re about to spice things up using auto layout.
You can apply auto layout to an existing frame or use it to turn a layer into a frame. We’ll use the second option. Select the Label layer and use the shortcut Shift A
In the Auto layout section of the right sidebar, check to make sure that the Horizontal resizing and Vertical resizing settings are both set to Hug. Double-click on the new frame in the left sidebar and rename it to Button.
Why use auto layout?
Auto layout is one of the most powerful features in Figma Design. You can use auto layout to create responsive designs that look great on different device types, and that adapt to changes such as content size. Auto layout frames have resizing properties, which tells the frame how to behave when layers within it are resizing and reflowing.
There are two resizing properties you can choose from for an auto layout frame:
- Fixed width or Fixed height: The frame will not resize, even if its nested layers are resizing and reflowing
- Hug contents: The frame will resize to fit its nested layers
Because we’re using the Hug contents resizing property, our button will resize depending on the length of the label. Test it out for yourself by double-clicking on the text and typing Sign up or Continue.
Style the button
Add some color
- Select the Button layer and click the plus in the Fill section of the right sidebar to add a fill color.
- Use the color picker to change the color. We’re using color code
#33B249. - Select the Label layer nested inside the frame layer and adjust the fill to
#FFFFFF.
Round the corners
- Select the Button layer.
- In the right sidebar, set the Corner radius to 6.
Why round button corners?
Rounded corners may seem like a small thing, but it can have a large impact on the look and feel of your final designs. Rounded corners soften the aesthetics of your design, making it feel friendlier and more approachable than objects with sharp edges.
Beyond aesthetics, it’s common for interactive elements in modern digital interfaces to have rounded corners. This means that your users are more likely to understand that they can click your button if its design matches other interfaces they use.
Fix the padding
Finally, let’s fix the frame’s padding. When we converted the text layer to an auto layout frame, it automatically added padding between the frame’s boundary and the text inside. Right now, the padding is equal on all sides. We want the top and bottom padding to be less than the left and right padding.
- Select the Button layer.
- Hover your cursor over the selected frame. Handles that appear allow you to change the padding. You can either click and drag the handle to modify the padding, or click once on the handle and type a number in the box that displays.
- Use either method to update the padding to the following:
- Top and bottom padding:
8 - Left and right padding:
16
- Top and bottom padding:
Tip: You can change the top and bottom padding or the left and right padding at the same time using the following shortcuts:
- Hold ⌥ Option (macOS) or Alt (Windows) then click the padding area to input padding value for opposite sides
- Hold ⌥ Option (macOS) or Alt (Windows) while dragging handles to change padding for opposite sides
Turn the button into a component
Our button design is complete! Before we wrap up our project, let’s turn it into a component so we can reuse it in future designs.
- Select the Button layer.
- Click Create component in the toolbar
Now you can add instances of your button from the Assets tab in the left sidebar so you never have to design a button from scratch again. Learn more about using components →
What’s next?
Congratulations! You designed a responsive button in Figma Design using auto layout. Looking for your next challenge? Check out our Design an interactive button mini project to get more hands-on experience.