The Library makes your core design and prototyping assets available for the entire team to use, while ensuring all instances remain in sync across projects. It’ll help you build prototypes faster and keep your design language consistent, becoming a functional design system.
Some ways you can use the Library
- Store buttons, icons, avatars, nav bars, overlays, menus and backgrounds
- Use library prototypes as documentation for style guides and design systems
- Store layout templates as library components, which teammates can place, detach and edit to suit their needs
- Create a library component for all your icons, with a different icon on each page
- Store common script expression functions as library variables for easy reuse
- Add brand fonts to the library so they are available for all new projects
Accessing the Library
The Library is structured like a project, with its own project space with tabs for Prototypes, Components, Data and Archive. It lives in the projects hub too, next to the ‘New Project’ button.
Moving items to the Library
To move a component to the Library, select the component either on the canvas or from the Layers panel, then open the ‘More options ▾’ menu in the properties panel and select ‘Move component to library’. All instances of that project component will become instances of the Library component.
To move a component to the library from the project hub, click on the Components tab, hover over the component item you want to move and click on the Library icon on the right.
Note: When moving a component to the Library, any components, data, variables or custom fonts used inside it will also be moved to the library.
You can move a prototype to the Library from the project hub by hovering over the prototype tile you want to move, clicking on the 'more options’ icon (three dots, top right), and selecting ‘Move to library’.
Note: When moving a prototype to the Library, any components, data, variables or custom fonts used inside it will also be moved to the library.
Data can be added directly into the library via the Data tab in the library project itself.
Variables and Custom Fonts
Variables and custom fonts can be added to any library prototype or component as normal in the editor - using the "Manage Variables" option from the main toolbar (keyboard shortcut ‘V’) and the ‘Add fonts…’ option in the Font dropdown on the properties bar. Adding them to a library document like this adds them to the library.
Using library items
To place an existing library component into your prototype, select the “Place a Component…” tool from the main toolbar, or use the keyboard shortcut ‘C’ to open the component picker. This lets you browse all project AND library components in the project and place them in your prototype. Library components are identified by the green library icon.
Library components can also be copied and pasted freely between projects.
Data, variables and custom fonts in the library will be available in the editor via corresponding properties panel dropdowns.
Editing library items
Changes to library items are always synced across all instances across projects. For example, if instances of library component ‘Grids’ are used in projects A, B and C, any changes to the ‘Grids’ component will be reflected in those projects.
When editing a library prototype or component a green message is displayed on the canvas, making it clear that 'You’re editing a library item'.
Library data can be synchronised as normal via the Data tab in the Library.
Library variables can be managed as normal from inside any library prototypes or components using the "Manage Variables" option from the main toolbar (keyboard shortcut ‘V’).
New versions and variations
When you want to provide a new version of a particular asset in the Library, you can:
- Edit or replace the existing page/states in the Library component, automatically updating all current uses of it.
- Add a new page/state within the existing component, providing your team with a new option to choose from.
- Create a new Library component, then archive the old one. Let your team know they’ll need to replace existing uses of the old version with the new one if they want the latest version. Archived library components will continue to work, but need to be unarchived to be edited.
If using library components as templates, or if you want to create a quick variation of a library component, you can detach the component’s content. Detaching effectively breaks apart a component instance, placing the component’s elements onto your canvas.
To detach a component instance, select the component either on the canvas or from the Layers panel, then open the ‘More options ▾’ menu in the properties panel and select ‘Detach from component’. Or use the keyboard shortcut ‘Option Command 3’.
- Moving prototypes or components that use variables to the library will also move those variables to the library.
- When using variables in a prototype, if a variable in your project has the same name as a variable in your library, the project's default value will be used. If you need to reference library variables in script expressions you can use the
lib.prefix to target them. E.g.