> ## 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 Storybook

*Point Figr at your Storybook, so it designs with the components your engineers already ship.*

If your components live in Storybook, that's the most accurate picture of your design system: real components, real props and real states. Figr reads it, so what it designs maps to what your team can build.

**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 Storybook as a source**

Under **Sources**, choose **Storybook**.

![Sources list with Storybook selected](https://mintcdn.com/figr-1af7ae64/6fNHqiw94uTEs_lh/images/docs/sb-02-source.png?fit=max\&auto=format\&n=6fNHqiw94uTEs_lh\&q=85\&s=e0790d5c8961eb65659c4f298f8a28e4)

**3. Add your Storybook link**

Paste the URL of your published Storybook.

![Connect Storybook dialog with the server URL field](https://mintcdn.com/figr-1af7ae64/6fNHqiw94uTEs_lh/images/docs/sb-03-url.png?fit=max\&auto=format\&n=6fNHqiw94uTEs_lh\&q=85\&s=c12f2e092190cbb90988651824e469c3)

> [!TIP]
>
> Make sure each component has stories for its main variants and states, like default, hover, disabled and error. Figr can only use what your stories show.

**4. Set it up**

Click **Setup design system**. Figr reads your components, their variants and states, and adds them to your design system.


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