Build an Adaptive Button with Figma Auto Layout

Ryan Warner
InstructorRyan Warner
Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 3 years ago

Figma Auto Layout gives our designs superpowers. By adding auto-layout to our button component, we can change the text within the button while automatically maintaining consistent horizontal and vertical padding, just like we would in code.

Ryan Warner: [0:00] Select the Rectangle Shape tool or press R and draw a rectangle on the canvas. Next, select the Text tool or press T and type some text on your button.

[0:13] Now that we have a button, let's give it Auto Layout behavior. Select both layers, then click Auto Layout in the design panel on the right. You'll notice some new options appear and our button changed slightly. Our button now has consistent horizontal and vertical padding. We can adjust this padding by clicking and dragging on the padding inputs.

[0:37] You can also type in a specific integer. This works really well for horizontal padding, but it's not quite what we want for vertical positioning. When I set the vertical padding to , you'll notice the text is now aligned bottom.

[1:03] Auto Layout gives our child some new options too. Select the text layer by going into our Layers panel on the left and then clicking on the Submit text that we just typed. Over, in the top right, in the Design panel, you'll notice some alignment options. For our button, we want to vertically align center.

[1:28] Not every button is going to have the label Submit, but we commonly want every button to have the same padding. By copying and pasting our button, and then changing the text inside, for example Learn More, we can see the power of Auto Layout, making our lives easier.

[1:48] The length of the text is changing, and Auto Layout ensures our padding and alignment remains consistent.

[1:55] We started by drawing our button with the Rectangle and Text tools. We then selected both layers and gave the button an Auto Layout in the right-hand Design panel. We adjusted our horizontal padding and then gave our Submit text vertical align center.

~ 39 seconds ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today