Design vs Animate Mode

Though most of Rive’s design and animation features will be familiar to creators, there are innovative interactive features that are unique to Rive.

The first unique feature you’ll probably notice in the Rive Editor is that it has two modes: Design and Animate. This differs from tools like Figma and After Effects because Rive exports interactive content.

Design Mode

Use Design Mode to prepare your graphics for animation. This is where you can design your own graphics with Rive's tools, import graphics from other software, or rig your graphics with bones, transform spaces, and constraints.

Think of Design Mode as the default starting point before any interaction or animation has happened. Anything you want to animate or interact with must exist in Design Mode first.

Animate Mode

Animate Mode is where you bring your graphics to life with animations and state machines.

Think of animations as states for your artboard. When a user interacts with your file (like a click or a hover), it causes different animations to play.

The State Machine is how you control which animations play. You can layer and mix these animations together to create interactivity. To learn more about this, read my blog on creating an interactive component with Rive’s State Machine.

Dive deeper into the concepts covered

• 🎓 Build an interactive star rating component with Rive's State Machine

• 📺 Animation mixing

• 📖 Learn more about Rive's State Machine