Main components and instances
Craft guidanceShortcut editorial, reviewed 7 Oct 2026
Applies to All viewports
A main component defines the element. Instances are linked copies that receive its updates and can be overridden in the ways you allow.
Why?
The link is the value. A detached instance is a copy that will never be updated again.
When to use it
- The element appears more than twice.
- It needs to stay consistent as it changes.
- Developers have, or will have, a matching coded component.
When not to
- A one-off layout.
- Something still being explored.
Common mistakes (3)
- Detaching to make a small change, instead of adding a property.
- Components made too early, then fought against.
- Several components that are really one with different properties.
Senior designer note“If people keep detaching a component, it is missing a property they need.”
Official guidanceFigma
- Figma
A main component defines the properties of the component.
Figma Help, Guide to components(opens in a new tab)Tool documentation
- Figma
An instance is a copy you can reuse. Instances are linked to the main component and receive any updates.
Figma Help, Guide to components(opens in a new tab)Tool documentation