Related Videos

• Swap style and component libraries

  Who can use this feature

  Supported on Professional, Education, and Organization plans.

  Only people with Can edit access to the file, and at least can view access to affected libraries.

  Swap libraries lets you to quickly update all instances in a file, so they use components from another library. Use swap library to:

  • Use a different or newer version of a library
  • Switch between themed libraries, like light and dark mode
  • Swap to external or agency-provided libraries
  • Manage instances from missing or unpublished libraries

  

  How does swap library work?

  Swap library lets you replace styles and components in the current file with instances from another library. You can swap any library you have at least can view access to.

  Figma looks for any matching styles and components in the selected library. Matching is based on the style or component name only. This includes components sets and the variants within them.

  If you've deleted components, or recreated them with different names, Figma won't recognize or match these components.

  Unmatched assets

  If a matching style or component isn't found in your selected library, Figma won't swap those assets. They'll stay connected to the original library.

  You can ignore these styles and instances, delete them from the file, or manually swap them using the Instance menu. Swap between component instances →

  Swap or override styles

  The Swap default styles in instances setting allows you to control how styles are applied to instances.

  If you’re using swap libraries to swap between themes — like between a light and dark mode of a library — you can check this box. This applies any matches styles to your existing instances as overrides. If you make changes to the main components, Figma will preserve any overrides you applied via swap libraries.

  If you’re swapping between themes, but don’t check this box, Figma will still apply the styles to any local instances. When you make changes to the main components, any changes you applied to local instances via swap libraries will be overwritten.

  If you're swapping to an updated version of a library, or replacing a missing library, you'll likely be swapping both styles and components. Leave this setting unchecked to swap local instances and use the styles defined on the main components. Local instances will continue to receive updates from their main components and any changes you applied to local instances via swap libraries will be overwritten.

  Regardless of whether this box is checked, Figma will preserve any overrides — which aren’t related to swapped styles — applied to local instances. Learn more about override preservation →

  Swap between libraries

  Swap styles and components in the current file with instances from another library. This replaces local instances with matching instances from another library.

  1. Open the Assets panel in the left sidebar.
  2. Click Library to open the library modal.
  3. View a list of all libraries which have styles and components Used in this file.

  4. Select a library to view the styles and components in that library.

  5. Click Swap library at the bottom of the modal.
  6. Use the Choose library field to select a library.
     • View libraries available to the entire organization
     • Explore published libraries by team
     
  7. Figma looks for any matching styles and components based on name only.
     • If a matching style or component is found, the box next to the asset is checked and you'll see a preview in the selected library.
     • If no matching styles or components are found, the box is unchecked and you'll see a None found message.
     • If there are incorrect or undesired matches, use the checkbox to remove the asset from the swap.
     
  8. Decide whether to apply matched styles as overrides using the Swap default styles in instances ↑ setting.
     • Check to apply matched styles as overrides.
     • Leave unchecked to swap instances and use the default styles defined on the main components. Figma will preserve any supported overrides you've applied (default).
  9. Click Swap library to replace assets with assets from your selected library.

  Manage missing libraries

  Styles and instances can be disconnected from their library when the original file is unpublished, deprecated, or moved to a team you can't access.

  Use the library modal to view styles and instances in the current file which aren't connected to an active library. Then use Swap library to replace any local instances with instances from another library.

  Figma matches styles and components by name only. It's not possible to manually select a new style or component, or match to an asset with a slightly different name. Figma won't swap any styles and components without a match. You can also deselected any matched assets you don't want to swap.

  Swap missing libraries

  1. Open the Assets panel in the left sidebar.
  2. Click Library to open the library modal.
  3. In the Used in this file section, select the Missing libraries option.
  4. View a list of styles and components no longer linked to an active library. Figma groups styles and components by their origin library and shows the number of styles and components.
  5. Select a library to view the affected styles and components. View the original library's name at the top and a preview of every style and component.
  6. Use the Choose library field to select a library.
     • View libraries available to the entire organization
     • Explore published libraries by team
     
  7. Figma looks for any matching styles and components based on name only.
     • If a matching style or component is found, the box next to the asset is checked and you'll see a preview in the selected library.
     • If no matching styles or components are found, the box is unchecked and you'll see a None found message.
     • If there are incorrect or undesired matches, use the checkbox to remove the asset from the swap.
  8. Decide whether to apply match styles as overrides using the Swap default styles in instances ↑ setting.
     • Check to apply matched styles as overrides.
     • Leave unchecked to swap instances and use styles defined on the main components. Figma will preserve any supported overrides you've applied (default).
  9. Click Swap library to replace affected instances with instances from your selected library.

  Undo swap library

  There's isn't currently a way to undo a library swap using a shortcut. You have a few options for reversing your changes:

  • Swap the library back using the same method described above.
  • Restore a previous version of the library to a version before the swap.

  If you used swap library to swap between different style libraries (themes), you can reset overrides to revert to the previous library. Learn how to reset overrides →

