Team Libraries (Shared Libraries)

Topics covered in this Figma tutorial:

Publishing a Team Library, Using Components in a Team Library, Using Styles in a Team Library, Swapping Team Libraries

Exercise Preview

Exercise Overview

In this exercise, you’ll learn how to reuse assets (colors, text styles, components, etc.) across multiple documents and even across multiple people/computers!

Creating a Team Project & Importing Files

1. In Figma, if you’re not on the homescreen (file browser), do the following:

   • In the Desktop app: Click the Home tab (Mac users can also choose File > Open File Browser).
   • In the Web app: At the top left, click the Main menu button and choose Back to files.

2. Let’s create a new Team project. As shown below, on the left, hover over your team name (whatever it is) and click the Plus(+).

   

3. Name the new project Pulse and click Create project.

4. To open a local file, click Import file (may be an icon near the top right).

5. Navigate into Desktop > Class Files > Figma Class and:

   • We want to select all 3 files (Women.fig, Pulse Design System.fig, and Pulse Design System Alternate.fig) so click on whichever file is on top, then Shift click the bottom file.
   • Click Open.
   • When the files are done uploading click Done.

6. Double–click on Pulse Design System to open it.

Looking at the Components & Styles

We can create a shared team library that can be used across files. It can be shared with other people for them to use as well. When the original library is updated, all files (and across everyone’s computers) will be updated!

1. Click in an empty area to make sure nothing is selected.

2. In the Design panel on the right, notice all the different kind of styles we’ve created in this file:

   • Text Styles
   • Color Styles
   • Effect Styles
   • Grid Styles

3. At the top of the left panel, click on Assets to switch to that panel.

4. If needed, expand Local components, then Pulse Components to see all the components we’ve created in this file.

Publishing a Library

IMPORTANT: Publishing styles is available to free Starter Teams, but publishing components requires a Professional team, Education team, or Figma Organization. In other words, if you’re using the free Starter plan you will NOT be able to publish components, but you will be able to publish styles.

1. Click in an empty area to make sure nothing is selected.
2. In the middle of the toolbar, click the down arrow to the right of the file name.
3. From the menu that appears, choose Publish styles and components.
4. In the dialog that appears, everything should be selected. Click Publish.

Loading the Team Library Into a Design File

Now that we have a library, let’s see how to use it in other files.

1. We need to open another file.

   • In the Desktop app: Click the Home tab (Mac users can also choose File > Open File Browser).
   • In the Web app: At the top left, click the Main menu button and choose Back to files.
2. In the Pulse project, double–click on Women to open it.
3. At the top of the left panel, click on Assets to switch to that panel.
4. At the top right of the Assets panel, click the Team library button .
5. In the list of libraries, click the toggle next to Pulse Design System.

6. Close the Libraries dialog.

Using Components in a Team Library

Now that our file has access to our library, let’s use assets from that library.

1. In the Assets panel, expand Pulse Design System (our team library), then Pulse Components to see all the components from the library.

2. Drag the nav component to the top of the frame.

3. Drag the footer component to the bottom of the frame.

Using Styles in a Team Library

1. Select the New Autumn Attire text and:

   • In the Design panel, to the right of Text click the Style button
   • Under Pulse Design System click on the Heading style to apply it.

2. To the right of Fill click the Style button

   • Under Pulse Design System click on 3. Dark (a dark brown). You may have to scroll down if you’re in the list view.

3. Select the text cozy women’s styles for the fall season and:

   • In the Design panel, to the right of Text click the Style button
   • Under Pulse Design System click on the Subeading style to apply it.

4. To the right of Fill click the Style button

   • Under Pulse Design System click on 2. Medium (a medium brown).

Updating a Team Library

1. In the Assets panel, Ctrl–click (Mac) or Right–click (Windows) on the navbar component and choose Go to main component.

   You should now be back in the library file.

2. Click in an empty area so nothing is selected.
3. In the Design panel, notice there’s a list of Text Styles.
4. Hover over the Heading style and click the Edit Style button on the right.

5. In the Edit style panels that opens:

   • Change Regular to Black.
   • Change the font size (to the right of the font name and is currently 29) to 34.

6. Close the Edit style panel.

7. In the Pulse Components frame on the right, double–click on the navbar’s black background color.

8. In the Design panel:

   • To the right of Fill click the Style button
   • Click on 3. Dark (a dark brown).
9. Click in an empty area to make sure nothing is selected.

10. Click once on the navbar to select it.

    • In the Design panel, notice there’s a button for Publish changes.
11. In the left panel, notice there’s a black dot next to Assets, which indicates the same thing.
12. At the top of the left panel, click on Assets.
13. At the top right of the Assets panel, click the Team library button .
14. Next to Pulse Design System click the Publish 2 changes button.

15. Click Publish.

Accepting Library Changes In a File

1. Let’s go back to the Women file:

   • In the Desktop app: Click the Women tab at the top.
   • In the Web app: Click the Women - Figma tab at the top of the browser.

2. At the bottom right of the window, you should see a Component updates available message. Click Review.

   NOTE: If you dismiss the message, you can get to the same place by going to the Assets panel, clicking on Team library and clicking Updates (at the top).

3. In the Updates window, you’ll see a list of changes:

   • We could click Update for each change, but let’s click Update all.

4. Notice the following changes:

   • The heading is now thicker (a black weight) and larger.
   • The navbar background has changed to brown.

Optional Bonus: Swapping Team Libraries

You can swap out libraries, which can be useful if you need to use a different version of a library, or switch to a library provided by someone else (internal vs external design agency).

To see how this works we must first publish another library.

1. In Figma, if you’re not on the homescreen (file browser), do the following:

   • In the Desktop app: Click the Home tab (Mac users can also choose File > Open File Browser).
   • In the Web app: At the top left, click the Main menu button and choose Back to files.
2. In the Pulse project, double–click on Pulse Design System Alternate to open it.
3. Click in an empty area to make sure nothing is selected.
4. In the middle of the toolbar, click the down arrow to the right of the file name.
5. From the menu that appears, choose Publish styles and components.

6. Click Publish.

7. Let’s go back to the Women file:

   • In the Desktop app: Click the Women tab at the top.
   • In the Web app: Click the Main menu button and choose Back to files. In the Pulse project, double–click on Women to open it.
8. At the top of the left panel, click on Assets.

9. At the top right of the Assets panel, click the Team library button .

10. This file currently uses the Pulse Design System, so click on its name.
11. Click Swap library.
12. At the top right, click on Choose library and select Pulse Design System Alternate. You may have to go into a Team submenu (whatever the name of your team is) to choose it.
13. Click Swap library.

14. The file should now look very different!

    For more about swapping libraries, refer to tinyurl.com/fig-swap-lib