Frames and layout
Frames hold other layers and can arrange them with auto layout. Groups wrap layers without arranging them.
Frames
A document is a tree of layers. Only two kinds of layer have children: frame and group. A screen, a card, a button and a row of items are all frames. Draw one with the Frame tool (F), or wrap the current selection in a new frame with ⌥⌘G (Frame selection).
Each screen or page of a design is its own top-level frame on the canvas. Set clip: true on a frame to hide whatever spills past its edges.
Auto layout
A frame arranges its children with the layout property. In the Inspector this is the Auto layout section and its Layout direction control.
| Value | Inspector label | What it does |
|---|---|---|
"horizontal" | Horizontal | Places children in a row. This is the default for frames an agent inserts. |
"vertical" | Vertical | Places children in a column. |
"none" | Free (no auto layout) | Children are placed by their own x and y. |
Layout runs along one axis and does not wrap. To build a grid, stack row frames inside a vertical frame. Coordinates are relative to the parent's top-left corner, and x/y are ignored for children of a layout frame unless the child has layoutPosition: "absolute".
Gap, padding and alignment
gap: the space between children, in pixels.padding: one number for every side,[vertical, horizontal], or[top, right, bottom, left]. The Inspector Padding field takes 1, 2 or 4 numbers the same way.justifyContent: placement along the layout direction:start,center,end,space_betweenorspace_around. The Inspector calls it Distribute.alignItems: placement across it:start,centerorend. The Inspector calls it Align items.
Padding applies to every child. There is no margin: to offset one child, wrap it in a frame with its own padding. There is also no baseline alignment.
Sizing
width and height take a number of pixels or a sizing keyword. The Inspector shows them as Width sizing and Height sizing, with the options Fixed, Hug and Fill.
| Value | Meaning |
|---|---|
240 | A fixed size in pixels. |
"fit_content" (or "hug") | Shrink to fit the children. |
"fill_container" (or "fill") | Take the space the parent's layout gives it. |
"fit_content(100)" | Fit the content, with a fallback size. |
There are no percentage sizes, no vh and no calc(). Watch for one circular case: a parent that fits its content cannot be sized by children that all fill the parent. Give one side a real size.
card = Insert(document, {type: "frame", name: "Card", layout: "vertical", width: 320, gap: 12, padding: 24, fill: "#FFFFFF", cornerRadius: 12})
row = Insert(card, {type: "frame", name: "Actions", width: "fill_container", gap: 8, justifyContent: "end", alignItems: "center"})
Insert(row, {type: "text", name: "Cancel", content: "Cancel", fontSize: 14, fill: "#52525B"})Groups
A group is a transparent container. It has no layout or padding of its own: after each change it moves to the top-left of its layers and shifts their x/y to match, so nothing moves on the canvas. Group a selection with ⌘G and ungroup it with ⇧⌘G.
Something unclear, missing or broken? Write to feedback@anaknegeri.dev.