• Move published components

  Who can use this feature

  Supported on Professional, Education, and Organization plans.

  Only people with Can edit access to both the origin file and the destination file can move components between files.

  Move published components and component sets between files, without breaking links to instances. Use this process to split up large libraries into smaller files.

  You can only use this process to move published components. You can still copy and paste main components and their instances between files. Figma will keep connections between components and instances as long as they remain in the same file.

  This is a two part process: cut and paste the components, and publish the changes. You must do both to move the component and update connected instances.

  

  Want to move styles to another file? The process for moving styles is different to moving components. Check out our Manage and share styles article for step-by-step instructions.

  How does it work?

  Every component has a unique id. Figma uses this id to maintain the connection between the main component and any instances of that component.

  When you cut and paste a component between files, Figma treats the pasted component as a new component. The new component has a unique id that's different from the original main component.

  When you publish the duplicate to a library, Figma notifies any subscribed files of the changes. It's only when you accept these updates that Figma swaps to instances from the destination library.

  Because of how this works behind the scenes, it's not possible to undo or reverse this process. The only way to undo this action ↓ is to move components back to their original file.

  Glossary

  • Published component: A component that is published to a team or organization library. Instances across files, projects, or team can receive updates from published components.
  • Local components: A component that lives in the current file and isn't published to a library. Local instances are only updated if they live within the same file as the component. This includes private components which have been intentionally removed or left out of a library.
  • Origin file: Specific to the action of moving a component. The origin file is the file where components live(d) before being moved to a new location.
  • Destination file: Specific to the action of moving a component. The destination file is the file where components are moved to, this can be a new or existing file/library.
  • Subscribed file: A Figma design or FigJam file with styles and instances that are linked to an active published library.

  Using library analytics? Figma treats moved components as new components in your organization's Library analytics. Learn more about library analytics →

  Move components or component sets

  Move published components and component sets between files and their libraries using cut and paste. Keep existing connections between components and instances, or treat them as entirely new components.

  Before you move components

  There are a few things to consider before moving components:

  • A

    Publish private components

    It's not possible to move private components between files. This is something to look out for, especially if you have components that use nested instances of a private component.

    You need to publish private components, before you can move them to another file. Once you've moved those components and published the changes to the library, you can mark them as private again.

    1. Publish private components to library →
    2. Cut and paste components into the destination file ↓
    3. Publish the destination file as a library ↓
    4. Make components private again →
  • B

    Nested instances and overrides

    If you have nested instances within the components you're moving, you need to consider where the main components live. Especially if you've applied overrides to those instances.

    If you have nested instances within the components you're moving, you need to consider where the main components live. Especially if you've swapped those nested instances or applied overrides ↓ to them.

    If the main components are within the same file, we recommend you move and publish these components together. If the main components for nested instances are currently private, you need to publish them first.

    If components use main components from another published library, Figma will keep the connection to that library.

    Figma's override preservation rules still apply when moving components. Both the hierarchy and layer names must match between the main component and any instances. 

    Figma can't preserve overrides if you make changes to the name or structure of any components before you publish them from the destination file. Figma will reset any overrides applied to local instances when you accept library updates.

    We recommend publishing components from the destination library, before you think about making changes to those components.

    Let's explore an example!

    You have a main component of a dialog window. In that component, are nested instances of a button component and an icon component. Both the icon and the button are private components.

    In an instance of the dialog component, the generic information icon was swapped with a warning icon and color overrides were applied to both the icon and primary button.

    To successfully move these component and preserve overrides:

    1. Publish icon and button components to the library. Publish private components →
    2. Cut all components from the current file — this includes the icon and button components and the dialog component that uses instances of those components.
    3. Paste those components into the destination file. See below ↓
    4. Publish the destination file as a library. See below ↓
    5. Accept updates from the library in any subscribed files. Accept library updates →
    6. Make the icon and button main components private. Create private components →
  • C

    Deleted variants

    Moving components and component sets requires you to cut and paste those components between files. Figma will only move variants that exist in the file at the time you cut and paste them.

    If you have deleted variants and anticipate restoring them in the future, you need to do this from the origin file. We recommend doing this before moving the component set, but you can do this after, as long as the origin file still exists.

    1. Restore deleted variants from any instances. This will restore those variants as main components in the origin file.
    2. Publish these restored components to the library in the origin file - you can only move published components.
    3. Move the components to the destination file using the cut and paste method below.
    4. Drag the moved component into an existing component set.

  Note: You can paste main components into a branch of a file. Figma won't update the libraries and any subscribed files until the branch is merged and the library published.

  Cut and paste components

  To move a component or component set:

  1. Open the file where the main component lives, this is the origin file.
  2. Select the main components or component sets you want to move.
  3. Use the cut shortcut to add them to your clipboard:
     • Mac: ⌘ Command - X
     • Windows: Ctrl + X
  4. Open the file and you want to move components to, this is the destination file.
  5. Make sure you have nothing selected, then paste components into the file.
     • Mac: ⌘ Command - V
     • Windows: Ctrl + V

  Note: It's possible to make changes to the components before publishing. We recommend publishing the library first, before making any structural changes to components and variants.

  Publish library changes

  When you move published components between files, Figma will prompt you to publish your changes to any affected libraries.

  You need to publish these changes to complete the move process. Figma will push updates to all subscribed files when you publish your changes.

  1. Click Publish in the notification, or use the shortcut to open the library modal:
     • Mac: ⌥ Option 3
     • Windows: Alt 3
     
  2. Figma lists any changes to the library, including every component you've moved to this file. For each component, choose to Move to this file or Publish as a copy.
     1. Select Move to this file for all moved components. This makes sure Figma keeps connections between the main components and any existing instances.
     2. Select Publish as copy to publish them as new main component. This will break the connection between the component and any instances, instances won't receive further updates.
     
  3. Add a description of your changes, Figma shows this in the file's version history.
  4. Click Publish to publish your changes to the library.

  Publish updates to a library →

  Receive updates

  Figma will push updates to any file that uses those styles and components. You'll see the usual bell notification and a prompt to receive updates from the library. Review and accept updates from libraries →

  Instances will stay linked to deleted components in the origin file until you review and accept updates. Accept updates in subscribed files to update local instances.

  • Subscribed files

    If you select or edit an instance before receiving updates, this will still point to the deleted main component in the origin file. Once you receive updates from the library, Figma will point to the main component in the destination file.

  • Local instances in the origin file

    Local instances in the origin file won't receive updates until those components are published to the library of the destination file.

    Click Update to receive updates and make sure those instances are now linked to components in their new location.

  • Local instances in destination file

    If instances in the destination file are linked to components you've moved from the original file, Figma will automatically update them to point to the newly moved local components.

  Note: If the new library isn't enabled in a subscribed file, Figma will enable the library in that file when instances receive updates.

  Reverse or undo move component

  It's not possible to undo the action of moving components using any of these methods:

  • Using the undo keyboard shortcut
  • Restoring deleted components from an instance
  • Restoring an earlier version of the file's version history

  While you can still take these actions in a file, this won't return components to their original location and you may end up with other unintended consequences.

  We recommend using the move component process outlined above ↑ to move components back to their original location.

