FD4B: Create the button – Figma Learn - Help Center

Now that we know more about auto layout, let's use it to create a button.

This is the button we're going to build.png

Create a text layer

We’ll start by adding a new text layer that will serve as our button’s label.

Enable the Text tool.
Click on the canvas and type Button.
Leave the font family set to Inter or choose another font you like.
Use the Typography section to change the following:
- Set the Font weight to Semi Bold
- Set the Font size to 18
- Set the Line height to Auto
- Set the Alignment set to Center

Create a text layer for your button label.png

Add auto layout

Now we're ready to apply auto layout.

Select the text layer.
Press Shift A. Figma will automatically create a new frame around the text layer with auto layout applied.
Double-click on the frame name and rename it to Button.

Apply auto layout.png

Style the button

We’ll adjust the auto layout properties shortly, but first let’s style our button:

Select the text layer inside the Button frame.
Type F in the field next to the color swatch in the Fill section, and press Enter. Figma will take the single F we entered, and assume we want to set the hex code to #FFFFFF, which sets the fill to pure white.
Select the Button frame.
Click the plus in the Fill section to add a fill.
Type 0 (zero) in the field and press Enter. Just like before, Figma takes the zero we entered and fills out the rest of the field with zeroes, which changes the fill to black.
Change the Corner radius to 8 in the Appearance section of the right sidebar.

Style your button (1).png

Tip: Interested in learning more about button design best practices? Check out our Design your first button project.

Adjust the auto layout properties

When you select the Button frame, you may notice that the section in the right sidebar changed to Auto layout and includes some additional properties. The Dimensions fields also changed and are now Resizing fields.

In addition to being able to set a fixed width and height for the frame, we now have the option to set the parent frame to Hug contents, which means that it will automatically resize as the button label grows or shrinks. Because we’ll use this button element again in different contexts, we’ll leave the resizing properties set to Hug contents for maximum flexibility. That way, if we need to change the button’s label, or translate it into a different language, we wont have to worry about manually resizing it.

Test it! See what happens when you change the button label to “Continue” or “Next”.

Button label demo.gif

We'll adjust some of the other auto layout properties to customize how our button looks:

Set the Horizontal gap between objects to 10.
Set the Horizontal padding to 16 and the Vertical padding to 10.

Configure the auto layout properties

You may be wondering why Figma set the padding to 10 when we added auto layout. Figma automatically used our Big nudge preference, which is set to 10. If we had an existing frame around the text layer before applying auto layout, Figma would maintain the distance we had between the text layer and frame instead. Learn more about nudge settings.

Turn the button into a main component

Since our final design will include several buttons, we'll turn this button into a main component.

Select the Button frame.
Click Create component in the right sidebar.

Turn your button into a main component.png

You’ll notice the button is now inside a purple bounding box and the icon in the Layers section has also changed to a four diamonds icon. This indicates the layer is a main component. In the next chapter, we'll learn more about components and how we can use them to speed up our design workflows.

Check your knowledge