Overview

The Team Library allows you to share Styles and Components across files and teams, as well as keep Styles and instances of Components synchronized. This ensures that when changes are made to them, other files can easily be updated to reflect those changes.

It's important to remember that Styles and Components live in the file in which they were created. Publishing Styles and Components adds a copy to the Team Library, making it accessible in other files. Whenever you use a Component from the Team Library in another file, you’re creating an Instance of that Component. 

Instances are copies which are connected to their Master Components so any changes to the Master can be synced to all Instances. You can learn more about Instances in our Components Article.

Components Tab

In the editor, you’ll see 2 tabs in the left sidebar: the Layers tab and the Components tab. You can quickly navigate between these 2 tabs using the Option + 1 (Layers) and Option + 2 (Components) keyboard shortcuts.

The Components Tab will show you:

  • Local Components created in the file
  • Shared Components used in the file
  • Components from enabled libraries

You can drag a Component onto the canvas to insert it. Holding the Option key (or Alt for Windows) will allow you to drag a Component over an instance to swap it.

Components that are arranged into Groups and Frames will be collapsed into different sections, making it easier to skim and browse through large libraries.

Searching in this tab will first show you results from the Components mentioned above. However,  you can also choose to see results from the rest of the Team Library, which will also be displayed in the Components tab.

Team Library

To access the Team Library, click on the book icon,  located in the top-right corner of the editor. 

The Team Library modal will appear, displaying all the published files across all your teams. The current file always appears at the top of this list. You can publish Styles and Components to the library from this modal.

The toggles can be used to enable or disable libraries. These settings will save to the current file, and all users with access to that file will see the same libraries.

You can search for Styles and Components across all libraries in Team Library modal. You can also drill down into a library file and drag Components directly onto the canvas.

The Instance Swapping Dropdown Menu

When you have a Component Instance selected, you’ll be able to use a dropdown menu in the Properties Panel to swap with any other Component which appears in your Components tab.

Publishing Components and Styles to the Team Library

Once you’ve created a Style or Component in the file, you’ll be able to publish it to the Team Library. You can do this by selecting Publish Styles & Components from the filename dropdown menu or by clicking the Publish button in the Team Library modal.

This will bring up the Publishing Modal. From here, you can submit a description of the what you’re publishing. After publishing, the description will appear in the file’s Version History.

You can also see a summary of all Styles and Components included in the current library file. Expand the section  to see a more detailed list  of what changed.

From the list of changes, you can also right-click on Styles and Components individually and select Remove from library. This will exclude them from being published, or remove already published ones from the library.

Once you’ve published, you’ll see a toast notification at the bottom of the page:

Whenever you make changes to already published Styles or Components, or whenever you create additional Styles or Components, a blue dot will appear on the Team Library button to indicate there are changes available for you to publish.

You can then open the Publishing Modal to review the changes before publishing them to the Team Library.

Removing Components from the Team Library

Aside from the Publishing modal, you can remove Components from the library by right-clicking on Components in the Components tab and selecting Remove from library.

Doing this will move the Component to the Private to this file section of the panel. To add them back to the library, right-click on the private Components and select Add to library.

Removing Styles from the Team Library

Aside from the Publishing modal, you can remove Styles from the library by right-clicking the Style definition in the Properties Panel. You can do this with or without the corresponding layer selected. 

Accepting changes to shared Styles and Components

If changes are made to Styles or Components in the Team Library, any file using those Styles or Components will receive an update notification to Review or Dismiss

If multiple Styles or Components have been updated, you have the option to Update select ones , or to Update all. 

If you miss the notification, you can review them later by opening the Updates tab in the Team Library modal

Did this answer your question?