> ## Documentation Index
> Fetch the complete documentation index at: https://docs.figr.design/llms.txt
> Use this file to discover all available pages before exploring further.

# Set up your design system from an npm package

*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](https://mintcdn.com/figr-1af7ae64/6fNHqiw94uTEs_lh/images/docs/npm-02-source.png?fit=max\&auto=format\&n=6fNHqiw94uTEs_lh\&q=85\&s=ae6cbeb3e7dcbd50e7998370f48d0ac1)

**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](https://mintcdn.com/figr-1af7ae64/6fNHqiw94uTEs_lh/images/docs/npm-03-fields.png?fit=max\&auto=format\&n=6fNHqiw94uTEs_lh\&q=85\&s=619665dc7aad82c5393c68ba06637263)

**4. Set it up**

Click **Setup design system**. Figr reads the package and adds its components and tokens to your design system.

> [!TIP]
>
> When you publish a new version of your package, update the version in Figr so new designs use your latest components.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.