By the end of this lesson you can
- Create main components and use instances.
- Use component properties for text, booleans and instance swaps.
- Decide what should become a component.
The idea
A component is a reusable design element. You create a main component once; every copy you place is an instance. Change the main component and every instance updates.
Overrides
Instances can override some things, such as text content or a colour, while staying linked to the main component. That lets you reuse a button with different labels.
Component properties
Properties make components easier to use by exposing the settings people actually change:
- Text property: edit a label from the properties panel.
- Boolean property: show or hide a part, such as an icon.
- Instance swap property: swap one nested component for another, such as choosing which icon to show.
- Variant property: choose between versions (covered in the next lesson).
What to make a component
Anything repeated with the same structure: buttons, inputs, list rows, cards, navigation bars, icons. Do not turn one-off layouts into components just because you can.
Why it matters in real projects
Components keep designs consistent and save huge amounts of time: fix a button once and it is fixed everywhere. They also mirror how developers build interfaces from reusable pieces, so a well-componentised file communicates structure clearly. Properties make components easy for others to use correctly.
A realistic example
A designer has 60 screens with buttons drawn separately. Rounded corners change from 4px to 8px in a rebrand, which means editing every button by hand.
They create a button component with auto layout, a text property for the label, a boolean property to show an icon, and an instance swap property to choose the icon. Replacing the old buttons with instances takes an afternoon. The next style change takes seconds.
Step by step
Build the element
Create a button with auto layout.
Make it a component
Select it and create a component (Ctrl/Cmd+Alt+K).
Add a text property
Link the label text to a text property.
Add a boolean property
Add an icon and link its visibility to a boolean.
Add an instance swap
Make the icon a component and expose a swap property.
Use instances
Place instances, change properties and then edit the main component to see updates.
Common mistakes
Mistake Detaching instances to make small changes.
Instead Add a property or variant instead, so the link stays.
Mistake Componentising everything.
Instead Make components for repeated patterns only.
Mistake Main components scattered around the file.
Instead Keep them on a dedicated components page.
Check your understanding
Choose an answer, then check it. There is an explanation either way.
Practice exercise
Exercise · about 45 min
Component with properties
Build a list row component for a contacts app.
Steps
- Build the row with avatar, name, detail text and a trailing icon.
- Add text properties for name and detail.
- Add a boolean for the trailing icon and an instance swap for which icon.
- Build a contact list from instances.
Deliverable
A component with properties and a list built from instances.
Self-assessment
Tick each item when it is true of your exercise. Be honest; this is for you.
4 items
Summary
- Components are reusable; instances stay linked.
- Properties expose what people need to change.
- Componentise repeated patterns.
- Avoid detaching instances.
Further reading
Third-party sources, chosen for reliability. They open in a new tab.
Your notes
Marking complete updates your course and roadmap progress.