Importing a React Design System

Note: This article refers to the Framer desktop app. Learn more about the differences between the Framer web and desktop app here.

You can use your existing React Design System in Framer and add interface elements to control the props for every component.

This way, designers are able to use your production components right on the canvas to compose new product ideas.

There are multiple ways to set up a system like this.

Option 1

If you just want to use your components in Framer, you can import them by adding your design system from NPM as a dependency to the Framer project:

  1. Create a new Framer project that will contain your design system and save it. It's easiest to use folder-backed projects.

  2. Add your React design system as a dependency to the project

    • Go to File > Show Project Folder.
    • Open a terminal at this folder and yarn add your design system.
  3. Expose the components your designers want to use in Framer

    • If you just want to render the component, create an export in the code directory for every component.
    • If you want to expose some property controls for designers to change properties from the canvas, you can optionally add properties for your component to the Framer UI to your components to make them configurable. You can wrap your components with a HoC that will add the propertyControls.
  4. To share it, publish the file containing your design system as a Team package.

Now everyone in the company can use your production components directly on the canvas, and update to the latest versions with a single click.

Option 2

If you'd like to keep your Framer components and your source components together in the same repository, you’ll want to set it up a bit differently.

  1. Create a new Framer project that will contain your design system and save as a folder-backed project.
  2. Add the framer.fx project to your the same repository as your source code.
  3. Expose the components your designers want to use in Framer (there are two ways of doing this, specified above in Option 1)
  4. Publish it as a Team package, so everyone in your team can access it.

If you want to automate this process, use Framer Bridge, a new command line interface (CLI) that allows you to automatically publish and distribute components to designers.