Setting Up Your Design Language
Access Design Language Settings
- Open the sidebar
- Click Design Language
- You’ll see the setup interface with two sections
Upload Product Screenshots
The first section asks for product screenshots or files. What to upload:
- Screenshots of your existing product screens
- Figma frames exported as images
- UI mockups and designs
- Component examples
- CSS or style files
Drag and drop files into the upload area, or click to browse.
The more you upload, the better. Figr analyzes every image to understand your visual patterns. Five screenshots give basic understanding. Twenty screenshots give deep pattern recognition.
Add Design Instructions
The second section lets you describe your design language in text. What to include:
- Design style description (“minimal, lots of whitespace”)
- Color guidelines (“primary is purple #6366f1”)
- Typography notes (“Inter for UI, system fonts for body”)
- Spacing conventions (“8px base unit”)
- Component preferences (“rounded buttons, subtle shadows”)
- Any specific rules or constraints
You can also:
- Attach files (click the attachment icon) for CSS, design tokens, or documentation
- Add Figma frames (click the Figma icon) to import directly from Figma
- Use voice input (click the microphone) to describe your design style verbally
Complete Setup
Click Setup design language to process everything. What happens:
- Figr analyzes all uploaded images
- Extracts color palettes, typography, spacing
- Identifies component patterns
- Combines with your written instructions
- Generates your design language profile
Editing Your Design Language
After setup, Figr generates a structured CSS Tokens document with your design language.
View Your Tokens
- Open Design Language in the sidebar
- See generated tokens organized by category: Typography, Colors - Brand, Colors - Neutrals, Colors - Icons
- Each token includes usage comments like
/* Card titles */ or /* Primary text */
Edit Tokens
- Click Edit (purple button, bottom-right)
- Make changes directly in the document
- Use the formatting toolbar for headings, bold, italic, links, and lists
- Click Save changes to apply, or Discard to cancel
Regenerate Tokens
- Click Regenerate to have Figr re-analyze your uploads
- Review the new token document
- Edit further if needed, then save
Why Design System Import Matters
Generic AI outputs look like generic AI outputs. Wrong colors. Wrong spacing. Wrong button styles. You spend more time fixing than you saved generating.
Figr designs with your design system. Import once. Every design that follows uses your exact tokens, your component variants, your spacing scale. The output looks like it belongs in your product because it literally uses your product’s building blocks.
| Without Design System | With Design System Import |
|---|
| Generic components that need restyling | Your actual components with correct variants |
| Colors that don’t match your brand | Your exact color tokens applied automatically |
| Spacing that feels “off” | Your spacing scale enforced throughout |
| Typography that needs manual fixing | Your typography hierarchy respected |
| Components that don’t exist in your library | Designs that match your Figma library |
Design Language in Action
| Your prompt | Without Setup | With Setup |
|---|
| ”Design a settings page” | Generic settings page with arbitrary colors, standard spacing, default component styles. Looks like a template, not your product. | Settings page using your purple accent color, your Inter typography, your 8px spacing grid, your rounded button style, your card shadows. Looks like it belongs in your product. |
