Is Your Team Ready for the Future of Design Systems?
By: Aroa Gil Bo
Tags: Design Systems, React, Framer X, Resources, Developer

Interested? Now let’s dive in.

But first, let me tell you some unique qualities about Framer that will help you understand even better why Framer sits between designers and developers and allows for such collaboration. These tidbits are also handy to learn before diving into the actual implementation.

What are Framer Files under the hood?

For designers, Framer files are just going to be another file you work with. This is how Framer X files look in the finder.

However, under the hood, Framer X files are JavaScript projects that can contain anything, from a single asset or component all the way to a complete design system. Designers will use only the Framer Canvas and interface to create things, so they’ll never need to know, but as a developer you can go ahead and work with any Framer X project from your code editor.

By default, a Framer X project is going to be a zipped folder (.framerx), but as a developer, you might want to use the folder-based file type (.framerfx) in order to version it in Git.

Example of a .framerfx file

You can always surface the folder behind a Framer X file by going to File > Show Project Folder or pressing ⌥⌘P when you are in Framer.

Framer supports design and code components. So what’s the difference?

To allow for better communication between design and development, Framer X supports both design and code components.

In short, design components are created visually on the canvas and code components are programmed in the code editor.

We’ll focus on code components today, but we can explore the possibilities of merging these two in a separate article. If you’re interested in focusing purely on design components, check out this post.

Code components in Framer X are TypeScript + React (.tsx) files under the hood and are stored in the code folder of the Framer X projects. You don’t have to use Typescript or React; the Framer code editor allows you to render anything from plain HTML elements, styled with CSS, so setting up your first code component is easier than it may sound! Head to the Code Tab ({ } in the left panel of the Framer X app) and download the example files to see different code components.

We are going to use a code component (or a .tsx file) to wrap each component we want to import from our React design system. Then we’ll add some Framer magic on top of it to make it easier for designers to use.

What’s the Team Store?

In short, the Team Store is the place within Framer X where you can centrally store and share your design systems. It is NPM-compatible and is set up as a private repository for your team with packages/components, contributed by both designers or engineers. Designers can create design components and share them. Engineers can build React components in Framer X or import their existing ones and distribute them across teams.

In this way, both teams are able to leverage the knowledge of the other. E.g. Designers can design with React components from the start, and ensure that the most up-to-date version is being used.

You mentioned Packages, what are those?

Once you’ve created components and saved them into a single Framer File, you may choose to share them with your team. To do that, you’ll need to publish your Framer file as a package in your Team Store.

A package consists of the Framer file that you publish to the Team Store. These packages can be made up of design and code components, or a mix of the two. There are two things to take into account:

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 master files in a shared folder and/or versioning them in Git. You can call them something like “Button — Package” for easy recognition and retrieval when you need to make updates.