Apply components in multiple frames/projects for consistent, scalable design.
1. Why Reusing Components Matters
Reusing components ensures:
- Consistency: Same buttons, cards, and elements across pages/projects
- Efficiency: Update the master component once all instances update automatically
- Scalability: Large UI systems stay organized and maintainable
- Faster Prototyping: Drag-and-drop components without rebuilding
Tip: Think of components like Lego blocks reusable pieces that keep your design system strong.
2. Using Components Across Pages
Step-by-step:
- Create or select a master component in one page.
- Open another page in the same Figma file.
- Drag the component from the Assets panel it becomes an instance.
- Make overrides (text, icons, colors) if necessary the master stays intact.
Tip: Organize your Assets panel by page or category for faster access.
3. Sharing Components Across Projects
- Publish components to a Team Library:
- Select the components → Assets → Publish Library → give a descriptive name.
- Enable the library in other Figma files:
- Assets → Team Library → Enable
- Drag components from the library → maintain consistency across multiple projects.
Any updates to the master component in the library automatically push changes to all files using it.
4. Practical Examples
Example 1: Buttons
- Use a master button component in header, footer, and landing page sections
- Update the master all pages update instantly
Example 2: Card Components
- Product cards reused across catalog, featured section, and promotional pages
- Consistent spacing, typography, and color maintained
Example 3: Navigation & Footer
- Navbar component reused in multiple pages of a website
- Update menu items or logo in one place → all instances reflect changes
Nested Auto Layout + Variants + Reusable Components = fully scalable, maintainable UI system.