• Guide to libraries in Figma

  Before you start

  Who can use this feature

  Publish styes is supported on any team or plan.

  Publish components is supported on Education, Professional and Organization teams and plans.

  Anyone with can edit access to a file can publish the file as a library.

  Components are elements of your designs that you want to reuse - you can think of them like building blocks. Components help keep your designs consistent and allow you to quickly apply changes across multiple files and projects. They can be basic elements made up of a few layers, like buttons or icons. Or more elaborate combinations of other elements, like toolbars and menus.

  Styles are sets of properties that can be applied to objects across your team's designs. You can use Styles to define attributes for color, text, stroke, fill, effects and layout grids.

  Styles and components live in the files they are originally created in. To find and access styles and components across your files and projects, you can publish them as a library. This allows you to enable that library in your teams, drafts, or files.

  Access components from the Assets panel in the left sidebar, and styles using the Style icon next to any relevant property.

  Build libraries

  Create the styles and main components that define your brand. Publish these styles and components as a library.

  • Styles in Figma
  • Manage and share styles
  • Apply Styles to layers and objects
  • Create styles for colors, text, effects and, layout grids
  • Create and use variants
  • Create components to reuse in designs

  Manage and share

  Continue to develop, iterate and refine your styles and components, and publish your changes to the library. Figma will keep a detailed record of your changes in the file's version history.

  • Name and organize components
  • Publish styles and components to a library
  • Make changes to main components
  • Create branches and merge changes
  • Move published components between files
  • Unpublish a library to remove it for all collaborators

  Access libraries

  Enable libraries in team files to allow members to view and use them across their files. Designers and collaborators receive updates to styles and components, making sure they're always using the latest version.

  • Enable libraries in drafts, teams, and files
  • Accept updates from a library
  • Remove a file from your libraries
  • Add and remove libraries in an organization
  • Track library and component usage

  Use styles and components

  Create local instances of components and apply styles to layers in your files. Override properties of local instances or detach them to customize further. Swap individual instances or swap entire style and component libraries.

  • Create an instance of a component
  • Apply overrides to instances
  • Swap between instances in a file
  • Detach instances from their main component
  • Swap style and component libraries
    There are a few different contexts for swapping your libraries: 
    • Manage missing libraries
    • Swap between style themes
    • Swap styles and instances in bulk
