Welcome to the Team Store Beta! We're excited for you to unlock the power of Framer X to create your team's interactive design system. Over the course of this beta launch, we will actively be working on making things better and would really appreciate your feedback. 

Request beta access to the Team Store › 

Every company and design system is different, but this quick guide can help get you started.

Organizing

If you're new to publishing packages in Framer X, the basics are quite straightforward once you know how everything is structured. There are three primary objects for design systems in Framer X.

Project 

The standard Framer X file you use to design with also happens to be the same format for making packages.

Package 

A collection of components published to your Team Store.

Component 

Either a design or code component for your design system.

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 everything depends on your team, but we find making smaller project files with a few components easier when maintaining your design system. Keep in mind:

  • Packages must be separated by project file
  • Do not delete your package project file. It's your source file for 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.

Publishing

Once you've got a project file with a few components, you'll want to publish that to your Team Store. Just navigate to the Team Store section in the app and click Publish in the upper left. 

There you're able to edit the name, description, icon and artwork of the package to be published. The Readme edits the description for the package and helps give you a place to describe the package and talk about the components in it.

How to Edit Artwork:

  1. Download the images you wish to use, and resize as indicated in ‘Customize Package’
  2. Re-name them icon.png and artwork.png, respectively
  3. Click Edit Artwork button on New Package page
  4. Open a new Finder Window
  5. Drag your desired images into the metadata folder
  6. Click Confirm that you want to replace the existing files

Once published, everyone on your team is then able to install the package and use the components within Framer X.

Updating

Whenever you want to update a package, just open the original project file, make changes to any components, and then click update within the Team Store section of the app. You can also make changes to the title, artwork, and icon, or edit the readme.

Feedback

We're iterating very quickly on the Team Store and would really appreciate your feedback as we work to make Framer X the best place for your design system. For all feedback, please make sure to email your Account Manager.

Did this answer your question?