Learn Figma Basics, Part 4: Auto Layout.
Tags: figma, tutorial, beginners, design
Published: 2020-04-30 21:34:01

With the auto layout, Buttons can resize with their text. Lists can rearrange themselves when items are moved around. And elements can be nested to create complex interfaces that respond to their content.
When you add Auto Layout to a frame, the items inside are stacked next to each other (either vertically or horizontally). The frame's size is then determined by the total size of the items within it. 

Auto Layout frames can have their own padding, fill, stroke, and corner radius, so you can create buttons without adding additional layers.

##**Apply Auto Layout to a frame:**
The Auto Layout feature is accessible in the **properties panel** under the constraints section.

Let’s create a new frame and transform it into an auto layout and see how it works.

**Create a new frame:**
- Select the artboard frame
- Pick the frame tool in the toolbar.
- Draw a frame of 60px by 60px
- Add a fill color: #11ACDD to the new frame.
- Click **+** icon beside Auto layout.

![figma auto layout](https://lh6.googleusercontent.com/J6lII-ewptpPgqkY6HADk8B4W-dAGbdaVjapcyaI6hjF-a1gsdK8EscCtkG2uExFTB9f5tRBer1pPH3EAZXq8czwfxXA0IYHsHvtx66iB_2y0Zp-EBVOvqeC3k0ZQK4QswV5lbwn)

To see the difference between a regular frame and an auto layout, we need to add layers to it.

- Select the **text tool**

![figma toolbar](https://lh5.googleusercontent.com/nO15zE9y_eBuiCGnogdw9efj0fHF8j8HLxpioE4sdfccdk7hvO7sYI2u3OmjI_j-ta6pvSB67HRScIZmJIYfR9mlEosdC1anLDk6_LvvM7FXE14rB0Hp1K4_AsphKZrIsiSaNT-5)

- Click inside the auto layout frame
- Add the text: **Sign up for free**.

![figma button](https://lh3.googleusercontent.com/KYy7YF1xTlUy93VqX54Qm63aFBBF9klJrPs4j09MSuEJfbIIVwo4iBfk0duDku8uzHlqU9VoFK7P7ffiwuhvdDD35kRpnN3vAARE-7WeRA1HvNUu54WnBaaKyDGzP8psclmBFdHI)

Now our frame is automatically resizable.

###**Auto layout properties:**

[figma auto layout properties](https://lh6.googleusercontent.com/YFVixvmEbhzlYuCk-AehXAVrPvR0lwBSXaN1lsEgIU1HdheoGu0BP6QVLzdmeGKtcKzroiMle7UnB13XJLBjY7JSlYzbyRQ5zmpVTlcC25f5z6HKmzbQfow8kFBjjS02Y4Ql8Ysr)

The auto layout frame has four main settings: **direction, padding, spacing between**, and **resizing.**

####**1 - spacing :**
The direction allows you to choose which way the Auto Layout Frame will flow. You can choose between **Vertical** and **Horizontal.**

- **Vertical** allows you to add, remove, and reorder objects along the y-axis. example: objects within a list, or posts within a newsfeed or timeline.
- **Horizontal** allows you to add, remove, and reorder objects along the x-axis. example: a row of buttons, or icons in a mobile navigation menu.

![figma auto layout](https://lh6.googleusercontent.com/VIVnS7Z_4s3ydfVC6zyEy4Use1xPLOV90HF4FVhqWeog1OgMIypBV3IGhNLrPAqqqk_7EhDTUKVfH_E0n0DsmaYNFLOxf71VnQ9fzjU2TlhLToFtniiOQE9Kn1Un841qXrEqI1bM)

####**2. Padding**
Padding controls the whitespace or "breathing room" around objects in your Auto Layout.
You can set Horizontal or Vertical padding.

![auto layout padding](https://lh4.googleusercontent.com/YEOErgoopIa3MoyvCwyXR8LFHbGgV4xg1BEvJTq3-BRsBpElnfxbLd9rm89m423HeV4--bv1XfL8skQE-UERtZRVRqwp9p2JEVglzdoFpPXNFbUDa8a1LNe_48Zp_fAelHc1J9K9)

####**3. Spacing Between**
You can control the Spacing between objects in an Auto Layout.

![Spacing Between](https://lh6.googleusercontent.com/k9dz1FgkKMe1FbHcXUdIjUOinvl54xN7Q-Yi3tyGh34UXWC9eS7GAAk097h6jPUN3pMyKFeoTXYpKUjBEcrrJw3qZBltnCbnqPCjeWOq0em31jHwuQEg5hZY2WZQiiTKiA0YuQOM)

####**4. Resizing**
You can allow your frame to auto-resize or to be fixed. 

Exercise file :
I created a file with practical examples of auto layout applications. it contains various UI elements like navbar, list of items, cards, and layout,  to experiment and learn more about auto layout.
File link : [Practice Auto Layout](https://www.figma.com/community/file/835624287410298010/Auto-Layout-Tutorial)

In the next post, we will see the text tool and how to create links inside your project's file.

This post is a part of a series that cover the basics of designing with Figma.
Please don’t forget to follow and share. See you in the next post ;)