Skip to main content
Bring your Figma variables, styles and components into Figr, so every screen it makes looks like your product. With your design system in Figr, every screen uses your real colours, type and components from the first message. You spend less time fixing off-brand drafts and more time on the design itself.
Before you start: your colours, type and spacing need to be set up as variables or styles in Figma. Figr can’t pick up values that only live on individual layers.
1

Start a new design system

In the sidebar, open Design System and create a new one. Give it a name and choose whether it’s just for you or shared with your workspace.
Create Design System form with name and sharing options
2

Open the Figma plugin

Under Sources, choose Figma, then click Open plugin. Run Figr AI Figma Sync in your design system file and check that it shows Connected.
Continue in the Figma plugin dialog naming the design system file
3

Choose what to bring in

Select what Figr should learn from: variables, styles, fonts, components, reference screens, icons, logos and images.
Plugin step for choosing reference screens to import
4

Set it up with Figr

Click Setup design system. Setup runs as a chat with Figr: it reads your selection, asks you a few questions about how your system is used, then builds your design system. Answer them, or tell it to go ahead with its best guess.
Design system tokens after setup
Include a few reference screens along with your components. They show Figr how your components are used together, not just what they look like.

​
Other sources

You can also build your design system from Storybook, an npm package, your code repo or brand assets. Combine Figma with a code source and Figr matches your Figma components with their code in one design system.

​
Next

From your code repo

Build your design system from code.

Switch design systems in chat

Pick which design system Figr uses.