Every real-time animation, vector design system, and interactive user interface built within Rive begins on the artboard. As the foundational canvas of your workspace, the artboard acts as the top-level container that defines structural boundaries, governs layer hierarchies, holds timeline animations, and houses interactive state machine logic. Understanding how to manage, configure, duplicate, and structure artboards is essential for scaling vector workflows and creating production-ready assets for web, mobile, and game engine runtimes.
Canvas Initialization and Selection Workflows
When launching a new project file, the editor prompts you to establish your initial artboard dimensions. Designers can choose from a wide variety of standardized device presets tailored for mobile UI, desktop displays, and social media formats, or start with a custom pixel boundary such as a standard 500×500 square canvas.
Once established, navigating and selecting artboards within the workspace can be handled through multiple flexible workflows:
- Direct Canvas Selection: Click directly on the artboard canvas or click its visible header title floating above the top-left boundary corner.
- Background Deselection: Click on the empty neutral background area surrounding the artboard workspace to instantly clear active selections.
- Hierarchy Selection: Locate the artboard at the root level of the left-hand Hierarchy panel. Because the artboard acts as the ultimate parent container for all vector paths, groups, bone rigs, and shapes created within it, it remains fixed at the top of the layer structure.
- Active Indicator Icon: When working across multi-artboard files, the active artboard features a distinct visual indicator icon next to its name, signifying which canvas is currently targeted for design edits and animation timeline previews.
Managing Properties in the Inspector Panel
Selecting an artboard updates the right-hand Inspector panel, revealing critical properties that dictate canvas geometry, responsive layout behavior, and visual background styling.
Core artboard properties include:
- Transform Coordinates and Dimensions: Precisely adjust X and Y spatial positioning across the editor grid, along with absolute width and height dimensions in pixels.
- Responsive Layout Systems: Access advanced responsive layout controls that govern how nested components, vector shapes, and text elements reflow when artboard bounds resize across different screen aspect ratios.
- Visual Background Fills: Customize canvas backdrops using solid color fills, smooth linear gradients, or radial gradients. You can temporarily hide background visibility using the eye icon toggle or remove the fill entirely using the minus symbol to create fully transparent assets.
- Content Clipping Boundaries: Toggle the clip artwork setting to determine whether vector shapes extending beyond the artboard boundaries remain visible in the editor preview. Regardless of clipping display toggles during design, runtime exports exclusively render graphics located within the strict spatial bounds of the artboard.
Multi-Artboard Architectures and Quick Shortcuts
Scaling complex motion design projects often requires working with multiple artboards inside a single workspace file. This modular structure allows animators to build reusable UI components, set up side-by-side design iterations, or manage separate interactive screens simultaneously.
Keyboard shortcuts and artboard management routines streamline these multi-canvas workflows:
- Manual Creation Shortcut: Press A on your keyboard to activate the Artboard tool, allowing you to click and drag out custom canvas boundaries anywhere on the workspace. Repeating the shortcut lets you generate unlimited artboards side-by-side.
- Instant Canvas Duplication: Select an existing artboard and press Command D (on macOS) or Control D (on Windows) to create an exact duplicate. Duplicating an artboard copies all enclosed artwork layers, vector paths, bone hierarchies, timeline keyframe animations, and state machine configurations in a single step.
- Renaming Artboard Instances: Double-click the artboard title directly inside the canvas viewport or within the Hierarchy tree to assign clear descriptive labels, making asset management clean and organized.
- Deleting Canvas Instances: Select an unwanted artboard container and press Delete or Backspace to permanently remove the canvas and its nested hierarchy from the project.
Optimizing Artboards for State Machines and Runtime Export
Understanding the structural role of artboards ensures a smooth transition from static vector illustration to interactive, runtime-ready motion graphics. In Rive’s architecture, artboards serve as self-contained interactive environments. State machines, property inputs, listeners, and timeline keyframes are bound directly to their parent artboard.
When preparing assets for production implementation:
- Component Modularization: Individual artboards can be embedded inside other artboards as nested components, allowing designers to build complex, modular interfaces with independent animation timelines.
- Efficient File Exports: Because only elements contained inside active artboard boundaries render at runtime, keeping vector paths trimmed and organized prevents unnecessary performance overhead in mobile and web applications.
- Multi-State UI Workflows: Utilizing multiple artboards within a single workspace file allows design teams to maintain consistent visual assets while testing varied interaction states, layout adjustments, and state machine logic side-by-side.
Mastering artboard management gives designers full structural control over their interactive assets, ensuring every vector element remains well-organized, performant, and perfectly formatted for real-time applications. Youtube