• Publish styles and components

  Before you start

  Who can use this feature

  Publish styles on any team or plan. Publish components on Professional (Education included) and Organization plans.

  Anyone with Can edit access to the file can publish styles and components to a library.

  New to components and libraries? Learn more about components → Learn more about libraries →

  When you first create styles and components, you can only access them in the current file. You can publish styles and components to a library to use them in other files or projects, or share them with others.

  Browse published styles and components in the library modal and enable libraries to access them in drafts and team or organization files.

  Caution: Component libraries are a paid feature. You can still create and use components on the free Starter plan, but you can't publish them to access them in other files.

  Publish styles from your drafts, or on any team plan. Publish components in Professional (and Education) teams or in Organizations.

  Publish styles and components

  You can choose exactly which styles and components you want to publish using the checkboxes. You can also create private components in your file throughout the publishing process.

  View, manage, and publish libraries from the Library modal. The publishing process is the same for new libraries, as well as changes to existing libraries.

  There are a few ways to access the library modal from within a file:

  • A

    Editor toolbar

    1. Click on an empty spot in the canvas to deselect.
    2. Click the next to the file name in the toolbar.
    3. Select Publish styles and components from the options.

    

  • B

    Assets panel

    1. Click on the Assets panel in the left sidebar.
    2. Click the to open the library modal.

    

  • C

    Use the keyboard shortcut

    • Mac: ⌥ Option 3
    • Windows: Alt 3

  Publish to library

  Every time you publish to your library, you'll be prompted to add a description. This allows you to communicate decisions and changes to the people who use your library.

  Figma shows descriptions when accepting updates from a library, as well as in the file's version history.

  Publish styles and components from the file where they live.

  1. Open the library modal from the file ↑
  2. In the Current file section, click the Publish button.
  3. Add a description of the library's purpose, or a summary of any decisions or changes.
  4. View a list of changes to the library. This details any styles and components added, modified, or removed.
  5. Choose which changes you want to publish:
     • Check individual components you do want to publish
     • Uncheck individual components you don't want to publish
     • Uncheck Changes to deselect all styles and components
  6. When you've finalized your styles and components, click the Publish button. Figma will show a notification to confirm your file has been successfully published.

  

  Publish updates to a library

  If you make changes to a published style or component, this will only apply those changes to instances in the current file. If you want those changes to be reflected in your library, you will also need to publish those changes to the library.

  Figma will display a blue dot on the icon in the Assets panel of the left sidebar to let you know if there are any updates that need to be published:

  1. Click either the Assets panel at the top of the left sidebar to open the library modal.
  2. Add a description of any decisions or changes. This will show in the file's version history, and the Updates tab of the Libraries modal.
  3. View a list of changes to the library. This details any styles and components added, modified, or removed.
  4. Choose which changes you want to publish:
     • Check individual components you do want to publish
     • Uncheck individual components you don't want to publish
     • Uncheck Changes to deselect all styles and components
  5. When you've finalized your styles and components, click the Publish button. Figma will show a notification to confirm your file has been successfully published.

  

  Note: If you are a member of an Organization, you can also choose to share the library with your organization. This will allow other members of the organization to find and use styles and components from this file.

  Check the box next to Allow any member of organization to access this file before you click Publish. Learn how add and remove libraries in an organization →

  Create private styles and components

  If you have styles and components that you don't want to share, or are still a work in progress, you can make them private. When you're ready to share you can publish private styles and components to make them available.

  There are a few ways to create private styles and components:

  • A

    Add a prefix to the style or component name

    To prevent Figma from publishing your styles and components, you can add a prefix or modifier to the component's name in the layers panel.

    Figma will skip over these styles and components during the publishing process and list them in the Private to this file sections of the Assets panel and library modal.

    • Add a period . in front of the component layer's name.
    • Add an underscore _ to the beginning of the component layer's name.

    

    Note: If you add a period or underscore after a style or component is published, Figma will remove it from your library the next time you publish changes to the library.

    If you want to publish these styles and components at a later date, you will need to remove the prefix and then publish the components individually.

  • B

    Remove via the assets panel

    Remove a component from a library in the Assets panel. It's not possible to remove a style from a library via the style picker.

    1. Click on the Assets tab in the left sidebar.
    2. Right-click on the component in the list.
    3. Select Remove from library from the options.
  • C

    Remove during the publishing process

    Remove styles and components from the library modal from the publish modal.

    1. Open the library modal using any of the entry points above.
    2. Right-click on the component or style and select Remove from library.

  Publish individual styles and components

  If you are missing styles and components from a published file, or want to add more styles and components, you can publish these individually.

  The fastest way to do this is via the Assets panel in the left sidebar.

  1. Click on the Assets tab in the left sidebar or use the keyboard shortcut:
     • MacOS: ⌥ Option 2
     • Windows: Alt 2
  2. Scroll down to the Private to this file section, which will list any components that exist in the file, but haven't been published.
  3. Right-click on the component and select Add to Library. If you have made the component private using the . or _ prefix, you will need to remove this.
  4. Figma will notify you that your updates are successfully published.

  

