How to Use Components in Figma: A Designer’s Guide

Copying and pasting the same button across 50 screens is a waste of time. Learning how to use components in Figma eliminates that repetition entirely.

Components are reusable design elements that update globally. Change the main component once, and every instance across your file updates instantly.

This matters whether you’re building a quick prototype or a full design system for your team.

By the end of this guide, you’ll know how to create main components, manage instances, configure variants, and publish shared team libraries.

Ten steps. About 15 minutes. No prior component experience required.

How to Use Components in Figma

Components in Figma are reusable design elements that update globally when you edit the main component.

Designers need components when building design systems, creating consistent UI patterns, or managing large projects with repeated elements like buttons, cards, and navigation bars.

This guide covers 10 steps requiring 15-20 minutes and basic Figma familiarity.

Prerequisites

Before creating your first main component, confirm you have these ready:

• Figma version: Desktop app or browser (current version, December 2024)
• Account type: Free, Professional, or Organization plan
• Skill level: Basic layer and frame operations
• Time needed: 15-20 minutes for all steps

You should know how to make a frame in Figma before starting.

Understanding how to ungroup in Figma helps when working with nested structures.

Step One: How Do You Create a Main Component in Figma?

Select any frame, group, or layer you want to reuse, then convert it to a main component using the right-click menu or keyboard shortcut.

The element displays a purple diamond icon in the Layers panel after conversion.

Action Steps

Select your element on the canvas.

Right-click > Create Component. Or press Ctrl+Alt+K (Windows) / Cmd+Option+K (Mac).

The border changes to purple, indicating master component status.

Purpose

Main components act as the single source of truth for your design system in Figma.

Every edit here propagates to all instances across your file.

Step Two: Where Do You Access Components in the Assets Panel?

The Assets panel stores all components from your current file and any enabled team libraries, organized alphabetically or by page.

Access it from the left sidebar to drag components onto your canvas.

Action Steps

Click the Assets tab in the left sidebar (book icon).

Expand “Local components” to see components from the current file.

Use the search field to find specific components by name.

Purpose

The Assets panel provides quick access to your component library without scrolling through pages.

Search functionality becomes critical when managing hundreds of reusable elements.

Step Three: How Do You Create Component Instances from the Assets Panel?

Drag any component from the Assets panel onto your canvas to create an instance, a linked copy that inherits all properties from the main component.

Instances display a hollow diamond icon instead of the filled purple diamond.

Action Steps

Open the Assets panel (left sidebar).

Click and drag the component onto your canvas. Or select a component, then press Enter to place it.

The instance appears with a hollow diamond in the Layers panel.

Purpose

Instances maintain connection to main components while allowing local overrides.

This lets you make buttons in Figma once and reuse them everywhere with different labels.

Step Four: How Do You Edit a Main Component to Update All Instances?

Double-click any instance to enter the main component, or locate the original in your Layers panel and edit directly.

Changes propagate instantly to every linked instance in your file.

Action Steps

Double-click an instance to jump to its main component.

Make your edits: change colors, adjust spacing, modify text styles.

Click outside the component to exit editing mode.

All instances update immediately.

Purpose

Global editing saves hours when updating user interface patterns across large projects.

One change to a navigation component updates every screen in your prototype.

Step Five: How Do You Override Properties on a Component Instance?

Instances accept local changes called overrides without breaking the link to the main component.

Common overrides include text content, fill colors, and visibility of nested layers.

Action Steps

Select an instance on your canvas.

In the Design panel (right sidebar), find the component section.

Edit text by double-clicking directly on the instance.

Change fills, strokes, or effects using standard property controls.

Purpose

Overrides let you customize individual instances while keeping structural consistency.

A card component can display different images and headlines across your mockup without creating separate components for each variation.

This approach supports better user experience design workflows.

Step Six: How Do You Reset Overrides on an Instance?

Reset overrides to restore an instance back to its original main component state, removing all local changes you’ve made.

Action Steps

Select the instance with overrides.

Right-click > Reset all overrides. Or use the reset icon in the Design panel’s component section.

The instance reverts to match the main component exactly.

Purpose

Quick reset saves time when experiments go wrong or when design direction changes mid-project.

Step Seven: How Do You Detach an Instance from Its Main Component?

Detaching breaks the link between an instance and its main component, converting the instance into independent layers you can edit freely.

Action Steps

Select the instance you want to detach.

Right-click > Detach instance. Or press Ctrl+Alt+B (Windows) / Cmd+Option+B (Mac).

The diamond icon disappears; layers become editable groups.

Purpose

Detach when you need a one-off variation that shouldn’t sync with the original.

Learn more about how to remove a component in Figma for additional cleanup methods.

Step Eight: How Do You Organize Components with Variants?

Variants combine related components into a single component set with switchable properties like size, state, or style.

Action Steps

Select two or more similar components.

Right-click > Combine as variants. Or click “Combine as variants” in the Design panel.

Configure variant properties in the right sidebar: name each property (Size, State, Type) and define values (Small/Medium/Large, Default/Hover/Active).

Purpose

Variants keep your Assets panel clean while offering flexible design options.

