Interface

8m 43sPublished Jul 22, 2025Outdated+3 changes

SummaryVersion Notes (Draft)

This lesson offers a systematic tour of the Rive editor interface layout, covering the three core left-hand panels (Hierarchy, Assets, and Data Panels) and the right-hand Inspector. It breaks down the architecture behind Rive's dual workflows: Design Mode and Animate Mode. By exploring viewport controls, origin adjustments using Freeze Mode, and interpolation concepts, users establish a foundation for structural asset building.

The Absolute Barrier Between Design and Animate Modes:
- Design Mode: Any spatial changes made here overwrite the global default state of the shape node. Keyframes do not exist in this environment.
- Animate Mode: Transformations anchor strictly to timeline tracks, isolating animation changes to that specific timeline. This prevents accidental keyframe pollution, a common issue in traditional software when adjusting static layouts.
Handoff and Export Format Standards:
- .riv (Runtime Asset): Highly compressed and stripped of editing metadata, this format is tailored for runtime engine SDKs to handle fast, cross-platform WebGL/Wasm rendering.
- .rev (Backup File): Retains raw bezier vectors, construction history, and full workspace details. It is intended for designer-to-designer file sharing and offline cold-storage backups.

Recorded with an older Rive version3 changes

2025.7Officially re-recorded

New Interface video published.

View source ↗

2024.11Fills & Strokes merged

Fill and Stroke panels merged into one.

2024.8Download → Export

Download renamed to Export in editor menu.

📌 Key Points

Design & Animate modes, Stage, Inspector, Hierarchy, Assets, Toolbar.

📝 Notes

Markdown

0 chars

Step by Step

00:00:04

Artboard Initialization and Viewport Controls:

Initialize a standard 500px × 500px artboard framework. Learn to zoom via trackpad pinching or hotkeys (+/-), pan by holding spacebar and dragging, and press F to instantly refocus a lost viewport.
00:00:55

Deconstructing Left-Hand Side Panels:

Explore the side panels: the Hierarchy panel outlines object branching, the Assets panel ingests raster images, Lottie files, or typography, and the Data panel stores runtime View Model values.
00:01:34

Deconstructing Top Global Toolbars:

Analyze the toolbar blocks: Block 1 governs transformations and Freeze Mode; Block 2 manages Layouts and grouping mechanics; Block 3 maps vectors like the Pen Tool, Text Tool, Bones, and Runtime Events.
00:03:08

Collaborative Cursors and Three Export Targets:

Review multiplayer cursor tracking and break down the three primary export avenues: production-ready .riv runtimes, design back-up .rev formats, shareable web links, and Marketplace publishing options.
00:04:24

Object Creation, Centering, and Snapping Rules:

Hold Shift to drag out a perfect circle mesh, then snap it to the artboard's axis centers. Hold Command while moving an element to temporarily suspend live spatial grid snapping.
00:05:54

Modifying Pivots with Freeze Mode:

Observe shapes rotating around center mass by default. Press Y to activate Freeze Mode, manipulate the transform Gizmo to relocate the node's Origin point, and exit to execute custom eccentric rotations.
00:06:26

Explaining Mode Disconnection Principles:

Differentiate structural Design and timeline Animate modes. Elaborate on why modifying properties under Design mode alters global defaults without spitting out dirty keyframes.
00:07:03

Activating Timeline Tracks and First Keys:

Swap into Animate mode to reveal hidden diamond indicators next to node coordinates. Move the circle shape to the top of the canvas at frame 0, watching the markers turn blue to confirm initial key placement.
00:07:37

Tracking Properties Across Time Channels:

Scrub the blue playback pointer line toward the terminal bounds of the workspace container. Drag the circle mesh into its new coordinates to trigger automated parent track key generation.
00:08:01

Interpolation Rendering and State Machine Wrap-up:

Hit play on the timeline loop. The instructor explains that the rendering engine dynamically interpolates between keyframe sets across time. He concludes by previewing the State Machine, which ties multiple timelines together into interactive cross-platform experiences.