Build an Adaptive Button with Figma Auto Layout
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.