One button component with variants replaces dozens of separate components. See how to create variants in Figma for advanced techniques.

Step Nine: How Do You Use Component Properties for Flexible Design?

Component properties let users toggle visibility, swap nested instances, and edit text directly from the properties panel without entering the component.

Action Steps

Boolean properties: Right-click a layer > Add Boolean property. Name it (Show Icon, Has Badge).

Instance swap: Select a nested component > Add Instance swap property. Define which components can be swapped.

Text properties: Select text layer > Add Text property. Users can edit without double-clicking.

Purpose

Properties speed up design iteration and make components accessible to teammates unfamiliar with your layer structure.

Combined with auto layout in Figma, properties create truly flexible component systems.

Step Ten: How Do You Publish Components to a Team Library?

Publishing shares your components with team members across different Figma files, creating a centralized shared team library.

Action Steps

Open the Assets panel > Click the book icon > Publish library.

Add descriptions for changed components in the publish dialog.

Click “Publish” to make components available team-wide.

Team members receive update notifications in their files.

Purpose

Published libraries maintain wireframe to final design consistency across your entire organization.

Verification

Confirm your components work correctly:

• Edit a main component; check that all instances update
• Apply overrides to an instance; verify main component stays unchanged
• Switch variant properties; confirm smooth transitions
• Search components in Assets panel; verify naming and organization
• Ask a teammate to access your published library

Troubleshooting

Instance Not Updating When Main Component Changes

Issue: Edits to main component don’t appear on instances.

Solution: Check if the instance was detached. Look for the hollow diamond icon. If missing, the instance is no longer linked. You’ll need to swap it with a fresh instance from the Assets panel.

Cannot Find Component in Assets Panel

Issue: Component doesn’t appear in local components or search.

Solution: Verify the component exists on a page in your current file. Check if it’s nested inside another component (nested components don’t appear separately). Use component editing in Figma to locate the parent.

Overrides Not Applying Correctly

Issue: Text or color changes revert or don’t stick.

Solution: Ensure you’re editing the instance, not the main component. Check layer naming; overrides rely on matching layer names between main and instance. Renamed layers in the main component break override connections.

Variants Not Switching Properly

Issue: Variant dropdown shows wrong options or doesn’t respond.

Solution: Verify consistent layer structure across all variants. Each variant needs identical layer hierarchy. Check property naming for typos or extra spaces.

Related Processes

Continue building your Figma skills:

• How to make components in Figma from scratch
• How to prototype in Figma with interactive components
• How to make Figma interactive for presentations
• How to link pages in Figma for navigation flows
• How to design a website in Figma using your component library

Components work well alongside grids in Figma for consistent layouts.

For smooth animations between component states, explore how to animate in Figma.

FAQ on How To Use Components In Figma

What Is the Difference Between a Component and an Instance in Figma?

A main component is the original element with a purple diamond icon. An instance is a linked copy with a hollow diamond. Editing the main component updates all instances automatically, while instance overrides stay local.

Can I Use Components Across Multiple Figma Files?

Yes. Publish your components to a team library through the Assets panel. Team members can then enable that library in any file and drag components directly onto their canvas.

How Do I Find a Component’s Main Component from an Instance?

Select any instance and right-click > Go to main component. Figma jumps directly to the original, even if it’s on a different page. You can also click the component name in the Design panel.

What Happens When I Detach an Instance?

Detaching breaks the link permanently. The instance becomes regular layers you can edit freely. It no longer receives updates from the main component. Use this for one-off variations that need unique modifications.

How Do Variants Differ from Separate Components?

Variants group related components into one component set with switchable properties. Instead of 12 separate button components, you get one button with Size and State dropdowns. Cleaner Assets panel, faster workflow.

Can I Nest Components Inside Other Components?

Yes. Nested components maintain their own link to their main component. This lets you build complex UI elements like cards containing button components, icon components, and text layers that all update independently.

Why Are My Instance Overrides Not Working?

Overrides depend on matching layer names. If you rename a layer in the main component, existing overrides on instances break. Keep layer naming consistent, or reset overrides and reapply them after structural changes.

How Do I Swap One Component for Another?

Select an instance, then use the instance swap dropdown in the Design panel. You can swap between any components with similar structure. Instance swap properties let you define which components are available for swapping.

What Are Component Properties Used For?

Component properties add controls like boolean toggles, text fields, and instance swap options. Users customize instances from the properties panel without digging into layers. Speeds up design work and reduces errors.

How Do I Update a Published Library After Making Changes?

Open the Assets panel and click the publish icon. Review your changes, add descriptions for teammates, then publish. Files using your library receive update notifications. Users accept or dismiss updates individually.

Conclusion

You now know how to use components in Figma to build scalable, consistent designs. The workflow is straightforward once you understand the relationship between main components and instances.

Start with simple elements like buttons and icons. Then move to complex component sets with variants and properties.

Publishing to a team library transforms individual components into a full design system your entire organization can access.

The real power shows up in maintenance. One edit propagates everywhere. No more hunting through 50 frames to update a single color.

Components save hours on large projects. They enforce visual consistency across screens. And they make responsive design and collaborative design workflows actually manageable.

Build your first component today. Your future self will thank you.