• Review and accept library updates

  Who can use this feature

  Supported on Education, Professional, and Figma Organization plans.

  Anyone with can edit access to a file can accept updates from a library to apply changes to styles and components in that file.

  New to components and libraries? Guide to style and component libraries →

  When using styles and components from a shared library, Figma will notify you of any changes made to the main components or styles. This gives you control over what updates to apply and makes sure your designs stay up-to-date.

  When updates are made and published a library, Figma will send you a notification in any files that use those styles and components. This includes changes to existing styles and components, as well as any new additions.

  You'll see the notification in the bottom-right corner of your screen and a blue dot on the Library icon in the Assets panel. Choose to Review and accept updates or Dismiss the notification.

  Note: Figma won't notify you when components or styles are removed from a library. You can continue using removed styles and instances, but you won't receive any further updates.

  Review updates

  Review any updates to choose which changes you want to apply. You can choose to accept all changes or only specific changes.

  1. Click Review from the notification or select the Library icon in the Assets panel.
  2. In the Library modal, select the Updates tab .
  3. Figma displays a list of updated styles and components with any changes with a description of any changes (if included),
  4. Click Update next to an individual item to accept that specific change.
  5. Click the Update all button in the bottom-right corner of the modal to accept all the changes. Figma will apply them to all styles and components in your current file.

  Dismiss notification

  If you're in flow state when you get the notification, you can dismiss the notification and continue to use instances in their current state. Your instances will be out of date but will still be connected to the main component

  When you're ready, you can review and accept any changes in the library modal. The notification badge will remain there until you have reviewed or accepted the changes. Figma will also prompt you to update your styles and component each time you open an affected file.

