Auto Layout
Let a group flow its children in a row or column, like Figma's Auto Layout: animate one child and its siblings follow.
Auto Layout turns a group into a row or a column that places its children for you, with a gap between them and padding around them, just like Auto Layout in Figma. The difference is that EaseKit solves the layout at every moment of the animation: when one child grows, shrinks, changes its text or fades out, its siblings slide along and a hugging group resizes around them. You animate the one element that changes, and the rest follows.
Frames imported from Figma keep their Auto Layout (see Import from Figma). You can also add it to any group by hand.
Add Auto Layout to a group
- Select a group on the stage (group layers first with ⌘G if needed).
- In the inspector, find the Auto Layout section. Without a layout it says “Children flow in a row or column. Animate one and the rest follows.”
- Click + (Add Auto Layout). EaseKit looks at how the children sit and infers the direction, gap, padding and alignment, and orders the children along the axis, the way Figma does.
- Adjust the fields below. Every change is one undo step in the draft.
Click − (Remove Auto Layout) to turn it off again. The children keep their positions; nothing jumps.
The group's settings
| Control | Options | What it does |
|---|---|---|
| Direction | Horizontal, Vertical | A row or a column |
| Gap | Points | Space between neighbouring children |
| Padding | Points | One value for all four sides (it shows the largest side) |
| Top, Right, Bottom, Left | Points | Padding per side |
| Distribute | Row: Left, Center, Right, Between. Column: Top, Middle, Bottom, Between | Where the children sit along the axis. Between spreads them to the edges with equal gaps |
| Align | Row: Top, Middle, Bottom. Column: Left, Center, Right | How the children line up across the axis |
| Width, Height | Hug, Fixed | Hug: the group takes the size of its content plus padding. Fixed: the group keeps its size |
A child in Auto Layout
Select a layer inside a layout group and the inspector shows an In Auto Layout section, with the group's direction on the right. The same section appears when you open the layer in the Layers tab.
| Control | Options | What it does |
|---|---|---|
| Width, Height | Fixed, Hug, Fill container | Fixed keeps the layer's size. Hug fits the content (text layers and groups with their own layout only; text hugs by default). Fill container takes the free space along the axis, shared with other filling children, or the full size across it |
| Collapse when hidden | On / off | While the layer fades out, its slot and the gap before it close, so the siblings slide together. Fading it back in opens the slot again |
| Absolute position | On / off | Takes the layer out of the flow: it keeps its own place and the siblings close up as if it weren't there |
Layout badge
Groups with Auto Layout carry a small arrow badge next to their name in the timeline lanes and in the Layers tab: ↔ for a row, ↕ for a column. Hover it for the details, for example “Auto Layout · horizontal · gap 8”.
How reflow works when you animate
The layout runs at every frame, so these animations reflow the siblings on their own. Don't keyframe the siblings' positions; animate the one child.
| You animate | What happens |
|---|---|
A child's width or height | Its neighbours move to make room; a hugging group grows or shrinks |
| A text change (a Morph text animation, or a variant with another text) | The text box resizes to the new text, and the siblings follow |
| A child's opacity, with Collapse when hidden on | Its slot and gap shrink with its opacity: fade it out and the rest slides together |
A child's x or y | Offsets the child from its slot. Slide-ins still work; the siblings don't move |
| Scale or rotation | No reflow: they draw around the slot without changing the layout |
Hold keys glide
A Hold keyframe on a child's size, or a collapsing child that disappears at once, would make the siblings jump. Instead, the layout eases the change over its own transition, a calm 0.3 s spring by default, so the siblings glide into place. Continuous changes (a width animating over 400 ms) reflow frame by frame on the child's own curve. To change the layout transition, ask the AI (“let the toolbar's layout settle with a quick ease”).
Variant switches
When an instance switches variant, children that appear or leave collapse in and out, and a text that changes crossfades inside one slot that blends between both sizes. That's how a button can grow an icon and push its label aside on hover.
In exports
| Export | Auto Layout becomes |
|---|---|
| HTML, CSS, Motion (React) | Flexbox: the group is a flex container and its children flex items, so the browser reflows them natively when a width animates or a text changes |
| SwiftUI | HStack / VStack with spacing, padding and alignment |
| Lottie, SVG, Web Animations, video, GIF, PNG | Baked: the solved positions and sizes are sampled into plain keyframes |
With the AI and MCP
Ask in plain words (“put the chips in a row with an 8 pt gap and let the second one grow on hover”). Behind the scenes the AI uses three edit operations, which Claude can also use over MCP (see the MCP tools reference):
| Op | What it does |
|---|---|
layout | Turns Auto Layout on for a group (unset fields are inferred from the children) or changes it: direction, gap, padding, justify, align, width / height, transition |
clear_layout | Turns it off; the children keep their positions |
layout_item | A child's width / height (fixed, hug, fill), absolute, stretch, collapse |
Limits
- No wrapping: a layout is one row or one column. Nest layout groups for grids.
- No minimum or maximum sizes, and no baseline alignment.
- Dragging a child on the stage doesn't reorder it; the layout snaps it back to its slot. The flow follows the layer order, so Stage → Bring Forward / Send Backward (⌥⌘↑ / ⌥⌘↓) move a child along it, or ask the AI.
- Auto Layout works on group layers only, not on instances or single shapes.
- Hugging text is sized from EaseKit's estimate of the text's width, so it can differ by a point or two from what a browser measures.
Works with
- Import from Figma: frames arrive with their Auto Layout.
- Variants: a variant with an extra icon or a longer label reflows on switch.
- Text animation: a Morph changes the text and the layout follows.
Troubleshooting
| If this happens | Try this |
|---|---|
| A child jumps back after I drag it | Its place comes from the layout. Turn on Absolute position to place it freely, or offset it with x / y keys. |
| The siblings don't move when I scale a child | Scale and rotation don't reflow. Animate width or height instead. |
| Hug is missing for a child | Only text layers and groups with their own layout can hug. Use Fixed or Fill container. |
| Fading a child out leaves a gap | Turn on Collapse when hidden for that child. |
| The Auto Layout section is missing | It's shown for groups only. Group the layers first (⌘G). |