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

# Build high-fidelity prototypes that follow your design system

AI-generated designs look good until someone checks them against the design system. Then the questions start: is that our blue, is that our button, why is this card a new component? Teams end up auditing every screen by hand, and soon stop trusting what the AI makes.

Figr builds on your design system from the start, and shows you exactly how closely each prototype follows it.

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

> [!TIP]
>
> **The short version:** Figr builds high-fidelity, clickable prototypes with your tokens and components. It then checks each screen against your system, shows how much of it is compliant, and points to the few elements that aren’t, so you can fix them in one step instead of hunting for them.

## How it works

**1. Connect your design system**

Bring in your tokens and components once. The whole design system with its colors, type, buttons, cards and form fields.

**2. Ask for the prototype**

Describe the flow you need. Figr builds high-fidelity, clickable screens using your tokens and components, not lookalikes.

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

**3. See how compliant it is**

Figr checks every screen against your system and shows how much of it follows the design system, with each off-system element marked on the screen.

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

**4. Fix it in one step**

Pick the flagged elements and ask Figr to swap them for the right tokens and components. The screen comes back fully on-system.

## What changes for your team

* **Design system teams** can trust what Figr makes, because they can see the proof on every screen.
* **Designers** stop checking every color and component by hand.
* **Reviews** move from “is this on-system?” to “is this the right design?”

## Go further

Want to fix a single element by hand? Select it on the canvas and edit it directly.

> **[Direct editing](/getting-started/tutorial/untitled-page-5)**
>
> Change text, color, spacing and layout without regenerating.

## Related

> **[Design system](/product-intelligence/design-system)**
>
> Connect and edit your tokens and components.

> **[Draft to Figma](/what-figr-does/mock-to-figma)**
>
> Next step: send the compliant prototype to Figma.


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