• Manage libraries in design files

  Before you start

  Who can use this feature

  Supported on any team or plan.

  Applies to Figma design files only. Manage libraries in FigJam files →

  Anyone with can edit access to a file can enable libraries for that file.

  If you have can edit access to a file, you can manage libraries that are available that file. This enables the library for everyone with can edit access to the file.

  People will still need to have view access to the library to be able to use styles and components from that library.

  Note: If you're in a Starter team, you can only access styles from shared libraries. You can copy and paste components between files to reuse them or upgrade to a Professional team.

  Manage libraries in a design file:

  1. Open the Assets panel in the left sidebar.
  2. Click the Library icon.
  3. View a list of available libraries in the library modal. Every library corresponds to a file with published styles and components.
  4. Click the library name to view the styles and components in that library.
  5. Use the toggles to enable or disable that library in the current file:
     • Library on:
     • Library off:
  6. Click to return to the canvas.

  

  Access styles and components

  When you make a library available in a design file, you can access assets from that library in the sidebars.

  • Drag components into the canvas from the Assets panel in the left sidebar. Click to select variants of a component. Add components to your designs →
  • Find and apply styles using the style pickers in the right sidebar. Apply styles in Figma design →

  

• Manage libraries for your drafts

  Before you start

  Who can use this feature

  Supported on any team or plan.

  You can only publish Styles in your drafts.

  Anyone can enable libraries for files in their drafts.

  Choose which libraries you want to access from files in your drafts.

  • On the Starter plan: you can only create and publish styles from your drafts. It's not possible to publish components from drafts.
  • On the Professional (inc. Education) or Organization plan: Access style and component libraries from any teams of which you're a member.

  Tip! If you're in an organization, you'll get access to any organization-wide libraries in your drafts. You can also choose which other organization libraries you want to access in your drafts.

  Manage libraries

  Manage which libraries are available in your drafts from your account settings. You can choose to make libraries available in Design files, FigJam files, or All files.

  1. Open your workspace in the file browser.
  2. Click your name in the top-right corner to open the account menu.
  3. Select Settings to open the account settings modal.
  4. Under the Library heading, select Enable Libraries for all files in your Drafts.
  5. View a list of available libraries in the library modal. In your drafts, you can view and enable:
     • Styles from published libraries in your drafts or Starter teams.
     • Styles and components from published libraries in any Professional and Education teams.
     • Access styles and components from organization-wide libraries.
  6. Click the library name to view the styles and components in that library.
  7. Click Off next to the library.
  8. Choose which files to make the library available in:
     • Design files
     • FigJam files
     • All files
  9. To remove a library from your files, click next to the current setting and select Off.

  

  Access libraries in files

  Design files

  When you make a library available in a design file, you can:

  • Find and apply styles using the style pickers in the right sidebar. Apply styles to layers in Figma design →
  • Drag components into the canvas from the Assets panel in the left sidebar. Add components to your designs →

  FigJam files

  Access components, along with stickers curated by Figma, from the library tool. Use stickers and components from libraries →

• Manage libraries in teams

  Before you start

  Who can use this feature

  Supported on any team or plan. Publish styles and components in Professional, Education, or Organization teams. Publish styles only in free Starter teams.

  Only team admins can manage default libraries for that team.

  Team admins can choose which libraries are available in team files. This allows you to quickly share styles and components across team files. This applies to both Figma design and FigJam files.

  Note: You need to publish styles and components to your library, before you can enable them as a default library.

  Manage team libraries

  Manage team libraries in the team's Settings. Make libraries available in Design files, FigJam files, or All files.

  1. Click on the team name in the sidebar to access the team workspace.
  2. Click Settings at the top of the page.
  3. In the Team libraries section, click the Enable libraries option.
  4. View a list of available libraries in the library modal. Every library corresponds to a file with published styles and components.
  5. Click the library name to view the styles and components in that library.
  6. Click Off next to the library to adjust.
  7. Choose which files to make the library available in:
     • Design files
     • FigJam files
     • All files
       
  8. To remove a library from your files, click next to the current setting and select Off.

  Access team libraries

  Design files

  When you make a library available in a design file, you can:

  • Find and apply styles using the style pickers in the right sidebar. Apply styles to layers in Figma design →
  • Drag components into the canvas from the Assets panel in the left sidebar. Click to select variants of a component. Add components to your designs →

  FigJam files

  Access components, along with stickers curated by Figma, from the library tool. Use stickers and components from libraries →
