A design system AI actually understands
- Built on the open DTCG format
- Every color, type, and spacing choice, documented with the rationale behind it
- Your tokens, enforced in every screen Figr generates
Setting up your Design System
Step 1: Create a new Design System
Open the sidebar and click Design Language, then create a new one. Fill in:- Name (required): e.g., “Company Design System”
- Description (optional): Helpful when sharing with teammates
- Project access:
- Private to me
- All workspace members can view
- All workspace members can edit
Step 2: Connect your sources
Add one or more sources to teach Figr your design system. Figma is the fastest way to start. Two source options:- Figma (recommended): Connects via the Figr AI Figma Sync plugin
- Files: Upload exports, style guides, or token files manually
Connecting Figma
Click Figma. A modal opens with a one-click link to install the plugin. The Figma plugin reads your designs:- Imports multiple frames seamlessly from any Figma file
- Reads your tokens, values, and layers automatically
- Generates prototypes that match your product from the first draft
Inside the Figma plugin
Once the plugin loads, you’ll see:- Connected status (green) with your Figr account email
- 0 Selected for sync counter
- How it works link
- Select the frames, components, or pages you want Figr to learn from. The counter updates as you select. Figr reads variables, styles, and components exactly as you built them.
- This is two-way sync. Anything you build in Figr can later export back to Figma as editable layers with components and tokens applied.
Step 3: Add design system instructions (optional)
Back in Figr, you’ll see Figma marked as Connected. Below the sources, there’s an optional instructions field. Use this to teach Figr nuances your tokens alone don’t capture. Examples:- “Primary action color is always Blue-600. Avoid deprecated tokens prefixed with old-”
- “Keep the canvas in mind as a separate surface”
Step 4: Setup design system
Click Setup design system. Figr processes the sources, maps your tokens to the DTCG format, and builds your design language library.Working inside your Design System
Why Design System matters
Most AI design tools generate screens that look fine but don’t match your product. Wrong shade of blue. Different border radius. Off-brand typography. You end up rebuilding from scratch.| Without Design System | With Design System |
|---|---|
| Generic AI styling that ignores your brand | Designs that match your actual product |
| Manual cleanup on every generated screen | Tokens enforced from the first draft |
| Inconsistency across team-generated work | One source of truth, applied everywhere |
| Junior designers misuse components | Components used correctly by default |
Want me to add a section on syncing back to Figma, or managing multiple design systems for different products?