Implementation

DA
Last updated 4 days ago

React

You can use your existing React Design System in Framer and add interface to control the props for every component, so designers can use your production components right on the canvas to compose new product ideas.

There are multiple ways to set a system like this up, but typically it would work like this:

  1. Create a new Framer X project that will serve as your design system. It's easiest to use folder backed projects.

  2. Add your React design system as a dependency to the project. Dependencies get auto installed when a user opens the project (make sure to add it as a regular dependency).

  3. Expose the components your designers want to use in Framer. Create exports in the code directory for every component.

  4. Optionally add Framer interface to your components to make them configurable. You can wrap your components with a HoC that add the propertyControls .

  5. Publish the design system to your private team store.

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

Technical details

Framer uses webpack to turn your components into packages that can get loaded on the canvas, the preview and distributed via the store.

  • project.framerfx/build/index.js has your local build that gets used by the document itself. It inlines all your libraries except for Framer, React and ReactDOM, which it treats as externals.

  • project.framerfx/dist/index.js is the file that gets build and uploaded to the store. It treats all dependencies as external, so if you add any, make sure to add them as regular dependencies and not devDependencies so that they get installed as the package gets installed from the store.

We transform some JavaScript under the hood:

  • We make sure only one instance of styled-components gets loaded.

  • We add some budget checking code in your component render code.

Other Design Systems

Angular, Vue, Polymer, React Native

Although Framer uses React to describe components, it should be fairly easy to write a generic React wrapper for any JavaScript component that you could expose to Framer. Ives has made an example for Vue.

Sketch

You can copy and paste most of your visual Sketch assets. But because Symbols are very different from components, we don't support copy and paste for that yet, which is not ideal as most design systems use them. We are looking if we can improve Symbol importing from Sketch in the future.