• Track library and component usage

  Before you start

  Who can use this feature

  Supported on the Figma Organization plan.

  Any member of an Organization can view Design System Analytics. Members can only see data for libraries they have at least can view access to.

  Share libraries in a team or across your entire Organization. Track how members of your Organization are using libraries and components with design system analytics.

  • Find out which components in a library are popular
  • Identify components that are detached often
  • See how collaborators are using variants
  • See which components in a library members aren't using
  • Compare adoption between two libraries
  • See which teams are using each library
  • Find examples of components so you can see how they're used and supplement documentation

  Note: Figma only includes libraries a member has at least can view access to in these results. You will not be able to track component usage within another member's Drafts.

  View library analytics

  Any member of an Organization can view library analytics.

  1. Open Figma in the file browser.
  2. Click on the Organization name in the sidebar.
  3. Select the Libraries tab to view an overview of all libraries in the Organization:
  4. View a summary of analytics across all libraries:
     • Total Teams: The total number of Teams in the Organization. This includes Open, Closed, and Secret Teams.
     • Teams with Libraries: How many teams in the Organization are using shared libraries.
     • Total Libraries: Total number of libraries in an Organization. This includes libraries shared across the entire Organization, or within a specific tTeam.
     • Total components: The total number of main components in an Organization's libraries.
     • Total Styles: The total number of styles in an Organization's libraries.
  5. Use the search bar to find a specific library.
  6. View a list of all libraries shared within teams or across the Organization. For each library you can view:
     • # of components: The total number of main components in that library.
     • # of Styles: The total number of styles in that library.
     • Used by: The number of teams using this library.
     • Inserts Last Week: The number of times a component from this library was inserted into a file. This is limited to the last week.
  7. Click on a library in the list to view its analytics.

  

  Tip! Figma updates Design System Analytics every hour.

  View detailed analytics for a library

  Click on a library to view more detailed analytics. Use the tabs at the top to switch between Overview and Library Analytics views.

  Before we jump in, let's cover a few terms you'll see in the analytics:

  • Component Insertions / Inserts: Any time someone adds an Instance of a component to a file. Figma records any of the following actions as insertions:
    • Copy an instance and paste it into the file
    • Duplicate a component instance within a file
    • Drag a component from the Assets panel into a file
      Nested components aren't included as insertions. Figma also ignores any components you create by duplicating an entire file.
  • Component Detaches / Detaches: Any time someone uses Detach Instance to break the connection between the instance and the main component. Learn more about detaching components →
  • Last Modified: The last time a collaborator modified the file. This includes any interaction with objects on the canvas, or leaving a comment.
  • [Last] Week: Refers to the a calendar week, not the "last 7 days". The end of the week will depend on your geographical location. e.g. North America considers Saturday the last day of the week vs Europe where Sunday is the last day of the week.

  If you're an Organization Admin, you can use the switch to toggle the library off and on for all files in the Organization. Learn more about shared libraries in an Organization →

  Overview

  1. View an overview of analytics for this library.
     • Teams using this library: The number of teams that have used Styles and components from this library.
     • Total Components: The total number of main components in that library
     • Total Styles: The total number of Styles in that library
     • Activity this week: The total number of times people have inserted components from this library in to files
  2. View all the Styles included in the library. This includes color, text, effect, and layout grid styles. Hover over the style to the view it's name.
  3. View All components in the library. Figma groups components by name, then file, page, and frame. Learn more about naming and organizing components → 

  

  Library Analytics

  Click on Library Analytics to view detailed analytics on how members are using components. Styles are not included in library analytics.

  Figma started tracking Library Analytics September 28th, 2019. Data before this date is not available. 

  1. Select the Duration you would like to view these analytics for. Choose from:
     • Last 30 Days
     • Last 60 Days
     • Last 90 Days
     • Last Year
       
  2. View a graph of Component Insertions. This shows the total insertions for this library, for the selected duration. Figma plots the graph to the end of the current week.
     • Current data is blue
     • Unavailable data is grey
     • Dashed line shows this week's current usage (incomplete)
     • Hover over the dot to view the date and total number of component insertions

     Tip! You can also compare performance between libraries. Learn how to compare analytics between libraries ↓

  3. View the teams that are using this library:
     • The top teams by # of insertions.
     • What percentage of total component insertions each team contributes
     • How many other teams are using this library
  4. Click the Download CSV link to download analytics for every team using this library.
  5. View Components Statistics for each component in the library. Both inserts and detaches are for the duration you set above.
     
     • Thumbnail of the component
     • Variants in the component set
     • Component name
     • Inserts
     • Detaches
  6. Click on the component in the list to see metrics for individual variants within that component set.

  

  Download a CSV of component usage to see which teams are using a particular library. The CSV download includes the following analytics:

  • Team ID: The unique ID Figma uses to identify the team.
  • Team Name: The name of the team as it appears in your Organization.
  • Insertions: The total number of component Insertions made in each team.
  • Insertion %: A team's percentage of total component insertions. Use this to see how teams contribute to component insertions.

  View variant and component usage

  Click on a component in the Components Analytics section to see how specific components are being used with component analytics.

  1. View information about the component set:
     • Description: The description for this component set.
     • Total: The total number of instances of any variants in this component set.
     • Used by: The number of teams that used any variants in this component set.
     • Used in: The number of files that have instances of this component set in them.
  2. View a list of variants included in that component set. You'll see some analytics for:
     • Instances (Total): How many instances of that variant exist.
     • Detaches (Last 30 Days): How many times someone has detached that variant from the component set in the last 30 days.
  3.  Click on a variant in the list to view analytics for that specific variant.

  

  Figma will show those same statistics, for that specific variant. You can also view a list of files that variant was used in for that reporting period. You'll only see files you have access to. 

  

  Note: Figma will only show files you have at least can view access to. This includes files from your Drafts, teams that you are a member of, and open teams.

  Compare libraries

  You can compare analytics between two libraries, which allows you to:

  • Track adoption of a new library (e.g. legacy vs new design system)
  • Compare how libraries are used across different operating systems
  • Measure work between products or brands

  From the Library tab of the Organization.

  1. Select one of the libraries you want to compare.
  2. Open the Library Analytics tab.
  3. Click the field next to Compare insertions to and select the second library from the list.
  4. Figma will plot the graph for both lLibraries
     • Data for the original library is in blue
     • Data for the second library is in black
     • Unavailable data is grey
     • Dashed line shows this week's current usage (incomplete)
  5. Hover over a dot to view the date and total number of component insertions.

  

