Cap Force One Team Guidebook

Explore

Design Documentation

Figma: Auto Layout 101

How to REMOVE Auto Layout

⁠

⁠

Auto layout is a property you can add to frames and components. It lets you create designs that grow to fill or shrink to fit, and reflow as their contents change. This is great when you need to add new layers, accommodate longer text strings, or maintain alignment as your designs evolve.

There are lots of ways to use auto layout:

Create buttons that grow or shrink as you edit the text label.

Build lists that adapt as items are added, removed, or hidden.

Combine auto layout frames to build complete interfaces.

Auto layout is a powerful feature with many moving parts and uses. In this article we'll show you how to add auto layout to a frame, and how each of its properties work.

How to add auto layout

You can add Auto layout to a frame or a selection of objects. This includes:

New or empty frames

Frames with existing content

Components and Component sets

Groups or other selections of layers and/or objects

Note: Auto layout is only supported on frames. If you select objects that are not in a frame, Figma will create an auto layout frame around them.

You can add auto layout to a selected frame, component, or component set from a few places:

Use the keyboard shortcut Shift A.

In the right sidebar, click the next to Auto layout with a frame selected.

Right-click on the frame or object and select Add Auto layout.

Tip! You can add auto layout to components. You will need to add auto layout to each component individually. Learn how to use Auto layout in components ↓

Auto layout properties

Frames with auto layout have different properties to regular frames. When you apply auto layout, you'll see some changes in the right sidebar. (see: the new Auto Layout section)

⁠

Screen Shot 2022-05-02 at 3.10.55 PM.png

⁠

Direction

Direction describes the way the auto layout frame will flow.

Choose vertical to add, remove, and reorder objects along the y axis. For example: objects within a list, or posts within a newsfeed or timeline.

Choose horizontal to add, remove, and reorder objects along the x axis. For example: a row of buttons, or icons in a mobile navigation menu.

Figma currently supports only one direction at a time, horizontal or vertical. To build designs that use both directions, you will need to combine or nest auto layout frames.

Spacing between items

You can control the spacing between items in an auto layout frame.

Unlike smart selection, there isn't a way to adjust the spacing on the canvas. Instead, use the spacing fields in the Auto layout section of the right sidebar:

Gallery

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.