Introducing Layouts 🎉

Layouts has landed in Rive! This new feature lets designers and developers build dynamic, production-ready graphics that adapt to any screen size or device. 

Rive Layouts combine the flexibility of motion design with responsive web principles, so you still have the slick animations and interactivity Rive is known for.

Why Layouts matter

People use all kinds of screens — from widescreen monitors to smartphones to automotive HMI. Whether it’s a functional menu, a hero section, or a UI component that needs to work on a car dashboard and a PS5, Layouts lets you create responsive designs without compromising creativity. 

Layouts in action

Here are some examples of what you get with Layouts: 

Dynamically resized menus: Build one graphic and make it fit everywhere. Automatically adjust your graphics based on their positioning, dimensions, padding, and margins, all through intuitive controls. With Layouts, objects can stretch, shrink, or realign depending on screen size without losing their animation.

Cross-device functionality: Graphics can transition smoothly between a car’s dashboard and a smartphone. 

Multi-language support: Create graphics that automatically resize to support different languages. No more worrying about whether the text will fit — Rive Layouts will handle it.

Scalable design systems: Build reusable components that adapt to any screen size, ensuring consistent design across all platforms.

Deep nesting and flexibility: Mix and match alignment, wrapping, and spacing options to build layouts that can adjust to the most complex use cases. 

Breakpoints: Detect component width, height, or aspect ratio to trigger different states in Rive’s State Machine.

Layouts in Rive hits different

Rive behaves differently than other design tools. Our default transform space is on a freeform canvas, giving designers more flexibility and not forcing them to stick to a rigid model. When adding Layouts — a more structured way to build UI — we kept this freeform approach because it powers key features like bones and constraints. 

Here’s how we’re different:

Bridging two worlds: You decide whether an object inside a layout participates in the layout engine. This allows freeform motion graphics, like highly animated characters, to be mixed into more structured layouts. 

Layout flexibility with constraints: Our Layouts combine with constraints to animate items in and out of their structured transform space. This flexibility allows us to break layout items out of their hierarchical relationships so that even when your design shifts, your animations stay precise and controlled.

Interactivity at every level: Animate layout properties interactively with Rive’s State Machine and detect component width, height, and aspect ratio to trigger different states.

What’s next?

This is just the beginning. We’re rolling out Layouts in three phases, with part one introducing the core features. In the (near) future, you’ll see scrolling and n-slicing.

Build responsively

With Rive Layouts, we’re setting a new standard for what’s possible in motion design. You no longer have to compromise between beautiful animations and responsive design. You can have it all in a single, intuitive tool. 

Get hands-on and see how Layouts can transform your workflow. Start building interactive, production-ready motion designs that look stunning across every screen.