Skip to main content
Use your published component library, so Figr designs with the same components your app is built from. If your team publishes its design system as an npm package, Figr can read it directly. Your components, tokens and styles come straight from the source your engineers use, so designs stay in sync with code.
1

Start a new design system

Open Design System in the sidebar and create a new one, or open an existing one to add a source.
2

Choose npm package as a source

Under Sources, choose npm package.
Sources list with npm Package selected
3

Enter your package name

Type the package name, like @yourcompany/design-system, and the version you want.
Add an npm package dialog with the package name filled in
4

Set it up

Click Setup design system. Figr reads the package and adds its components and tokens to your design system.
When you publish a new version of your package, update the version in Figr so new designs use your latest components.