Interface

Summary

This lesson provides an overview of the Rive editor interface, focusing on its two distinct modes: Design and Animate. It covers artboard setup, navigation shortcuts, the hierarchy and inspector panels, and the fundamental difference between static design and keyframe-based animation.

Step by Step

1. 00:04
   Artboard Setup

   Choose a preset size or use the default (500x500px) to start your project.
2. 00:26
   Navigation Shortcuts

   Use pinch to zoom, Space + Drag to pan, and tap F to find and center your artboard.
3. 01:04
   Panel Overview

   Navigate between the Hierarchy (layers), Assets (images/fonts), and Data (state machine control) panels on the left.
4. 01:34
   Inspector Panel

   Use the right panel to modify object properties like position, size, and background color.
5. 01:52
   Toolbar Exploration

   Access tools for drawing (Pen/Shapes), text, rigging (Bones/Joysticks), and events.
6. 03:31
   Export Options

   Export as .riv for runtime, share interactive links, or publish to the Marketplace.
7. 04:31
   Creating Shapes

   Draw shapes, hold Shift for perfect proportions, and use alignment tools to center them.
8. 06:03
   Freeze Mode (Origin)

   Tap Y to move an object's origin point, changing how it rotates and scales.
9. 06:34
   Design vs. Animate Mode

   Switch to Animate mode to create keyframes (diamonds) and set up transitions.

Notes About Current Rive

• Collaboration: Multiple users can edit the same file simultaneously; you will see their avatars and real-time cursors.
• Non-Destructive Design: Changes in Design mode do not create keyframes, allowing for layout adjustments without affecting existing animations.
• Interpolation: Rive automatically interpolates values between keyframes to create smooth motion.