Design your first button

In this project, we’re going to create a button in Figma design. Buttons are one of the most common elements you’ll build in a user interface and this project is designed to 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:

1. Create a text layer
2. Convert the text layer to an auto layout frame
3. Style the button

Create a text layer

To add a text layer, we’ll use the Text tool. You can do this by clicking the Text tool in the toolbar or pressing T.

With the Text tool active, click on the canvas and type “Button” to create the text layer. In the left sidebar, you’ll notice that we now have a text layer named “Button”. The name of a text layer matches what you type on the canvas until you manually change the name in the Layers panel. To change a layer name, double-click the layer in the left sidebar and enter a new name.

While we’re here, let’s increase the font size on our text layer. Select the text layer, and go to the Text section of the right sidebar to change the font size to 16. We’ll be sticking with the default font but feel free to pick something else.

Convert the text layer to an auto layout frame

Our button isn’t looking too glamorous yet but don’t worry, 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. Let’s do the second option. Select the text layer and use the shortcut Shift A As soon as auto layout is applied, you’ll notice a few changes:

• Our text layer is now inside a frame. Since auto layout can only be applied to frames and components, Figma did the work for us and placed our text layer in a new frame. The frame has no fill color right now, but we’ll apply one when we style the button.
• When you select the frame, the auto layout settings now display in the right sidebar. We won’t be modifying the auto layout properties in this project but if you want to learn more, check out our Explore auto layout properties article.
• The frame grows and shrinks as the text changes. Dynamic elements like this saves you time when designing content that will be viewed on different device types or translated to different languages. This change may not look super impressive now but let’s add some styling to see the power of auto layout.

Style the button

It’s time to style our button.

First, let’s add some color. Select the frame layer and click in the Fill settings in the right sidebar to add a fill color. Use the color picker to change the color. We’re using the color code #33b249.

Next, select the text layer and adjust the fill to #FFFFFF.

We can round the corners to make our button look smoother. Select the frame again and use the setting in the right sidebar to change the corner radius to 6.

Finally, let’s fix the padding on our frame. 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 so let’s change it.

Select the frame. When you hover over it, you’ll see pink handles you can use to change the padding. The padding on each side of the frame can be changed individually. 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

Our button looks great but let’s update the label. Double-click the text to edit it and type “Sign up”. You’ll see the button resize as you type. So cool!

What’s next?

Congratulations! You designed a button in Figma using the Text tool and auto layout. If you’re looking for another challenge, try turning your button into a component and adding a variant so you can reuse it in all your designs without having to build it again from scratch.