UI/UX · Quick Reference

Lesson 8 — Components Cheat Sheet

UI/UX

In one line: A main component defines a reusable element; instances and variants let one component handle many states.

Core Concepts

1Main component. The source, marked with a purple diamond icon.

2Instance. A copy of the main component, linked and updatable.

3Variant. One component with multiple states (default/hover/disabled).

4Component properties. Configurable text/boolean/instance-swap options per instance.

Update the main component once

Every instance across every screen updates automatically