Figma Guide
Auto Layout: Figma → Elementor
A short guide to how Figma Auto Layout is used in your design and how it becomes Elementor layout in the template.
Setup
In Figma: What to do
1
Select a Frame
Select a Frame (e.g. a section named
el-container:header).2
Add Auto layout
In the right panel, click Auto layout (or use Shift+A).
3
Set the options
Direction — Horizontal (row) or Vertical (column).
Alignment — How items sit on the main axis (e.g. left/right/center/space between) and on the cross axis (e.g. top/center/bottom).
Padding — Inner spacing (top, right, bottom, left).
Gap — Space between the children.
Alignment — How items sit on the main axis (e.g. left/right/center/space between) and on the cross axis (e.g. top/center/bottom).
Padding — Inner spacing (top, right, bottom, left).
Gap — Space between the children.
Figmentor reads these values from your design and applies them to the corresponding Elementor container.
Reference
How it maps to Elementor
Figma Auto Layout properties are converted to Elementor Container flex and spacing settings as follows:
| Figma (Auto Layout) | Elementor (Container) |
|---|---|
| Direction: Horizontal | Flex direction: row |
| Direction: Vertical | Flex direction: column |
| Primary axis: Min | Justify content: flex-start (e.g. left / top) |
| Primary axis: Center | Justify content: center |
| Primary axis: Max | Justify content: flex-end (e.g. right / bottom) |
| Primary axis: Space between | Justify content: space-between |
| Primary axis: Space around | Justify content: space-around |
| Counter axis: Min | Align items: flex-start |
| Counter axis: Center | Align items: center |
| Counter axis: Max | Align items: flex-end |
| Counter axis: Stretch | Align items: stretch |
| Padding (top, right, bottom, left) | Container padding (same sides) |
| Gap (item spacing) | Container gap (between items) |
Examples
In practice
- Header row: Frame with Auto Layout Horizontal, padding and gap as needed → in Elementor you get a row with the same padding and spacing.
- Hero section: Frame with Auto Layout Vertical, centered → in Elementor you get a column, centered.
- Card grid: Frame with Auto Layout Horizontal and Wrap (when supported) → direction and gap are preserved; wrapping may need to be adjusted in Elementor if your export doesn't include wrap.
Use Auto Layout on any frame you name el-container:name so the layout is carried over correctly.
Summary
Summary
- Turn on Auto Layout in Figma for sections (containers).
- Set direction, alignment, padding, and gap.
- Figmentor converts them to Elementor flex direction, justify content, align items, padding, and gap.
For full Figma setup and naming, see Structuring Your Design and Naming Layers.