Components

13m 45sPublished Sep 26, 2025

SummaryVersion Notes (Draft)

This course focuses on resolving the maintenance redundancies caused by replicating identical elements in complex UI layouts like menus, leaderboards, or scoreboards. By converting an artboard into a Component and utilizing View Models and Instances, it achieves the goal of "design once, reuse dynamically." The key business benefit is that designers only need to maintain a single base artboard, while unique variations (avatars, names, scores) can be driven independently via data binding in real time within the editor or at runtime, significantly streamlining the design-to-development handoff.

Strong Type Binding Constraints: Data binding in Rive adheres to strict type matching. A Number type property cannot directly drive a Text Run; a type Converter like convert to string must be bridged in between to handle the data transformation.
View Models vs. Instances Architecture: $$\text{View Model} \rightarrow \text{Multiple Data Instances} \rightarrow \text{Parent VM Property Assignment}$$

Binding the main artboard directly to the base View Model causes all components to clone identical values. The decoupled solution is to define the data structure in the base View Model, derive multiple independent data Instances from it, and hold those instances as separate properties inside the top-level artboard's View Model.

Responsive Layout Best Practices: When using an artboard as a component inside other files or artboards, it is highly recommended to set its Fitting property to Hug for both width and height. This ensures that when the layout resizes due to text expansions or changing paddings, the parent component container responds fluently (Reflow) without clipping content.
Workflow Shortcuts:
- Shift + L: Instantly wraps selected elements into an automatic Layout container (Row/Column).
- N: Activates the Component Tool to quickly call up the dropdown list for inserting components into the active artboard.

📌 Key Points

Use components together with data binding to build more reusable interactive units.

📝 Notes

Markdown

0 chars

Step by Step

00:04

Core Concept Demonstration:

The instructor showcases a dynamic scoreboard generated by duplicating a single component four times. In Play Mode, each component holds an independent avatar, name, and score, demonstrating real-time data adjustments via the data panel.
01:03

Asset Import and Base Artboard Creation:

Drag a PSD asset containing multi-layered avatars into Rive. Create a new artboard, rename it to scorecard, remove its default background fill, and prepare to build the base card.
01:35

Building Base UI Elements:

Drag an avatar image onto the artboard and scale it down. Use shortcut T to create a text layer, name it name, then duplicate and move it over to create score. Change their font color to black.
02:05

Constructing the Parent Layout:

Select the avatar and both text layers, then press Shift + L to place them into a row layout named row parent.
02:18

Adjusting Layout Alignment and Adaptability:

Disable Absolute Positioning for the parent layout. Change its Fitting property from Hug to Fill so it scales with the scorecard artboard. Set child alignment to Center and initialize the Horizontal Gap to 0.
03:10

Nesting Text Layouts for Spacing:

Select the name and score text layers, press Shift + L again to place them in a nested row layout named text row. Set it to Fill width and Fill height, then adjust the gap to separate the name and score text.
03:48

Card Polishing and Fluid Micro-Adjustments:

Select the parent layout, increase the horizontal gap to push the text row away from the image. Add a background fill and adjust the Corner Radius. Change the height fitting from Fill back to Hug, and add top/bottom padding to keep the vertical spacing locked.
04:52

Optimizing Artboard Bound Properties:

Select the outer scorecard artboard and set its height fitting to Hug, ensuring the artboard boundaries automatically resize based on the inner layout's content.
05:12

Creating the Base View Model:

Select the artboard, click to create a new View Model in the inspector, and name it scorecard. In the Data Panel, add three properties: an Image property PFP, a String property name, and a Number property score, setting initial values for each.
06:21

Binding Base Layer Data:

Right-click the image layer and the name text run branch in the hierarchy panel, select Data Bind, and map them to their corresponding PFP and name properties.
07:03

Configuring a Number-to-String Converter:

When binding the score text, create a convert to string converter in the data panel to resolve the type mismatch. Check "Round Decimals" and "Remove Trailing Zeros," then add this converter to the score's Data Bind chain.
08:31

Converting to Component and Instantiation:

Press A to create a new main artboard. Select the original scorecard artboard and change its type to Component in the inspector. Tap N on the main artboard to activate the component tool, then click to instantiate four copies of the component.
10:04

Generating Data Instances:

Select the scorecard view model in the data panel, navigate to the Instances tab, and generate three additional instances for a total of four (named Instance 1 to 4). Configure unique avatars, names, and scores for each instance.
11:23

Building the Top-Level View Model:

Create a new View Model named scoreboard for the main artboard. Add four properties to it, set their data type to the scorecard view model type, and map each property to Instance 1 through 4 respectively.
12:30

Component Mapping and Play Mode Testing:

Select the four nested components in the hierarchy panel one by one, and bind them to the corresponding 1, 2, 3, and 4 properties under the main artboard's view model. Hit Play to see all four components display unique datasets and allow real-time changes.
13:20

Runtime Extensions and Next Lesson Preview:

The instructor summarizes the workflow of mapping component instances to data properties, emphasizing that these values can be controlled programmatically via code, and previews the tutorial on Lists for adding or removing instances dynamically at runtime.