Components are reusable elements; instances inherit the master and can expose properties (Boolean, Text, Instance Swap, Variant). Variant changes can animate via FLIP.
Where: Right sidebar → Design System → Components tab — Create a component from an element, or insert an instance
Key ideas
- Master & instances: Edit the master to update every instance; instances bind by component id + prop values.
- Component properties: Boolean, Text, Instance Swap, and Variant props (carried over from Figma imports too).
- Variant animation: A variant-animate interaction tweens the subtree (FLIP) when a prop changes.
- Copy/paste keeps component semantics: A copied master pastes as an instance; a copied instance stays linked. Cutting a master remains unavailable to protect its instances.
- Component library surface: The Design System Components tab shows one base-variant tile per master, and designer-created masters can be lifted to the Free Canvas while leaving an instance in place.
Steps
- Select an element and create a component.
- Define properties (text/boolean/variant) on the master.
- Insert instances and set their prop values.
- Edit the master to propagate changes to all instances.
Authoring flow
- Build and name a stable master component.
- Expose only meaningful Text, Boolean, Instance Swap, and Variant properties.
- Insert instances from the Design System panel.
- Set per-instance prop values/overrides.
- Edit the master for shared structural/style updates.
Master versus override
Use the master for changes every instance should inherit. Use exposed properties/instance overrides for intentional differences. Detaching or independently editing repeated copies sacrifices propagation.
Variant motion
Variant Animate can FLIP between compatible component subtrees. Keep stable child identity/structure where possible and test focus, layout, and content changes through every variant.
Variant editing safeguards
- Variant hide/delete is scoped to the active cell.
- Deleting a selected child no longer removes the whole variant option.
- Component-view chrome is fixed to the viewport so exit/variant/state controls do not pan or zoom off-screen.
Tips
- Design the default instance before multiplying variants.
- Use descriptive variant dimension/value names that read clearly in the instance inspector.
Troubleshooting
A master edit does not appear in one instance
Check whether that instance has a local override or was detached/copied instead of inserted as a linked instance.
Variant animation jumps
Compare child structure, layout, visibility, and identity across variants; large structural differences cannot interpolate cleanly.