Auto Layout
Use one responsive model for interface components and graphic compositions. The inspector edits authored intent while the canvas shows resolved geometry.
Start with a frame
Select a frame and open Design → Stack / Grid. Choose Flex or Grid, then set direction, wrap, alignment, distribution, spacing, and padding. Select a child to set its flow position and per-axis sizing.
Position & Size owns X/Y, rotation, W/H, ratio lock, and bounds. The Stack / Grid section owns the relationship between children. A nested frame keeps its own flow settings.
Sizing modes
| Mode | What resolves | When to use |
|---|---|---|
| Fixed | Entered geometry | Artwork or a stable dimension |
| Hug | Occupied content union | Labels, tags, and content cards |
| Fill | Residual line space after definite and Relative items | Flexible panels and columns |
| Relative | Literal percentage of the parent content budget | Proportional splits and responsive media |
Relative percentages are authored values, not weights. They may exceed 100% when intentional. A zero reference stores 100% and explains why the percentage cannot be derived. Fixed min/max bounds remain visible but inactive until the axis changes mode.
Spacing, wrapping, and overlap
Flex row and column gaps may be signed. A negative gap moves items together and Hug measures the occupied union, so three 40px items at −60px occupy 80px. Grid gaps and padding stay non-negative. Distributed spacing keeps the authored gap as the minimum and shows its resolved effective value separately.
Wrapping freezes line membership before final allocation. The first item is admitted even when it overflows; minimum sizes are retained and the inspector can explain the overflow.
Use Overlap order to choose the effective topmost flow item. The setting preserves authored child order and keeps absolute children, masks, adjustments, and component boundaries in their existing slots.
Borders in layout
Enable Include borders in layout when visible stroke protrusions should contribute to a child footprint. The engine uses the union of visible per-edge stroke extents, preserves affine transforms, and excludes shadows and blur. Leave it off for the legacy geometry-only behavior.
Why this size?
The sizing details disclosure distinguishes unset, zero, mixed, constrained, and unavailable values. It reports the percentage reference, minimum overflow, Hug/Fill cycles, unsupported owners, and target export limitations. Direct invalid input is rejected without changing the document.
Output and import limits
SVG, PDF, raster, and code export read resolved geometry and the scene-owned effective paint order. CSS cannot emit a negative gap, so the codegen target reports the limitation and uses a resolved non-negative fallback. Figma Auto Layout fields are converted when their semantics map to Varve; unsupported resources remain in the Import Report.
For canvas guides that are independent of child layout, see Grid Systems. For the broader editing surface, see the Interface Overview.