How to use auto layout in Figma

Oscar de la Hera Gomez
A flower that represents Figma with the text "Auto Layout" beneath it.

Auto layout is activated by selecting a frame and using Shift + A & is the equivalent of a flexbox in CSS, UIStackView in Swift or a Linear Layout in Android which allows responsive elements within a container to be automatically arranged depending on viewport size.

A screenshot of Figma of the result produced by the tutorial below which resembles a LinkedIn post in a low fidelity form.

The following guide walks you through the terms that Figma uses for auto layout, their properties as well as a walkthrough on creating sample auto layout in Figma, which is illustrated above.


An image of Figma's examples of auto layouts. Buttons are a child, Button row is an auto layout, post is an auto layout, as is the news feed.

There are two terms that are important when creating Auto Layout: Parent & Children.

In the image above:

  • A Button is a child of a Button Row (parent).
  • A Button Row is a child of a Post (parent).
  • A Post is a child of a News Feed (parent).

All the parents have auto layouts and can be considered flexible layouts (Flex Box).


A parent is the frame that contains the elements and objects of your design.


Children are the elements and objects within the auto layout.

Auto Layout Properties

Auto layout properties are available for parent and child components and can be broken down into the following.

Parent Properties

An annotated illustration of where the parent properties found below can be found in Figma.
  1. Direction - allows your design layout either to be in Columns (Horizontal) or Rows (Vertical)
  2. Padding - determines the whitespace around your objects (Children)
  3. Spacing - controls the spacing between your objects
  4. Resizing - Lets you have a dynamic or fixed width

Children Properties

An annotated illustration of where the children properties found below can be found in Figma.
  1. Alignment - align objects along one axis
  2. Absolute position - easily position items within auto layout frames using precise controls.
  3. Resizing - Lets you have a dynamic or fixed width


Step One: Draw a frame

A screenshot of Figma that shows a new frame.

In Figma, open up a project and draw a frame.

Step Two: Convert to Auto Layout

A screenshot of Figma showing how the frame has switched icon to an auto layout along with the modifications that have been made to it.

Select the newly drawn frame and press Shift + A.

Alternatively, to activate auto layout:

  • In the right sidebar, click next to Auto layout with a frame selected.
  • Right-click on a frame or object and select Add Auto layout.

Step Three: Create initial layout

A screenshot of Figma with the initial layout of the tutorial within the frame that we previously drew.

Within the auto-layout frame, draw two rectangles.

Step Four: Setup the top section auto layout

A screenshot of figma showing the top section auto layout along with its properties, which are described below.

Select the top rectangle, press Shift + A and subsequently modify the settings on the inspector to:

  • Make the width off the child fill its parent.
  • Have a horizontal layout
  • Be left aligned
  • Have 0 horizontal and vertical padding.

Step Five: Complete top section layout

A screenshot of Figma with the top section layout completed.

Within the top rectangle complete the layout by adding an ellipse and a piece of text.

Step Six: Setup the bottom section auto layout

A screenshot of Figma showing the bottom section converted to auto layout along with highlights on the changes in parameters, which are described below.

Select the bottom rectangle that you drew in Step Three and press Shift + A. Subsquently, modify the settings in the inspector to have:

  • A vertical layout
  • 0 vertical & 0 horizontal padding

Step Seven: Complete bottom section layout

A screenshot of Figma showing the completed bottom layout. There are highlights to changes within the child properties of the auto layout. These are described below.

Complete the bottom section layout by adding a piece of text.

Make sure that this child is width is fixed and the height is hug which means that it grows to fill the space needed.

How do I use absolute position within an Auto Layout ?

To learn how to create UI elements that have an absolute position within an auto layout frame, consult the tutorial below.

Any Questions ?

We are actively looking for feedback on how to improve this resource. Please send us a note to with any thoughts or feedback you may have.

delasign logo

Book a Free Consultation.

An icon of an email.

Click here to email us.

Fill in the details below to book a free consultation or to let us know about something else. Whatever it is, we are here to help.

How can we help you ?

Contact Details