What are components in Figma and how do they work?
Introduction
In traditional graphic design, if you wanted 50 identical icons, you copied the vector 50 times. In UI design, that's dangerous. If you need to change the color later, you have to edit all 50.
Components introduce a parent-child relationship. The 'Main Component' is the source of truth. The copies are 'Instances'. Instances mirror the Main Component but allow for specific overrides, giving you both consistency and flexibility.
Guide Steps
Main Component vs. Instance
The Main Component (identified by a filled quadruple diamond icon) defines the default look. Instances (hollow diamond icon) are clones. You can't delete layers inside an instance; you can only hide them. You can't move layers inside an instance; their position is locked to the Main Component.
The Power of Overrides
Instances aren't identical clones; they are smart clones. You can change text, color, effects, and swap images in an instance without breaking its link to the Main Component. This allows one 'Card' component to display different content on every usage while keeping the same padding and layout.
Component Sets (Variants)
When you have multiple versions of a component (e.g., Button/Primary, Button/Secondary), you can group them into a Component Set. This tells Figma that these are related, allowing you to switch between them using sidebar toggles instead of searching for a different component in the assets panel.
Pro-Level Design Tips & Workflows
💡 Slashes Nomenclature: Name your master assets with slashes (e.g., button/primary/hover) to allow Figma to automatically group them as states of a single Variant set.
💡 Inherit Properties: Minimize structural variations. Instead of adding new instances, toggles should be defined via Boolean property fields on the original parent layout.
Practical UI Example & Screenshot Checklist
Here is a real-world scenario where you will apply these exact layout rules:
Build a container frame with a logo and menu links. Set Auto Layout horizontal direction, padding margins to 24px, and select 'Space between' alignment to keep elements pinned to the margins.
- ✓ Inspect the right-hand design variables sidebar.
- ✓ Verify child width dropdown is set to
Fill container. - ✓ Drag the parent frame width to verify elements adapt automatically.
Glossary of Core Design Terms
A sizing constraint instructing the container frame boundaries to fit around child layers automatically.
A responsive instruction that stretches child layers to consume the remaining horizontal space of its parent flex frame.
The primary component template source. Updates to the master component propagate across all visual instances.
Figma Templates & Resources
Figma Starter Playground (.fig)
Includes pre-built design grids, responsive card examples, and button variant frames.