Artboards

3m 41sPublished Jul 22, 2025Outdated+2 changes

SummaryVersion Notes (Draft)

This lesson explores the structural center of any Rive file: the Artboard. Serving as the primary root node of the object layer tree, the artboard sets the technical dimensions and background variables for deployment. The tutorial resolves core workflow challenges including coordinate frame shifts via origin modifications, workspace boundaries enforcement with canvas clipping, and duplicating interactive assets across multiple layouts.

The Technical Value of Multi-Artboard Architectures:
- A single compiled binary .riv package accommodates infinite independent artboards within the same workspace tree.
- Engineering Integration: Developers can load specific sub-components at runtime by calling target identifiers, such as artboard: "Your_Artboard_Name". This approach enables designers to ship an entire interactive icon set or dynamic asset package within a single asset deliverable, improving network load operations.
Strategic Origin Pivot Placement: Pinning the Origin point alters spatial matrix projections. Leaving it at 0% × 0% mirrors classic CSS layout mechanics, while centering it at 50% × 50% simplifies the spatial math behind rotation, 3D tilt steps, and parallax pointer tracking.
Deep-Copy Mechanics of Artboard Duplication (Command D): Unlike standard object cloning, duplicating an artboard copies the entire layer tree, vector shapes, keyframe data, and state machine transitions. This enables efficient setup for A/B testing variations or cross-platform scale mutations.

Recorded with an older Rive version2 changes

2025.7Re-recorded

New Artboards video.

View source ↗

2024.10Clipping off by default

Artboard clipping toggled off by default.

📌 Key Points

Create artboards, resize, set origin, background fill, multi-artboard management.

📝 Notes

Markdown

0 chars

Step by Step

00:00:04

Understanding the Root Parent Node:

Identify the artboard as the ultimate absolute parent container in the workspace hierarchy. Practice deselecting elements, re-engaging the artboard node via its canvas label tag, or pulling it directly from the top tier of the Hierarchy tab.
00:00:47

Modifying Global Asset Titles:

Rename the active container node by double-clicking the physical name banner tab on the canvas or clicking its reference entry within the left-side tree.
00:00:56

Repositioning Coordinate Origin Pivots:

Examine position, dimensions, and origin ratios in the right-hand Inspector. Shift the Origin value from 0% × 0% (top-left default) to 50% × 50% (true canvas center) to observe immediate coordinate mutations.
00:01:27

Enforcing Canvas Boundary Clipping:

Place a shape overlapping the edge. Toggle the Clipping configuration toggle inside the Inspector layout tray to instantly crop out and mask any overlapping vectors exceeding artboard perimeters.
00:01:49

Reviewing the Runtime Render Law:

The instructor emphasizes that independent of your editor clipping view choice, the runtime compiler will strictly ignore and discard elements sitting outside the artboard box boundaries during export.
00:02:05

Altering Background Gradient Properties:

Swap background values from static solid tones to Linear or Radial configurations, or toggle visibility off entirely to compile clear, transparent channel transparency assets.
00:02:29

Spawning Parallel Canvas Entities via Hotkeys:

Select the artboard and tap Delete to clear the viewport. Tap the keyboard shortcut A to initialize the Artboard tool, then drag across the empty dark workspace to spawn multiple canvases.
00:02:53

Executing Deep Asset Clones:

Highlight an active instance holding existing animations and hit Command D (Ctrl D on Windows). This executes a full copy, reproducing all raw shapes, active timeline keys, and complex State Machine networks.
00:03:12

Navigating the Active Workspace State:

Click on different canvas name tags to swap focuses; a minor structural icon flags the currently targeted Active Artboard. Alternatively, use the dropdown locator at the peak of the Hierarchy tab to quickly switch focuses.