Auto Layout in Figma is a powerful feature that allows you to create dynamic and responsive designs. It intelligently adjusts elements as your content changes, saving you valuable time and streamlining your design process. This guide will delve into the intricacies of Auto Layout, with a special focus on absolute positioning, also known as Ignore Auto Layout, a crucial aspect for achieving precise design control.
Understanding Figma Auto Layout
Figma’s Auto Layout transforms frames into adaptable containers. By applying Auto Layout, you gain the ability to organize design elements, define spacing, and seamlessly integrate new content. The Auto layout section in the right sidebar provides a range of properties to dictate how the frame and its nested layers interact, offering unparalleled flexibility in design.
Experiment with Auto Layout
If you’re new to Auto Layout, Figma provides an interactive sandbox to experiment with its properties. This hands-on approach allows you to visualize how different settings affect your design in real-time. While the sandbox is a simplified environment, it effectively demonstrates the core functionalities of Auto Layout in Figma Design.
Layout Flow: Directing Content within Auto Layout Frames
Direction: Vertical, Horizontal, and Wrap
The Direction property determines the flow of elements within your Auto Layout frame.
- Vertical: Arranges elements along the Y-axis. Ideal for lists, newsfeeds, or timelines where content stacks vertically.
- Horizontal: Arranges elements along the X-axis. Perfect for navigation menus, button rows, or icon sets that flow horizontally.
- Wrap: Organizes elements in a grid-like structure, flowing horizontally and wrapping to the next line when space is limited. Useful for photo galleries or tag collections.
Alt text: Figma Auto Layout Direction examples. Vertical layout shows circles stacked vertically. Horizontal layout shows circles in a row. Wrap layout shows circles wrapping to multiple rows.
Canvas Stacking Order: Controlling Layer Visibility
When elements within an Auto Layout frame overlap due to negative spacing, Figma’s default stacking behavior places the last element (rightmost or bottommost) on top. However, you can customize this canvas stacking order for visual hierarchy.
In the Auto Layout settings panel, the canvas stacking options allow you to choose:
- First on top: The initial layer in the stacking order appears at the front.
- Last on top: The final layer in the stacking order is brought to the front (default).
Alt text: Figma Auto Layout Canvas Stacking Order Options. “Last on top” shows the last element visually on top. “First on top” shows the first element visually on top.
It’s important to note that canvas stacking is purely a visual adjustment and does not alter the layer order within the Layers panel.
Ignore Auto Layout: Absolute Positioning within Flexible Frames
Ignore Auto Layout, previously known as absolute position, is a powerful feature that allows you to take specific elements out of the Auto Layout flow. When enabled, an object with Ignore Auto Layout is removed from the automatic arrangement of the Auto Layout frame, yet remains within the frame’s boundaries. This is effectively absolute positioning within the context of Auto Layout.
Think of Ignore Auto Layout as analogous to absolute positioning in CSS. It grants you precise control over an element’s placement relative to its parent Auto Layout container, regardless of how other elements within the frame resize or move.
Elements set to Ignore Auto Layout behave like elements in a standard Figma frame. This means you can apply constraints to define their resizing behavior when the parent Auto Layout frame is adjusted. However, standard Auto Layout properties like resizing and layout options are disabled for these elements.
To enable Ignore Auto Layout for an element:
- Select the child element within the Auto Layout frame.
- Click the icon in the right sidebar’s Auto Layout section.
- Alternatively, drag an object into an Auto Layout frame while holding ⌃ Control (Ctrl).
Alt text: Enabling Ignore Auto Layout in Figma. Dragging an element with Control key into Auto Layout frame for absolute positioning.
Spacing: Fine-Tuning Element Distribution
Gap Between Items: Defining Element Spacing
The Gap between items property controls the spacing or distribution between elements within an Auto Layout frame.
It offers two primary settings:
- Auto: Automatically maximizes the gap between elements, distributing them evenly within the available space. Type “Auto” or select it from the dropdown.
- Specified Gap: Allows you to set a precise distance between elements by entering a numeric value, using arrow keys for nudging, or scrubbing with your cursor.
Quickly toggle between Auto and Specified Gap by clicking the alignment box and pressing X.
Alt text: Figma Auto Layout Gap Between Items. Setting gap to Auto to distribute elements evenly.
The availability of horizontal or vertical gap settings depends on the Auto Layout frame’s direction. Wrap direction enables both horizontal and vertical gap adjustments.
Tip: Hold ⇧ Shift while dragging spacing handles for larger increments using the big nudge value.
Padding: Creating Space Around Content
Padding defines the empty space between the edges of an Auto Layout frame and its child elements. You can apply uniform padding, vertical/horizontal padding, or specify individual values for top, right, bottom, and left sides.
Adjust padding using on-canvas controls or the spacing fields in the right sidebar.
On-canvas controls appear as pink handles when you hover over a selected Auto Layout frame.
- Click handles to input numeric padding values.
- Drag handles to visually adjust padding.
Alt text: Figma Auto Layout Padding Adjustment. Using on-canvas handles and keyboard shortcuts to modify padding.
Right sidebar padding controls offer vertical (top/bottom) and horizontal (left/right) padding by default.
- Click to access individual top, right, bottom, and left padding fields for customized padding.
- For uniform padding or CSS shorthand, hold ⌘ Command (Ctrl) and click any padding field. CSS shorthand like
1,2,3,4(top, right, bottom, left) or1,2(top/bottom, left/right) is also supported.
Alt text: Figma Auto Layout Padding CSS Shorthand. Entering CSS shorthand values for padding in the right sidebar.
Tip: Use the Tab key to quickly navigate between padding input fields.
Strokes in Layout: Including or Excluding Borders
By default, strokes (borders) are not included in the size calculation of elements within Auto Layout frames. This can lead to discrepancies when handing off designs to developers, as CSS typically renders borders differently.
You can control whether strokes are included in Auto Layout calculations via the stroke dropdown in Auto Layout settings, choosing between included in layout or excluded from layout.
Alignment: Positioning Elements within Auto Layout Frames
Set Alignment on Child Objects: Defining Element Position
Alignment in Auto Layout dictates how child elements are positioned within their parent frame. Alignment options are influenced by the Auto Layout frame’s direction and the gap between items setting.
Unlike standard frames, element alignment is controlled at the parent Auto Layout frame level, not individually on child objects.
Use the alignment box in the right sidebar to select from nine alignment options for child elements.
- Use arrow keys to cycle through alignment options.
- Press W/A/S/D to align to the top, left, bottom, or right edges of the frame respectively.
Alt text: Figma Auto Layout Alignment Box. Using the alignment box to adjust element alignment within the frame.
When gap between items is set to Auto, alignment options are limited to three per direction:
- Vertical Auto Layout: Left, Center, Right
- Horizontal Auto Layout: Top, Center, Bottom
Alt text: Figma Auto Layout Auto Gap Alignment Options. Limited alignment choices when gap between items is set to Auto.
With a specified gap between items, all nine alignment options are available:
- Top left, Top center, Top right
- Left, Center, Right
- Bottom left, Bottom center, Bottom right
Note: When resizing is set to Hug contents, some alignment selections might appear visually identical as “Hug contents” minimizes extra space around child elements.
Text Baseline Alignment: Aligning Text and Icons Harmoniously
A baseline is the invisible line upon which text rests, with descenders extending below it. Text baseline alignment can enhance visual balance, particularly when aligning text layers with varying font sizes or combining icons with text.
Alt text: Figma Text Baseline Alignment Comparison. Showing alignment differences with and without baseline alignment enabled.
To enable baseline alignment, select the layers and activate the baseline alignment option in the Auto Layout settings panel.
Tip: Toggle text baseline alignment on/off by pressing B when the alignment box is selected.
Resizing: Adapting to Content Changes
Resizing is a cornerstone of Auto Layout’s power, enabling dynamic adjustment of element dimensions within Auto Layout frames.
Set resizing behavior for parent frames to respond intelligently to changes in their child elements. Resizing settings are applied independently for the X and Y axes via dropdown menus in the right sidebar.
Hovering over resizing options visually previews the resizing behavior on the canvas.
Alt text: Figma Auto Layout Resizing Options. Location of resizing settings in the right sidebar panel.
Note: Text layers also possess their own resizing properties, which can interact with Auto Layout resizing for advanced effects. Avoid fixed-size text boxes within fluid Auto Layout frames to prevent text overlap during resizing.
Fixed Width or Height: Maintaining Constant Dimensions
Fixed width or height settings maintain the frame’s dimensions regardless of content changes. The frame size remains static, even if text length or element size varies.
Minimum and Maximum Dimensions: Setting Size Constraints
You can define minimum and maximum width and height constraints for Auto Layout frames and their children.
- Width dropdown: “Add min width,” “Add max width”
- Height dropdown: “Add min height,” “Add max height”
Select an option and input a value or variable in the new field.
Alt text: Figma Auto Layout Minimum Width Setting. Setting a minimum width constraint for an Auto Layout element.
Elements with min/max settings display two lines on each side of their width/height icon. Hovering over these icons previews dimension limits on the canvas.
Min/max fields are hidden when an object is deselected and reselected. Click the width or height icon to access them again.
Remove min/max settings via the Width or Height dropdown and selecting “Remove min and max”.
Note: Layers cannot have both max height and a set number of max lines simultaneously. Setting max height disables max lines and vice versa.
Hug Content: Adapting to Content Size
Hug content resizing resizes the Auto Layout frame to tightly fit its child elements, respecting padding values. The frame shrinks or expands to encompass its content.
Tip: Double-click the vertical or horizontal edge of an Auto Layout object’s bounding box to quickly set it to Hug contents.
Note: If any child element within a Hug content frame is set to Fill container, the parent frame’s resizing behavior will switch to Fixed for that axis.
Fill Container: Stretching to Parent Frame Dimensions
Fill container resizing makes elements stretch to occupy the full width and/or height of their parent Auto Layout frame.
Child elements manually resized to the full width of their parent frame are also automatically set to Fill container.
Tip: Hold ⌥ Option (Alt) and double-click the vertical or horizontal edge of an Auto Layout object’s bounding box to set it to Fill container.
Constraints: Applying to Parent Frames
Constraints cannot be directly applied to child elements within Auto Layout frames, except for elements using Ignore Auto Layout. Instead, use resizing properties to manage how elements respond to frame resizing.
You can still apply constraints to the Auto Layout frame itself when it’s nested within a regular frame. The Constraints section and resizing options will appear, enabling control over both the Auto Layout frame’s constraints and the resizing behavior of its internal elements.
Example: For a tag set using Auto Layout, constraints can ensure the navigation bar adapts to different screen sizes, while resizing properties manage the tag elements’ responsiveness within the navigation bar.
Alt text: Figma Auto Layout Constraints Example. Setting constraints on a navigation bar using Auto Layout for responsive design.
Keyboard Shortcut Guide: Streamlining Auto Layout Workflow
Basic Shortcuts
| Action | Mac | Windows |
|---|---|---|
| Add auto layout | ⇧ Shift A | ⇧ Shift A |
| Suggest auto layout | Ctrl ⇧ Shift A | Ctrl Alt ⇧ Shift A |
| Remove auto layout | ⌥ Option ⇧ Shift A | Alt ⇧ Shift A |
| Edit padding all sides | ⌘ Command + Click padding input | Ctrl + Click padding input |
From the Alignment Box
Click the alignment box and use these keys:
| Action | Mac and Windows |
|---|---|
| Set alignment | ↓ / → / ← / ↑ |
| Set alignment to edge | W / A / S / D |
| Toggle baseline alignment | B |
| Toggle gap between | X |
From the Canvas
Use these shortcuts while dragging on-canvas handles:
| Action | Mac | Windows |
|---|---|---|
| Set padding opposite sides | ⌥ Option | Alt |
| Set padding all sides | ⌥ Option⇧ Shift | Alt⇧ Shift |
| Set padding/spacing big nudge | ⇧ Shift | ⇧ Shift |
Use these shortcuts and click areas in an Auto Layout frame:
| Action | Mac | Windows |
|---|---|---|
| Input padding opposite sides | ⌥ Option + Click padding area | Alt + Click padding area |
| Input padding all sides | ⌥ Option⇧ Shift + Click padding area | Alt⇧ Shift + Click padding area |
| Set hug contents | Double-click vertical/horizontal edge | Double-click vertical/horizontal edge |
| Set fill container | ⌥ Option + Double-click vertical/horizontal edge | Alt + Double-click vertical/horizontal edge |
