How to add auto layout in Figma on Mac: step by step for designers

What auto layout does in Figma

Auto layout is Figma's way of letting a frame manage its children. You set the rules once. Figma then places, spaces and resizes the layers inside as their content changes. A longer button label or an extra list item no longer breaks the design.

The feature only works on frames. Layers that sit loose on the canvas ignore it. That is why the shortcut can wrap your selection in a new frame for you. You get the frame without building one first.

Auto layout is available on every Figma plan. You need edit access to the file. If someone shared it with you as a viewer, the layout controls will not change anything.

Add auto layout with ⇧ A, the fastest route

Select one or more layers on the canvas. Then press ⇧ A. The shortcut uses the Shift key, the one marked with an up arrow. You do not need ⌘ or ⌃ for this one.

If your selection is a single frame, Figma adds auto layout to that frame. If your selection is loose layers, Figma creates a new auto layout frame around them. You then tune the result in the right-hand Design panel.

Check your result before you move on. Look at the frame outline in the canvas. If the frame does not change, your selection may not be a frame or a layer that can take auto layout.

Other ways to add auto layout on Mac

The shortcut is not the only route. Mouse users have a few other options, and each one ends in the same place.

• Click the + next to Auto layout in the right Design panel.
• Right-click the selection and choose Add auto layout.
• Press ⌃ ⇧ A to suggest auto layout, or right-click and choose More layout options.
• Use the same steps in the browser version of Figma, since the desktop app has the same features.

Suggest auto layout works as a starting point. Use it when you want Figma to propose a layout, then adjust the direction, padding and gap yourself. Keyboard users rarely need the mouse at all.

Choose a direction: Vertical, Horizontal, Grid, or Wrap

Once auto layout is on, the Layout section in the right Design panel shows the direction. With a frame or main component selected, you see Vertical, Horizontal, or Grid. Wrap appears when Vertical or Horizontal is set.

Pick the direction that matches how the content should read. Most mistakes come from a direction that is right for one screen and wrong for the next. Change it in the panel, then check each state of the component.

Set padding and gap in the Spacing section

Spacing has two parts. Padding is the space between the frame edge and its contents. Gap is the space between the children inside the frame.

Padding can be uniform, set vertically and horizontally, or set per side. Use per side when a button needs more room on one edge, such as space around an icon. Keep the values in one scale so the spacing reads as a system.

Gap takes a number. For Vertical and Horizontal layouts, you can also choose Auto. Auto offers Between, Around, or Evenly. Each option spreads the children in a different way, so test them on a real frame before you settle.

• ⌥ drag sets padding on opposite sides at once.
• ⌥ ⇧ drag sets padding on all sides.
• Hold ⇧ while you drag for a bigger nudge.
• ⌃ drag ignores auto layout for that one child.
• ⌥ double-click an edge to fill the container.

Resizing: Hug contents, Fill container, and fixed sizes

Resizing controls Width and Height separately. Each dropdown offers Hug contents, Fill container, Fixed width or Fixed height, and min or max limits.

Hug contents makes the frame shrink to fit what is inside. Fill container makes a child stretch to fill its parent. A fixed size locks the dimension, whatever the content does.

Min and max limits help with text. A label can grow, but only up to the width you allow. Use Remove min and max to clear those limits, from the same dropdown.

Ignore auto layout for one child

Sometimes a badge or a close icon should stay in one fixed spot. Figma calls this ignoring auto layout. Older Figma versions called it absolute position, and the behavior did not change.

Hold ⌃ and drag the child to ignore auto layout for it. The rest of the frame keeps working. The ignored child stays where you placed it, so check its position again when the content changes.

Remove auto layout on Mac without losing your work

Press ⌥ ⇧ A to remove auto layout from a selected frame. The rules go away, and the layers stay in the frame. From there, you position them by hand.

You have other options. Click Freeform or Remove auto layout in the right sidebar. Or right-click and choose Remove auto layout. To clear everything at once, right-click and go to More layout options, then choose Remove all auto layout.

You cannot remove auto layout from a component instance. Detach the instance first, or change the main component so the instance updates.

Why the shortcut seems broken: keyboard layout

Figma's default shortcuts assume a US QWERTY layout. If your Mac uses another layout, a key may trigger a different action. The shortcut you pressed might do something else entirely.

Press ⌃ ⇧ ? to open the Keyboard shortcuts panel. You can also open it from Help and resources in the bottom-right corner, then choose Keyboard shortcuts.

Go to the Layout tab and pick your keyboard layout. Choose Generic to restore the defaults. The change applies to your whole account, not just one file.

Desktop app or browser on Mac: which one to use

The Mac desktop app needs macOS 12 Monterey or later. It runs on both Intel and Apple silicon Macs. Figma says it has the same features as the browser version.

A few things differ. Plugin and widget development are desktop only. The desktop app can use locally installed fonts without the font installer. On Mac, prototype presentations can always show tabs.

Figma removes support for older desktop app versions six months after a release. An in-app message asks you to update. On a company-managed Mac, an administrator may need to do that.

Figma's help pages do not list a shortcut difference between the desktop app and the browser for auto layout. If a key works in one and not the other, check the keyboard layout first.

Draw mode and recent auto layout changes

Figma's release notes list auto layout in Draw mode, dated April 29, 2026. The note says you can apply auto layout directly in Draw, without switching to Design mode.

If you cannot find the controls in Draw mode, update the app first. Then check the release notes again for newer changes, since Figma ships updates often.

Another change affects how padding, stroke, fill container and gap behave. Figma ties it to CSS Flexbox style layout versions. You can switch layout versions until January 2027. After that date, the toggle becomes an Update button.

Figma's article gives July 2026 as the start of the new default. That date has passed. Check which default your file uses before you rely on the behavior, because the article does not say whether desktop and web match.

A worked example: a row of buttons

Say you want a row of buttons with the same spacing each time. Draw a frame, then place the button layers inside it. Select the frame and press ⇧ A.

In the Layout section, choose Horizontal. Then set padding so the buttons sit inside the frame with room to breathe. Set the gap so the buttons sit evenly apart.

Retype a label and the button adjusts, as long as its width is set to Hug contents. If one button must stay the same width, change only that button to a fixed width. The others keep their spacing.

Mistakes that cost people time

• Selecting a child layer instead of the parent frame. Select the frame, then change its layout.
• Trying to remove auto layout from a component instance. Detach the instance or update the main component.
• Mixing up ⇧ A with ⌃ ⇧ A. The second one suggests a layout rather than applying your choice.
• Expecting Wrap under Grid. Wrap only appears for Horizontal and Vertical.
• Using a non-US keyboard layout without changing Figma's setting. Shortcuts then fire the wrong action.
• Working in a shared file with viewer access. The layout controls will not change anything.

Where to go next

Once the layout is set, you may need to hand it off. For a single frame as a PNG, read how to export a frame as PNG in Figma on Mac. For icons and vector shapes, read how to export as SVG in Figma on Mac.

If you use Figma every day, the Figma for designers on Mac page covers desktop setup, memory fixes and voice help. Start with the shortcut, then build the habit of setting padding and gap in the same order each time.