In Figma, Auto Layout dramatically improves how designs respond to content changes, but there are moments when you need an element to sit outside the normal flow without leaving the Auto Layout frame. This is where absolute positioning-now referred to as Ignore Auto Layout-becomes invaluable. An object with Ignore Auto Layout is excluded from the auto layout flow while still living inside the auto layout frame, allowing precise placement relative to its parent container.
What absolute positioning (Ignore Auto Layout) does
An object with Ignore Auto Layout enabled is excluded from an auto layout flow while keeping it in the auto layout frame. The object and its surrounding siblings ignore each other, even as they resize and move. Much like absolute position in CSS, an object that ignores auto layout can be placed precisely where you want relative to its parent container.
In practice, you can select multiple elements inside an auto layout frame, apply auto layout, and then designate specific items as absolutely positioned to overlay or position components in ways that the standard flow cannot accommodate-such as placing a small online status dot over an avatar or anchoring a notification badge to a corner of an image.
How to apply Ignore Auto Layout in Figma
To enable absolute positioning for an element inside an auto layout frame, navigate to the right panel and click the Ignore Auto Layout (formerly called absolute position) option. The selected element remains within the same frame and retains its auto layout settings, but behaves like a regular object in a standard frame for placement purposes.
Once enabled, you can drag the ignore-auto-layout object anywhere within the bounds of the auto layout frame, placing it precisely where you want, such as the bottom-right corner of an avatar with a small online indicator layered on top.
Important considerations when using absolute positioning inside auto layout
- Ignore Auto Layout makes the chosen element behave independently of the frame’s flow, but you can still apply constraints to it relative to the parent frame.
- Constraints work as expected for the element, even though it ignores the auto layout flow; this helps maintain consistency when the parent frame resizes.
- Nested auto layout frames can combine horizontal, vertical, and grid flows, while absolute-positioned children inside them can be placed precisely where needed.
- When an object ignores auto layout, you cannot rely on wrap, gap, or padding alone to position it; use the Ignore Auto Layout control to anchor the element where you want.
- If an object within an auto layout frame is set to Fill container, the parent frame may stop hugging its contents and behave differently on resizing; plan accordingly when mixing resizing behaviors with absolute-positioned elements.
Practical workflow: overlaying a status indicator on an avatar
Start with an auto layout frame containing an image avatar and a green ellipse indicating online status. After applying auto layout, select the small ellipse and enable Ignore Auto Layout. Now the ellipse can be dragged to the bottom-right corner of the avatar, overlaying it while the rest of the layout continues to respond to content changes.
This approach mirrors a common UI pattern where decorative or status indicators must stay visually aligned with a primary element regardless of how other content shifts within the frame.
Nesting and constraints: advanced usage
When nesting auto layout frames, you can combine multiple directions and flows to create complex interfaces. Inside a parent auto layout frame, an absolutely positioned child can remain anchored while the rest of the layout reflows. You can still set constraints at the parent level to ensure responsive behavior as the frame resizes, and apply constraints to the absolute-positioned child to maintain its relative position.
Remember that you cannot apply constraints to child objects inside an auto layout frame unless the object ignores the auto layout flow. For the absolute-positioned element, you can use constraints to preserve its position relative to the parent as needed.
Related topics you may encounter
- Auto layout basics: adding frames and choosing horizontal, vertical, or grid layouts.
- Resizing behaviors: hug contents, fill container, and fixed sizes, and how they interact with absolute-positioned elements.
- Constraints and responsive design: how to pin elements within frames when the parent resizes.
- Prototyping considerations: how absolute positioning affects transitions and interactions, including background needs for certain smart animate transitions.
Table: key behaviors at a glance
| Feature | Effect in Auto Layout | Impact on Absolute Position |
|---|---|---|
| Auto Layout frame | Reflows children based on direction, padding, and gaps | Absolute-positioned items are not forced into flow; they can be positioned independently |
| Ignore Auto Layout | Element is excluded from auto layout flow | Can be placed anywhere inside the frame and maintain separate alignment |
| Constraints | Controls how the frame itself resizes | Still applicable to absolute-positioned elements for precise anchoring |
| Fill container | Child grows to fill available space | May conflict with absolute positioning; plan usage carefully |
| Hug contents | Frame shrinks to fit content | Absolute elements stay fixed in their chosen position |
Practical tips for better results
- Use Ignore Auto Layout sparingly on elements that truly need fixed placement relative to their container.
- Combine absolute positioning with constraints on the parent to ensure predictable behavior during resizing.
- Test in nested auto layout scenarios to confirm that overlay placements remain correct as content changes.
- When prototyping, consider using a background rectangle to achieve desired slide-in or move-in transitions if needed alongside auto layout.
