The Team Library makes it easy for your entire team to access any component from your design system. Anyone in your organization can instantly insert as well as update to the latest version of a component from anywhere. This means everyone is always working with the most up-to-date components.
Starting your design system
Smart Components are fully interactive components that require no code to design in Framer yet give the same output as the components your developers would use in production. Complete with Variants and Variables, Smart Components are the key to a powerful, reusable, and flexible design system.
To create a Smart Component you can use the design skills you already have. Simply design your component in the main canvas, click “Component” in the top toolbar, then enter the Component Canvas to design multiple visual Variants and add custom properties, or Variables.
Design System example
When you open your Framer dashboard you’ll see a design systems folder with an example sticker sheet file, this example file gives you an idea of what the beginnings of a design system could look like. You can experiment with the component design and try copy and pasting them in your projects.
Managing Components in the Team Library
With the introduction of the Team Library we’re moving away from a siloed package model and towards a simpler component-based model for sharing your design system. This means no upfront installation, lightweight files, and more flexibility in management.
Once your components are ready to share, you can add them to the Team Library from the Component Canvas. After you click “Add to Library” your component will be added to the Team Library section of the Insert Menu and become available for any team member to use in any project.
Design system management also happens from within the Insert Menu, under the Team Library section. Managing can happen from any file and all the editors on a team can delete a component or change its description.
Copy & Paste
In addition to adding components to the Team Library, you can also copy and paste to quickly use across projects. All the Variants of a pasted Smart Component will stay intact and it will also remain linked to the Primary, so any updates to the Primary can be pulled in at any time.
In Framer, when you copy and paste component instances across projects, they stay linked to their Primary. This means you can paste components wherever you please and still be able to get the latest versions via updating. Don’t want this behavior? you can always unlink after pasting.
If you need to make further changes to the Variants or interactions of your pasted Smart Component, you can simply unlink the component from its Primary and keep iterating in the new file. Double click on the pasted component to trigger a modal with the option to unlink the component.
Even after your components are added to the Team Library, you can continue to iterate and refine them and the changes will be automatically published to the Team Library. This means everyone will always have access to the most up-to-date components by default.
Users will receive an update notification for the components they are using in their files. Any new components inserted will always be the latest version.
TIP: Didn’t want to update? You can undo any update with CMD+Z just like any other change.
Accessing the Primary component
If you need to make changes to the original component, known as the Primary, you can do so at any time. Everyone can access the Primary component from the Insert Menu by clicking “Open Primary”, double-clicking the component in the canvas, or clicking “Open Primary” from the context menu.
This is the first step towards a more complete design system solution. See below what isn’t (fully) supported yet.
|Code Components||Only Canvas Components can be added to the Team Library|
|Component organization||There’s no way to organize your components|
|Color styles||There’s no way to share your Colors Styles|
|Text styles||There’s no way to create and share your Text Styles|
|Permissions||There’s no way to manage advanced permissions related to Team Library|
Feel free to leave your thoughts and feedback about the Team Library here.