How to create reusable components in Figma
Introduction
Copying and pasting the same button or icon repeatedly leads to maintenance nightmares. Components solve this by linking instances to a main master component.
In this guide, you will learn how to turn any selection into a component and use its instances throughout your design.
Prerequisites
- •A finished design element (e.g., a button)
- •Figma file with edit access
Guide Steps
Select the object
Click on the frame, group, or layer you want to reuse. Ensure it is named clearly (e.g., 'Primary Button') in the layers panel.
Create the component
Click the diamond icon ('Create component') in the top toolbar, or press Option + Command + K (Mac) / Ctrl + Alt + K (Windows). The selection outline will turn purple.
Use instances
Go to the Assets panel (left sidebar) and drag your new component onto the canvas. Alternatively, duplicate the main component (Alt/Option + Drag). These copies are instances.
Update the design
Make a change to the main component (the one with the solid diamond icons). Observe how all instances on the canvas update instantly to match.
Common Mistakes to Avoid
- ×Creating components from raw shapes instead of frames, making resizing difficult.
- ×Forgetting to detach an instance if you need a completely unique version.
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.