Components and instances
A component origin is the reusable source. An instance is a linked use of that component in a screen. Edit the origin to change the shared design; edit an instance to customize that occurrence.
For example, a Button origin defines the layout, fill, and typography. Its instances can say Save, Continue, or Cancel while sharing that design.
Why Use Components
Use components for elements you repeat, such as buttons, navigation items, and cards. Bind their colors and dimensions to variables so the system can change consistently. Put components used across documents in a design library.
Creating Components
- Select the frame, shape, or text element you want to reuse
- Press
Cmd/Ctrl + Option/Alt + Kor click Create Component at the top of the properties panel - Give the component a name you can find in Components
The origin has a magenta bounding box when selected. A component can contain instances of other components, so a Card can reuse a Button rather than define another one.
Using Components
Copy the component origin on the canvas to create an instance, or open Components in the left sidebar, search by name, then click or drag a component onto the canvas. Import a library first to use its components.
An instance has a violet bounding box when selected. For a component in the same file, click Go to component in the properties panel to find its origin. For an imported component, open its source from Libraries.
Overrides and detaching
Edit an instance’s fill, size, or text to override that property for that instance. Other properties continue to follow the origin. Changing a button label to Save preserves that text when you change the origin’s label, while a font-size change at the origin still reaches the instance.
| What you want to change | Where to edit |
|---|---|
| Every use of the component | The component origin |
| One button’s label or one card’s title | That instance |
| A shared color, spacing value, or font | The variable used by the component |
| Content inside a card, such as its actions | A slot in the instance |
Layers inherited from an origin cannot be freely reparented inside an instance. Use slots when the component needs a customizable region.
Select an instance and click Detach instance to disconnect it from its origin. Detaching keeps nested instances and variable references linked to their sources. To start again with the origin’s current values, insert a fresh instance from Components.
Try origins, overrides, and nested components together in Build a small design system.