Lesson overview

In this chapter, we’ll use auto layout to build a responsive button element that automatically grows and shrinks as its label changes. We’ll then turn the button into a main component so we can reuse it in other designs.

Here’s the button we’re going to build. To recreate this design, it seems like we could use a rectangle for the background, a text layer for the label, and a frame to keep it all together. The outcome might look ok, but it won’t really work if we need to change the button label in the future.

Instead, we’ll use auto layout to create a frame around our text layer and give it a fill to act as the surface of the button.

Auto layout fundamentals

Auto layout helps you organize, arrange, and space out design elements so that they adjust automatically as you make changes, saving you time and making your designs responsive and adaptable.

You can apply auto layout to a frame or a selection of layers using the keyboard shortcut Shift A. This adds the selected layers to a parent frame with auto layout applied. We can then use auto layout to determine how the parent frame interacts with its child layers.

We can set the Direction of the frame’s child layers to flow vertically, horizontally, or allow layers to wrap to a new line.

We can adjust the left, top, right, and bottom Padding of our design to create visual spacing between the child layer and their parent frame.

We can also adjust the spacing, or Gap, between child layers and choose how those layers are Aligned within the parent frame. And, we can control how an object’s height and width resizes when changes occur.

A parent frame can have a Fixed height or width, or it can be set to Hug its child layers so that it grows or shrinks as those layers change. A child layer’s height and width can be Fixed, set to Fill its parent frame or, if it contains its own child layers, set to Hug those layers instead.

You can combine different resizing options to customize how a layer behaves. For example, imagine an app notification. To make sure the notification frame stays a consistent width while accommodating a longer message, you can set its width to Fixed and its height to Hug contents.

Together, these auto layout properties help your designs be more flexible as changes happen throughout the design process and beyond. Learn more about auto layout properties. 

Try it out!

Try getting hands on and use the interactive sandbox below to learn how auto layout works. Keep in mind this doesn’t fully replicate how auto layout works in Figma Design and is meant for learning purposes only.

Check your knowledge