Rive for product design
Your agent builds interactive UI with the Rive CLI. Your team shapes it together in the Rive Editor, with professional tools for motion, states, and data, and keeps your design system in sync by sharing components across files with Libraries. Developers and agents ship it on every platform.
Interactive UI and real-time 3D, built in Rive. Drag to rotate the phone, and tap Week, Month, or Year.
Spotify Wrapped
Spotify’s design team built the Wrapped 2025 stories in Rive, with layouts and data that change for every listener.
LinkedIn Year in Review
A personalized, data-driven experience built entirely in Rive, with 207,360 possible user journeys across three languages.
Rive Editor
Your team refines every screen by hand in the Rive Editor: build reusable Components, wire up states with the State Machine, bind real data with Data Binding, and make screens responsive with Layouts.
Components
Design a button, card, or chart once, with all its states, and reuse it on every screen.
Libraries
Share components across files. Update the library, and every file that uses it follows.
State Machine
Wire up hover, pressed, loading, and empty states with transitions, without code.
Data Binding
Bind text, numbers, lists, and images to your app’s data, so you design with real content.
Layouts
One responsive design that reflows from phone to tablet to desktop.
Scrolling
Scrolling lists and carousels with momentum and bounce, built in.
AI characters
Assistants, tutors, and companions built in Rive, with states, lip sync, and live data from your app.
Brilliant’s Koji
Brilliant built Koji, the tutor in its math and coding lessons, as one interactive Rive character.
Luvu
Matt Jedrzejewski built Luvu, the fitness companion in the Luvu app, as a fully rigged Rive character with controls for its eyes, lips, and bounce.
How to get started
Your agent builds it. You test it in the CLI preview window and keep directing it until it’s right.
01 Paste the prompt
Paste it into Claude Code, Codex, Cursor, or any coding agent. The agent installs the Rive CLI for you.
02 Describe the UI
Ask for a component, a flow, or a whole screen. Your agent writes the Rive file and shows it in the CLI preview window.
03 Add states and data
Hover and pressed states, loading and empty states, and text and numbers bound to real data. Ask your agent or build them in the Editor.
04 Keep designing in the Editor
Push the file to your Rive account and open it in the Rive Editor. Refine layout, motion, and states with professional design and animation tools. Needs a free Rive account.
Why Rive
Without Rive, a design gets rebuilt by hand: HTML and CSS for the web, Swift for iOS, Kotlin for Android. Each version drifts from the design and from the others. With Rive, what you design is what ships.
No rebuild per platform
It runs on web, iOS, Android, Flutter, React Native, and desktop through open-source runtimes. Nobody rewrites it in HTML, Swift, or Kotlin.
No handoff
Developers and agents load your file and bind it to app data. Every state, transition, and animation is in it, so nothing gets lost in a spec.
Same behavior everywhere
State Machines, Data Binding, and scripts in the file run on every Rive runtime, so a hover, a loading state, or a chart reacts the way you designed it.
Small and fast
Compact files instead of video, image sequences, or a large JavaScript bundle, drawn on the GPU by the Rive Renderer.
FAQ
Common questions from product designers new to Rive.
Can I start from tools other than Figma?
Yes. The Rive Editor imports SVG from any design tool, including Illustrator, Sketch, Penpot, and Affinity, and turns it into editable Rive shapes. It imports Photoshop files too.
How is this different from a prototype?
A prototype shows how the product should feel, then someone rebuilds it in code. A Rive file is the product: it runs in your app with Rive’s open-source runtimes, and you keep editing it.
Do I need to code?
No. You can design, animate, and wire up states and data in the Rive Editor without code. A coding agent can speed up the first pass if you want one.
Can I build AI assistant characters and UI?
Yes. Koji, Luvu, and Vercel’s Persona above are all built in Rive.
How do developers and agents use my file?
They add the Rive runtime for their platform and set values through Data Binding, like a name, progress, or what the assistant is doing. The design and its logic stay in your file.
Do I need a Rive account?
You can build and preview without one. Sign in to publish or export a file, open it in the Rive Editor, or go past the free usage limits.
Join our newsletter
Get all the latest Rive news delivered to your inbox.