Skip to main content
Layouts Layouts Overview

Layouts Overview

Layouts allow you to build responsive UI components in Rive. Make your designs fit, fill, or reflow content based on the space available. Leverage Rive's layout system to accommodate a variety of use cases:

  • Pin items to chosen edges of a parent artboard or container.

  • Create buttons and labels that adapt to the size of the text.

  • Build lists and grids of content that reflow, animate, and scroll (scrolling coming soon).

  • Combine and nest layouts to develop entire interfaces

You can use these techniques to create all kinds of production-ready buttons, lists, and menus that can fluidly resize to fit any device size or orientation. Rive graphics aren’t mockups or prototypes, they’re functional graphics that can change state and be connected to real data — and because Rive runs anywhere, you can re-use the same responsive graphics on mobile apps, game engines, websites, custom devices, and more.

Getting Started with Layouts

There are a number of ways to start adding layouts to your designs.

Layout Tools

A selection of new layout options have been added to the arrangement tools:

  • Layout: A basic layout container. Select the tool and drag on an artboard to create the layout. The layout is absolute positioned to the top and left edges by default. Items contained within the bounds of the newly created layout will automatically become children of it. Hold command / control while dragging the layout to prevent existing items from being moved into the layout.

  • Row/Column: The Row and Column tools are variants of the base Layout tool, but include an initial set of children laid out in the respective direction. You can use both the number keys or the up/down keys to define the number of children while dragging your row or column onto the stage.

Wrap in Layout

Instead of starting with an empty layout container, you may prefer to wrap existing items into a layout. There are a number of ways to wrap an active selection in a layout:

  • Right click on the stage or the hierarchy to surface the context menu. Select Wrap in > Layout.

  • Alternatively, you can use the Layout selection button in the inspector.

  • Use the shift + L shortcut.

  • Use the Layout tool to draw a layout over items on the stage. By default, items contained within the dragged layout will become absolutely positioned children. You can prevent the behaviour by holding the command/ control modifier while dragging your layout onto the stage.

Quickstart Video