With the Team Store in Framer X you can now easily share components, brand assets, and full design systems. Every company and design system is different, but this quick guide can help get you started.
The Team Store is the best way to share and re-use work in your team or organization. It manages versioning, dependencies, permissions, and allows you to collaborate with your entire team on design systems.
When it comes to design systems, most tools offer little more than a way to create static files. And while style guides and documentation are a great way to create a shared visual language, we believe that truly functional product design begins with reusable and interactive UI components.
In Framer X, we’ve made it easy to design collaboratively based off a shared set of interactive code components. For a full guide on how to create code components, check out these resources:
Design Components are a powerful feature of Framer X that can turn any element on your canvas into a re-usable component. There’s a huge benefit in using component-based design for virtually every project, big or small. Say you’re designing an onboarding flow for your app in Framer X. You start with a mockup and as you begin to add more elements — buttons, navigation and type — you quickly turn those into components. Twenty frames later, you’ve nailed your UX and built up a library of reusable components. Now you can start playing around with colors, branding, and type by editing master components and watching as changes are reflected across the board.
Here are some more in-depth resources for exploring what's possible with design components in Framer X:
Creating Design Components in Framer X by Edoardo Mercati
Hover Button with Design Components in Framer X by Brett Bertola
We recommend setting up project files for each package or collection of components that you want to publish. Within the project file you can then create design and/or code components. How you structure depends on your team, but we find making smaller project files with a few components easier when maintaining your design system. Keep in mind:
Every package maps to a single project file.
Do not delete your package project file. It's your source file for a package and used for updating.
We also recommend storing all your project files in a shared folder and calling them something like “Button — Package” for easy recognition and retrieval when you need to make updates.
Once you have created components and saved them into a single Project File, you may choose to share them with your team. To do that, you’ll need to publish your Project File as a package in your Team Store. Just navigate to the Team Store section in the app (the bottom icon in the left-most navigation) and click the Publish button.
To keep your design system in the Team Store organized and effective, you can add the following unique assets: a thumbnail, a banner and a description of the package’s contents and features. The description field supports Markdown, and is a great place to include any documentation or usage guidelines that you want your team to read. Uploading artwork and an icon is as easy as dropping images on the default icon and artwork or selecting Choose. When satisfied, click the Publish button in the top right.
Over time, you make want to make changes to your package. You can easily do this by opening the original Project File, making your desired change, and then clicking update within the Team Store section of the app. Follow this same process to make changes to the title, artwork, and icon, or to edit the readme of your package.
Note: Any time a package is updated, anyone that has previously downloaded the package will receive a notification. A new notification appears on the components panel icon in the left side of the Framer X tab bar. The total number of available updates is also displayed in the bottom-left corner of the Framer X app. Clicking on either of these icons will navigate to the Components panel. To update or uninstall any packages within your project, simply right click on the package header.
By default, the public Store shows you all of our Featured packages. Click on a thumbnail to navigate to its detail page. From here, click on Install to download the package. After installing, the components from the package will appear in your Components panel.
When a package you’ve installed is updated by its author, you’ll receive a notification in the components panel icon in the left side of your tab bar. The total number of available updates is also displayed in the bottom-left corner of the app. Clicking on either of these icons will navigate to the Components panel. To update or uninstall any packages within your project, simply right click on the package header.