Fixed
Keep the entered dimension. Bounds remain available for a later responsive switch.
Responsive layout that keeps its meaning.
Compose cards, interfaces, and editorial systems with stacks and grids. Varve keeps authored sizing, percentages, constraints, spacing, and overlap available when you resize the frame.
Choose a sizing intent
Hug
Measure the occupied content, including intentional overlap from a signed stack gap.
Fill
Share the residual line space after definite and percentage allocations, with minima preserved.
Relative
Store a literal percentage of the parent content budget. Values above 100% stay explicit.
Build real compositions
- Proportional splits: Resize a panel while its 30/70 authored relationship stays intact.
- Wrapped tags: Let rows wrap against a frozen line budget and retain the first overflowing item.
- Avatar overlap: Use a signed gap to create an overlap without flattening the children.
- Bordered cards: Opt into visible stroke footprints when borders should participate in spacing.
- Grid systems: Combine explicit tracks, repeat definitions, spans, and auto-flow without duplicate editors.
One inspector, clear decisions
The Design inspector keeps Position & Size, Stack / Grid, typography, paints, effects, images, components, tables, and export under one ownership model. Advanced editors open in context and return focus to their row. Mixed selections patch the field you changed instead of copying an unrelated color, image source, or constraint.
Read the Auto Layout guide for field-level help, or see Grid Systems for canvas-owned guides.
Honest output
SVG, PDF, raster, and code export use the resolved geometry and effective paint order. CSS targets clamp unsupported negative gaps and report the limitation; responsive HTML and React output retain authored modes where the target can express them.