Auto Layout in Figma: how it works and how to use it

Exercise 1

A button that grows with its text

Type "Book now", select it and press Shift + A or Add auto layout in the right sidebar. Figma wraps the text in an auto layout frame. Add a fill and corner radius, and set the padding (the space between the frame's edge and its content), for example 12 px top and bottom and 24 px on the sides. Now change the text to "Book a consultation": the button should widen on its own.

• •remove auto layout: Option + Shift + A (Mac) or Alt + Shift + A (Windows);
• •padding can be the same on all sides, separate for vertical and horizontal, or different for each side;
• •the padding field accepts CSS-style shorthand: "12, 24, 12, 24" sets top, right, bottom and left.

Exercise 2

Direction, gap and alignment

Add an icon to the left of the button text. Now the frame has two elements, and three more settings matter. Direction (flow): Horizontal puts elements in a row, Vertical in a column, Grid in rows and columns. Gap is the space between elements: a number, such as 8 px, or Auto, which spreads elements across the available space. Alignment is set for the whole frame in the nine-position box in the right sidebar.

• •Auto gap has Between, Evenly and Around options, matching space-between, space-evenly and space-around in CSS;
• •click the alignment box and use the arrow keys; W, A, S and D push the content to an edge;
• •in horizontal and vertical auto layout you can't align a single element, only the frame's whole content (in Grid an element can be aligned within its cell).

💡 Exercise: build an app top bar with a back button, a title and a menu icon. Set Gap to Auto: if the button and the icon are the same width, the title lands in the middle without any manual math.

Exercise 3

Hug contents, Fill container and Fixed

This is the setting behind most layouts that fall apart. For each element you choose a behavior separately for width and height:

• •Hug contents: the frame wraps its content and changes with it; available only for auto layout frames;
• •Fill container: the element fills all available space in its parent; available only for children of auto layout frames;
• •Fixed: the size stays the same, whatever happens around it;
• •Min / Max width and height: limits, for example a button no narrower than 120 px.

💡 Exercise: make a 320 px wide product card (Fixed) with a photo, name, price and button. Set the name and button to Fill container in width. Change the card's width: everything inside should adapt. Double-clicking an edge of the selection box sets Hug contents; with Option / Alt it sets Fill container.

Exercise 4

Nested auto layouts, Wrap and Grid

The real power of auto layout is nesting: each frame has its own direction, gap and padding. A screen is usually a vertical auto layout holding horizontal rows, cards and lists. Build a catalog page this way: a top bar, a row of filters and a list of cards.

• •for a row of filter pills, turn on Wrap: elements that don't fit move to a new row;
• •for a card grid, try the Grid direction: set the number of columns and rows, and cards can span several cells;
• •for a "-20%" badge in the corner of a photo, turn on Ignore auto layout: the element stays in the frame but is excluded from the layout, and constraints work for it again.

💡 Grid in auto layout and a layout guide are different things: the first actually arranges content, the second is only visual guides for alignment.

Exercise 5

Stretch the screen and fix what breaks

Take the catalog screen from the previous exercise and change the frame width from 375 px to 768 px, then to 1280 px. Watch what happens and fix it:

• •text overflows or overlaps: the text layer probably has a fixed size; Figma advises against fixed-size text boxes in auto layout;
• •cards don't stretch: check Fill container on them and on their parent frame;
• •a button spans the full desktop width: give it a Max width;
• •you can't reorder or add layers in a component instance: that's done only in the main component, and deleting in an instance only hides the layer.

💡 For practice, grab the official Auto layout playground file from Figma Community. Then share your screen in the community and ask: "What happens if the product name runs to three lines?"