• Remove your access to a library

  Before you start

  Who can use this feature

  Support on any team or plan

  Anyone can leave a file they have a role on.

  When you disable the library, Figma will remove those components from the Assets panel and any styles from the style picker. As you still have access to the library, styles and components and styles may still show up in your search results.

  If you don't want those styles and components to show up in search results, you'll need to leave the file where the main components and styles live.

  Looking to unpublish a file or remove styles and components from your library? Check out our Unpublish a library and Remove styles and components articles.

  Open the library file

  Open a main component in the file it lives in from any instance. You can do this from a few different places.

  • 1

    Canvas

    1. Select the Component in the Canvas.
    2. Find the Instance section of the Properties Panel.
    3. Click Go to Main Component link.
    4. Figma will open the file where the Component lives.
  • 2

    Assets panel

    1. Right-click on the component in the Assets Panel.
    2. Select Go to main component.
    3. Figma will open the file where the component lives.
  • 3

    Right sidebar

    1. Select the component
    2. In the right sidebar, click the icon next to the instance name.
    3. Figma will open the file where the component lives.

  Tip! If you haven't used the component in your file, you can temporarily add the component to your file, then use any of the Go to Main Component approaches above.

  Leave the file

  1. Open the file where the component lives.
  2. Click the Share button to open the file share modal.
  3. Find your name in the list of collaborators.
  4. Click on your current access level and select Leave from the options.