Fix auto layout problems

A frame without auto layout keeps the fixed positions it has in Figma. In Elementor it will not adapt to tablet and mobile screens. Add auto layout to the frame in Figma, then import again.

Why it matters

• Elementor lays out a container with flexbox: a direction, a gap between items, padding and alignment.
• Figma's auto layout describes a frame with the same settings, so Atomic Studio turns it into a container that reflows when the screen gets narrower.
• A frame without auto layout only has the x and y position of each layer. Atomic Studio keeps those positions in pixels, so the content stays where it was drawn, overlaps or runs off the side on a smaller screen.
• The import counts every frame that holds more than one layer and has no auto layout. That count is the number on the “auto layout problems” tag.

Find the frames

1. On the import report in WordPress, find the “auto layout problems” tag and select Show frames below it.
2. Select Open in Figma next to a frame. Figma opens with that frame selected.
3. To check a whole design before importing, run the Auto Layout Checker (opens in a new tab) plugin in Figma.

Add auto layout to a frame

1. Select the frame in Figma.
2. Press Shift + A, or right-click the frame and choose Add auto layout.
3. In the Auto layout section of the right sidebar, set the direction (vertical or horizontal), the gap between items and the padding.
4. Check that the layers are still in the right order. Auto layout places them in layer order, so drag them in the Layers panel if needed.
5. Set each child's width and height to Hug contents or Fill container rather than Fixed, so it can grow and shrink with the screen.
6. Work from the innermost frames outward: a card first, then the row of cards, then the section that holds the row.

A layer that has to overlap others, such as a badge on a card or a decorative shape, can stay inside an auto layout frame with Absolute position switched on in the right sidebar. It keeps its position and is not counted as a problem.

Import again

Paste the same desktop frame link into Atomic Studio in WordPress and import again. Importing the same desktop frame again updates the page it created before.

Learn more about auto layout

• Guide to auto layout (opens in a new tab) — Figma Help Center
• Auto layout fundamentals (opens in a new tab) — Figma Help Center
• Auto layout playground (opens in a new tab) — Figma Community file to practice in
• Techniques for using auto layout in Figma (opens in a new tab) — Joey Banks
• Figma auto layout (opens in a new tab) — Blush