Components & Variants — Roadmap Step & Resources
Creating reusable components with variant properties for different states and sizes
- Level: intermediate
- Estimated time: 2 days
- Roadmap: UI Design
Before this step
Interview questions
- Why are component variants better than duplicating a component for each state?
Study resources
- Components and instances (Article) — Figma's own official documentation on components, instances and variants.
- Figma Components and Variants Explained (Video) — A practical tutorial building a reusable button component with variants.
Part of
- Design Tools: Figma — section
- UI Design roadmap — the full learning path