Layouts
Rive's Layout system lets you build designs that adapt to any container size — across screen sizes, device densities, or dynamically resizing UI components. Layouts control how children are sized, positioned, and spaced, and they can be animated just like any other property.
What Is a Layout?
A Layout is a container that automatically arranges its children based on rules you set. Think of it like a shelf that reorganizes its items when you make the shelf wider or narrower. Children resize and reposition (reflow) rather than simply scale up or down.
Layouts use Flexbox-inspired rules (Flexbox is a popular web layout system — Rive uses the same concept): a main axis (the direction children stack), a cross axis (the perpendicular direction), spacing, alignment, and sizing modes.
Adding a Layout
- Select an artboard or group in the Inspector.
- Enable the Layout property, or click the Layout icon in the Toolbar.
The Inspector then shows layout-specific properties.
Sizing
Every layout — and each child inside a layout — has a sizing mode on each axis:
| Mode | Behavior |
|---|---|
| Fixed | A specific pixel size. Does not change with content or parent. |
| Hug | Shrinks or grows to fit its children. |
| Fill | Grows to fill the available space in the parent layout. |
Fit and Alignment
Fit controls how a component scales inside a fixed-size container. Use it when your content needs to fill a space that is a different shape than the content itself:
| Fit | Behavior |
|---|---|
| Fill | Scales to fill the container entirely. May crop. (Note: "Fill" as a Fit option is different from "Fill" as a sizing mode — here it means the graphic scales up to fill the container, not that it takes up remaining space in a parent layout.) |
| Contain | Scales to fit within the container without cropping. |
| Cover | Scales until both axes are covered. May crop edges. |
| Fit Width | Scales to match the container's width. |
| Fit Height | Scales to match the container's height. |
| None | No scaling; uses the component's intrinsic size (the natural size the content wants to be, based on its own contents). |
| Scale Down | Like Contain, but never scales up beyond the intrinsic size (the natural size the content wants to be, based on its own contents). |
Alignment sets where content is anchored in the container — a 3×3 grid (Top Left → Bottom Right), or precise numeric X/Y values.
Layout Tools
The Layout Tool in the Toolbar gives you interactive handles to set sizing and spacing directly on the Stage, without opening the Inspector.
Use the interactive layout handles on the Stage.
Layout Parameters
Use these Inspector properties to fine-tune a layout's behavior:
- Gap — Space between children along the main axis.
- Padding — Space between the layout's edge and its children.
- Main Axis Alignment — Start, center, end, space-between, space-around, space-evenly.
- Cross Axis Alignment — Start, center, end, stretch, baseline.
- Wrap — Whether children wrap to a new row/column when they overflow.
Full reference for gap, padding, and axis alignment options.
Layout Styles
Layout Styles are reusable sets of layout properties — like a named preset you can apply to multiple layouts at once. Apply the same style to multiple layouts so they all update in sync when you change the style.
Create and apply reusable style definitions across layouts.
N-Slicing
N-Slicing divides an image or artboard into regions that scale independently. The corners stay at their original size; only the edges and center stretch. Think of it like a rubber stamp border — the corners never distort, but the sides stretch to any width.
Use N-Slicing for:
- UI button backgrounds that grow with their label
- Panels or modals that resize without distorting borders
- Nine-patch-style images (nine-patch is a technique that splits an image into 9 zones so corners and edges scale without distortion — like a speech bubble that stretches without squishing its corners)
Set up N-Slice regions and configure per-region scaling.
Scrolling
A layout can become scrollable — children that overflow the layout's bounds are hidden and revealed by scroll interaction at runtime.
To enable scrolling:
- Set the layout to a fixed size on the scroll axis.
- Enable Overflow: Scroll or Overflow: Scroll X / Scroll Y.
- At runtime, drive the scroll position with user input or a state machine (a graph that controls animation logic).
Configure scrollable layouts and connect them to runtime interactions.
Animating Layouts
Layout properties — sizing, padding, gap, alignment — are all animatable in the Timeline. Use layout animation to build smooth resize transitions, collapsing menus, or responsive on-state changes.
Animate layout properties on the timeline.