> ## 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 your code repo

*Let Figr read your design system straight from your codebase, so its designs match what's actually built.*

Your code is the final word on how your product looks: real tokens, real components, real styles. Connect your repo and Figr builds your design system from it, so designs line up with what your engineers ship.

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

Under **Sources**, choose **GitHub** and select the repo, and the folder where your design system lives if it's not at the root.

![Screenshot 2026 10 21 At 1 52 14 PM](https://mintcdn.com/figr-1af7ae64/IKsR7_SNlON40_qL/images/Screenshot-2026-10-21-at-1.52.14-PM.png?fit=max\&auto=format\&n=IKsR7_SNlON40_qL\&q=85\&s=48a29d764ea4d800d2c1a9fc3e9860d3)

**3. Point Figr to the right folder**

Add the github repositories that are relevant to your projects. The one that holds your design tokens and shared components, not the whole app. A focused source gives cleaner results.

![Image](https://mintcdn.com/figr-1af7ae64/MWugUlEIv8OG0sG0/images/image-36.png?fit=max\&auto=format\&n=MWugUlEIv8OG0sG0\&q=85\&s=a15498424d74fdd248a7b71b7dd3b349)

**4. Set it up**

Click **Setup design system**. Figr reads your tokens, components and styles and adds them to your design system.

> [!NOTE]
>
> **Not on GitHub?** You can also upload your theme or style files, like CSS or token files, directly as a source.


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