Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • Contact Us
  • Home
  • Figma Design – Figma Learn
  • Build design systems
  • Components

Guide to components in Figma

Written by Figma Man

Updated at June 19th, 2025

Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • Administration – Figma Learn
    Manage files and projects Manage a team Manage your account Manage a Figma organization Manage Enterprise plan settings and permissions Billing Manage Figma in a school
  • Figma Design – Figma Learn
    Create prototypes Import and export Create designs Tour the interface Dev Mode Work together in files Build design systems Figma Draw
  • Get started – Figma Learn
    Set up your account Layers 101
  • FigJam – Figma Learn
    Import and export Run meetings Work on boards Tour the interface
  • Community – Figma Learn
    Explore the Community Creator tools and resources
  • Help – Figma Learn
    Troubleshoot Common questions Work with support
  • Work across Figma – Figma Learn
    Figma AI Work across Figma
  • Courses, tutorials, projects – Figma Learn
    Courses Projects
  • Figma Slides – Figma Learn
    Create and edit slides Present slide decks Tour the interface Import and export
  • Figma Buzz – Figma Learn
    Templates in Figma Buzz Create and edit assets in Figma Buzz Overview
  • Figma Make – Figma Learn
    Tour the interface Work with Figma Make
  • Figma Sites – Figma Learn
    Design a site Create webpages and breakpoints Make your site interactive Preview and publish a site Tour the interface
+ More

Table of Contents

Video tutorials Overview Related articles

Before you start

Who can use this feature

Users on any plan

Users with can edit access to a file can create and edit components.

Users with can view access to the original file can use components from that Library.

Video tutorials

Check out these video tutorials about components:

Overview

Components are elements you can reuse across your designs. They help to create and manage consistent designs across projects.

You can create components from any layers or objects you've designed. These could be a whole range of things like buttons, icons, layouts, and more.

There are two aspects to a component:

  1. A main component defines the properties of the component.
  2. An instance is a copy of the component you can reuse in your designs. Instances are linked to the main component and receive any updates made to the component.

You can create components to use within a single file. Or, you can use team library to share components and styles across files and projects.

Related articles

Read these articles to learn more detailed and specific information about components.

  1. Create a component
  2. Create and use variants
  3. Create and use component properties
  4. Name and organize components
  5. Create an instance of a component
  6. Swap between component instances in a file
  7. Override properties of an instance
  8. Reset instances to remove overrides
  9. Detach instances from components
  10. Make changes to components and instances

Was this article helpful?

Yes
No
Give feedback about this article

Related Articles

  • Create components to reuse in designs
  • Name and organize components
  • Explore component properties
  • Create interactive components with variants
  • Create and use variants
  • Blog
  • Best practices
  • QR code generator
  • Color wheel
  • Colors
  • Color picker
  • Color palettes
  • Color palette generator
  • Color contrast checker
  • Font Library
  • Templates
  • Developers
  • Integrations
  • Affiliate program
  • Resource library
  • Reports and insights
  • Support
  • Status
  • Legal and privacy
  • Modern slavery statement
  • Climate disclosure statement
  • COMPARE
  • Sketch
  • Adobe XD
  • Framer
  • Miro
  • COMPANY
  • Events
  • Customers
  • Careers
  • Newsroom
Expand