Skip to main content

​
Setting up your Design Language

​
Open Design Language

From the sidebar, click Design Language. The setup screen has two sections: sources and instructions.

​
Upload product screenshots

The first section takes screenshots and files. Upload your existing product screens, Figma frames exported as images, UI mockups, component examples, and CSS or style files. Drag and drop into the upload area, or click to browse.
The more you upload, the better. Figr analyzes every image to learn your visual patterns. Five screenshots give a basic read; twenty give deep pattern recognition.

​
Add design instructions

The second section lets you describe your design language in text:
  • Style (“minimal, lots of whitespace”)
  • Color (“primary is purple #6366f1”)
  • Typography (“Inter for UI, system fonts for body”)
  • Spacing (“8px base unit”)
  • Components (“rounded buttons, subtle shadows”)
  • Any specific rules or constraints
You can also attach files for CSS, tokens, or documentation, add Figma frames to import directly, or use voice input to describe your style out loud.

​
Complete setup

Click Setup design language. Figr analyzes the uploads, extracts color, typography, and spacing, identifies component patterns, combines them with your written instructions, and 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 to see your tokens organized by category: Typography, Colors Brand, Colors Neutrals, and Colors Icons. Each token carries a usage comment, like /* Card titles */ or /* Primary text */.

​
Edit tokens

Click Edit (bottom right), make changes directly in the document, and use the 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 document, edit if needed, then save.

​
Why it matters

Generic AI output looks generic: wrong colors, wrong spacing, wrong button styles. You spend more time fixing than you saved. With a design system imported, every design that follows uses your exact tokens, your component variants, and your spacing scale. The output looks like it belongs in your product because it uses your product’s building blocks. For “Design a settings page,” that is the difference between a template with arbitrary colors and default styles, and a page using your accent color, your Inter typography, your 8px grid, your button style, and your card shadows, one that looks like your product.