Using the Component Importer

15m

At Framer, we love to push the boundaries when it comes to exploring new ways designers and developers can work closer together. Last April, we released Framer Bridge, a set of tools that hooks up design systems with production code. This included useful utilities like the Framer CLI, which helps publish updates from production design systems to Framer Packages.

Looking back, we’ve already identified two key areas that make design systems successful:

  1. A workflow for keeping every component up-to-date.
  2. A direct connection between design systems and production code.

Almost a year later, we’ve started to notice similar trends in the ways teams are starting to use Framer, and saw an opportunity for another tool we could build to make it one step easier to connect product designers with their production design systems.

Framer Bridge solves for the two points mentioned above, but before we can set up a workflow around providing up to date components back to designers, teams still need to import all of their components in to Framer first.

Let’s take a look at some components in Framer. By default, components are .tsx React Components. Here’s what a barebones React component looks like in Framer.

// Component.tsx
import * as React from "react"
import { Frame } from "framer"
export function Component(props) {
return (
<Frame />
)
}
COPY

If you copy and paste this into a new code component, you should see a 200px x 200px blue square. But if we wanted to display our own component from our design system instead, we would need to import our component and render that instead of the frame we currently have.

It might looks something like this.

// Component.tsx
import * as React from "react"
import { Button } from "my-design-system" //[1]
export function Component(props) {
return (
<Button />
)
}
COPY

Important Note [1]

Sometimes different Design Systems require you to import the component differently, depending on how they are exported from their packages. If you’re working with your own design system, make sure you check out the documentation to see how your components should be consumed. This article can help shed some light on the differences between imports.

Now we have our button, and we should see that reflected on the canvas. We can even add property controls from Framer to make the button more dynamic! After adding a few controls to make the component more reusable, you might have something that looks like this:

// Component.tsx
import * as React from "react"
import { addPropertyControls, ControlType } from "framer"
import { Button } from "my-design-system"
export function Component(props) {
return (
<Button disabled={props.disabled}>{props.text}</ Button>
)
}
addPropertyControls(Component, {
text: { type: ControlType.String, title: "Text" },
disabled: { type: ControlType.Boolean, title: "Disabled" }
})
COPY

Now we have two controls in our properties panel, one for adding text, and one for making the button disabled.

Following this pattern, you can start to see how a design system becomes much more interactive and real, once all of the components from a system are in.

But as many of you might already be thinking:

“Do I need to do this for all 120 components from my Design System?”

Thanks to the component importer, the short answer is: No!

The Component Importer is a new Command Line Interface tool that allows you to automatically generate Framer X components from a Design System, included with propertyControls for all available props.

Using the Component Importer

To use the component importer, you’ll need to globally install the package. In a terminal, run yarn global add @framerjs/component-importer to install the tool.

If we have a Framer Project with our Design System already installed, we can run component-importer init <name_of_design_system> to start the import. You can also run component-importer --help to get a helpful overview of how to use the tool.

Read more about installing packages into Framer Projects.

The importer will look into node_modules and try to find a package installed under the name you specified in the previous command. If successful, it will crawl through the package and identify a list of found components and generate an importer.config.json file that contains a list of them. Additionally, it will generate a .tsx file in the code folder of the project for each component.

The component importer will only work if your package has type defined components using TypeScript, Flow, or Prop Types. There is an optional flag --mode that lets you specify which Type definitions to look for. By default, it will look for TypeScript. The components generated from the importer should work right out of the box, but in some cases the components might need a little extra configuration (extra .css imports, defaultProps, etc.). If you're running into issues while using the importer, consult the docs or reach out to us at support@framer.com.

Remember those steps above we did to import 1 of our components into a project? Now, the component importer makes it easier than ever to get your entire library imported into Framer. And the bonus part? You can follow up and use the Framer CLI to make sure that any time the library is updated in production, you’ll receive those updates automatically in Framer.

The component importer is a really handy tool for teams looking to use production components in Framer. Read the official docs on the importer here.