×

Studio Shared Libraries

The Shared Libraries feature allows you to access component libraries from any Studio file. This is a simple and scalable way to ensure everyone is referencing the most up-to-date components.

Adding a shared library

At its core, a shared library is a list of components from a separate Studio document. Any Studio document can become a shared library.

To add a shared library to your Studio document:

  1. At the top left of your document, click the libraries icon (studio-libraries-icon.png), or use the keyboard shortcut Command + L.
  2. To the right of Libraries, click the + icon.
  3. Choose a Studio document to use as a library, and click Open.

studio-add-shared-library.gif

The library will now appear in all Studio documents under the libraries panel to the left of the canvas. For example, if you create a new file or open an existing one, that shared library will appear in both.

Removing a shared library

To remove a shared library, click the libraries icon (studio-libraries-icon.png), and then right-click the library name. Click Remove.

Note: If you remove a shared library, any shared components you added to your document will remain. If you try to edit the master, you will be prompted to add the library again or unlink the component.

Adding shared components

To add components from a shared library:

  1. At the top left of your document, click the libraries icon (studio-libraries-icon.png), or use the keyboard shortcut Command + L.
  2. Click the desired shared library.
  3. Click the desired component. At the bottom left of the page, you will notice a preview of the component.
  4. To add the component, press Enter.
    Note: You can also add it by clicking and dragging the component name or preview.

studio-add-shared-component.gif

Swapping shared components

You can replace an existing component with a shared library component.

To swap a shared library component:

  1. Select a component in your document.
  2. In the inspector panel, locate the component name, and click the dropdown menu.
  3. Click the library name, and then click the desired shared library.
  4. Click the name of the desired component.

studio-swap-shared-component.gif

The new component you selected will replace the original component.

Note: Only the specific component instance you selected will be replaced. All other instances of the original component will remain.

Editing shared components

To edit a shared component:

  1. Select the component in your document and, at the top right, click Edit Master.
  2. You can Unlink the component or click Edit in Original Document.
    studio-edit-shared-component.gif

    If you click Unlink, any instance of the component in your document will be disassociated from the shared library. This component will be added to the local document library. You will also no longer receive updates that are made to the shared master component.

    If you click Edit in Original Document, Studio will open the source file where the component was originally created, and you can edit the master component.

Reviewing changes

When you edit a shared component and save the changes, you’ll receive a notification in each document that uses that component.

library-changes-notification.png

To review library changes:

  1. At the top left of the page, locate the libraries icon.
    Note: If any changes need to be reviewed, you’ll notice a blue dot indicator
  2. Click the libraries icon (studio-libraries-icon.png), or press Command + L.
  3. Click the library name with a blue numbered indicator.
  4. Click Review Change.
  5. To pull the changes into your current document, click Update Document.

studio-shared-library-review-changes.gif

If you don’t want to push the changes, click Update Later. The blue dot indicator will remain until you accept the changes.

Note: Each Studio document updates independently. You must review the changes in any document where the shared component is used.

Known limitations

  • It’s not possible to assign (or restrict) user permissions for a shared library. Anyone who has access to the document associated with the shared library can edit it.
  • Design System Manager (DSM) libraries can’t yet be synced to Studio or used with Studio documents.
  • Shared libraries are currently limited to components. They can’t contain text styles, layer styles, or documentation.

We hope to soon expand the possibilities with shared libraries. If you have any feedback or ideas, let us know!


Getting Started: Studio (
)

Studio Shared Libraries

Prev