Create a Basic Design System using Framer and an external React Library

Design systems definitely improve collaboration between tech and design, but implementing and maintaining them might be seen as an overhead.

As design lead I introduced this example design system as a conversation starter between our design and tech teams. To sound more convincing I wanted to understand how the tech end of such a system would work too. In the simplest possible setup.

For beginners: only basic understanding of React and Framer is needed.
Note: I am a beginner at React myself, any suggestions or observations are more than welcome!

Requirements: you will need access to Framer Desktop which comes only with the Pro plan ($19/month).

GitHub: React Component Library, Framer project folder with library installed

Goal

Create a single source of truth both designers and developers can use.

Setup

1. I will create a library of React components and provide some basic documentation.
2. I will then set these components up in Framer enabling designers to use them in their designs

Create a React Library

The create-react-library CLI (Command Line Interface) creates a react library for you. Answer the questions you are prompted and you’re good to go. I used the Typescript template (last question) to make everything smooth, but you don’t necessarily need to. Open your terminal, navigate to the deserved folder and create your library:

$ npx create-react-library

File structure

Open your favorite code editor (I use Visual Studio Code with the Prettier extension) and create a folder in your src folder, and name it components.

You can delete the example folder, we won’t need it.

Components

You can use any Typescript component, here is an example if you don’t have one at hand: create the Example.tsx file in the components folder and paste the code below.

Documentation

Detailed documentation is important. It will help collaborate on the library — and serve as your design guidelines.

Luckily, Styleguidist does this all by typing 2 lines of code. Navigate to your project folder in the Terminal and type the following lines:

$ npm install --save react-styleguidist
$ npx styleguidist server

Styleguidist will now start a style guide dev server where you can check your components with their properties.

To add an example, simply create an Example.md (same name as the component) in your components folder, and paste the code below:

You should now see your component and its available properties on the dev server. This is a beginning of a beautiful style-guide-ship.

Prepare for Handoff

The last thing you need to do to prepare your components for Framer is to export them.

You’ll find an index.tsx file in your src folder. Replace its contents with the following (for each component you want to export):

To get your library ready, navigate to your project folder in the Terminal and type the following lines:

$ npm run build

Framer Design System

Framer is awesome. You can install component packages — your own or publicly available — and instantly start working on your designs.

Create a Framer Folder Project

Create a new file in Framer.
Holding down the option key go to File > Save as, and keep holding that option key to select the Framer Folder file format.

Install the Component Library as an npm Package

Open the Framer Folder project with your code editor, open a new terminal and install your component library:

$ npm install /path/to/component-library

To get the path, right click on the library folder in Finder, hold down the option key and hit Copy as Pathname.

Your library should now be installed as a node-module.

Importing Components

Navigate to the root folder of your Framer project folder (mine is called design-system.framerfx):

$ cd design-system.framerfx

Install the component-importer package:

$ npm install --save -g @framerjs/component-importer

Once the importer is installed you can import your components typing the following command:

$ component-importer init "component-library" --index path/to/index.d.ts

Where “component-library” is the name of your component library, and get the path for the index.d.ts file in the library’s dist folder.

You should see the importer.config.json file being created, and then your components being imported to the code folder of your Framer project.

The importer does a decent job finding props and assigning Property Controls to them, but you will need to tweak these to get a perfectly usable result.

The base of your design system is now ready! Time to make it fit into your teams’ work.

Next Steps

I still have to figure out how to get data out of Framer: shared colors and styles would be amazing to receive in the component library to sync changes made in Framer too.

Any ideas are welcome, I’ll publish a next tutorial once I’ve figured it out.