Skip to main content

​
Setting Tokens

Design tokens are the foundation of consistent design systems. Figr uses your tokens to ensure every generated design matches your visual language perfectly.

​
Token Configuration Process

1

Token Import

Bring your existing design tokens into Figr:
Interface showing design token import from various sources like JSON, CSS, and design tools
Supported formats:
File formats:
✅ JSON design tokens (W3C standard)
✅ CSS custom properties
✅ SCSS/SASS variables
✅ Style Dictionary outputs
✅ Figma design tokens (via plugin)
✅ Sketch shared styles

Import methods:
- File upload (drag & drop)
- URL import from design tools
- API integration
- Manual token entry
- Git repository sync
2

Token Organization

Structure tokens for optimal usage:
  • Color Tokens
  • Typography Tokens
  • Spacing Tokens
{
  "color": {
    "brand": {
      "primary": "#6366f1",
      "secondary": "#8b5cf6",
      "tertiary": "#06b6d4"
    },
    "semantic": {
      "success": "#10b981",
      "warning": "#f59e0b",
      "error": "#ef4444",
      "info": "#3b82f6"
    },
    "neutral": {
      "50": "#f9fafb",
      "100": "#f3f4f6",
      "500": "#6b7280",
      "900": "#111827"
    }
  }
}
3

Token Validation

Ensure token quality and consistency:
Quality checks:
✅ Color contrast ratio validation
✅ Typography scale consistency
✅ Spacing system harmony
✅ Naming convention compliance
✅ Token relationship verification

Accessibility validation:
✅ WCAG AA compliance checking
✅ Color blindness compatibility
✅ Minimum touch target sizes
✅ Typography readability scores

System coherence:
- Mathematical scale relationships
- Brand color harmony
- Typography hierarchy logic
- Component token alignment
- Cross-platform compatibility

​
Token Categories

  • Core Visual Tokens
  • Layout & Spacing
  • Interactive Elements
Fundamental design system elements:

Color System

Complete color architecture:
  • Primary brand colors
  • Secondary and accent colors
  • Semantic color meanings
  • Neutral color scales
  • Dark mode variations
  • Accessibility-compliant contrast pairs

Typography System

Text styling foundation:
  • Font family selections
  • Size and scale definitions
  • Weight and style variations
  • Line height relationships
  • Letter spacing values
  • Responsive typography scales

​
Advanced Token Management

1

Token Relationships

Create systematic token dependencies:
Diagram showing how design tokens relate to each other in a hierarchical system
Relationship types:
Alias tokens:
color-primary: "{color.brand.primary}"
color-error: "{color.semantic.error}"

Composite tokens:
button-primary-bg: "{color.brand.primary}"
button-primary-text: "{color.neutral.white}"
button-primary-border: "{color.brand.primary}"

Calculated tokens:
spacing-component: "calc({spacing.md} * 1.5)"
color-primary-hover: "hsl(from {color.brand.primary} h s calc(l * 0.9))"
2

Contextual Variations

Handle different contexts and themes:
  • Dark Mode
  • Platform Variations
  • Brand Variations
{
  "color": {
    "background": {
      "light": "#ffffff",
      "dark": "#0f0f0f"
    },
    "text": {
      "light": "#1f2937",
      "dark": "#f9fafb"
    }
  }
}
3

Token Documentation

Comprehensive usage guidelines:
Documentation elements:

Token descriptions:
- Purpose and intended usage
- Application examples
- Usage restrictions
- Accessibility considerations

Visual examples:
- Component usage demonstrations
- Color combination examples
- Typography scale applications
- Spacing relationship illustrations

Code examples:
- CSS implementation snippets
- Component library usage
- Platform-specific applications
- Integration with frameworks

​
Token Application in Figr

  • Automatic Application
  • Design System Evolution
  • Export Integration
How Figr uses your tokens:

Design Generation

AI applies tokens automatically:
  • Color selection from your palette
  • Typography scale adherence
  • Spacing system compliance
  • Component pattern consistency

Design Validation

Token compliance checking:
  • Off-brand color detection
  • Spacing inconsistency alerts
  • Typography scale violations
  • Accessibility compliance warnings

​
Token Best Practices

System Design

Create scalable token systems:✅ Use mathematical relationships for spacing scales ✅ Design color systems with accessibility in mind ✅ Create consistent naming conventions ✅ Plan for dark mode and themes from start ✅ Document usage guidelines thoroughly

Maintenance

Keep tokens healthy over time:✅ Regular token audits and cleanup ✅ Version control for token changes ✅ Impact assessment before updates ✅ Team training on token usage ✅ Automated validation in workflows

​
Troubleshooting Common Issues

Resolving import issues:
Common solutions:
- Validate JSON syntax before import
- Check file encoding (UTF-8 recommended)
- Verify token naming conventions
- Ensure color values use consistent formats
- Review file size limits and token count
Fixing token usage issues:
Resolution steps:
- Review token relationship definitions
- Check for naming conflicts
- Validate token value formats
- Verify platform-specific mappings
- Update component library connections
Optimizing token performance:
Optimization strategies:
- Reduce token count through consolidation
- Use efficient token formats
- Implement caching strategies
- Optimize token loading order
- Consider runtime vs build-time application

Automatic Design System Matching

Learn how Figr automatically matches your design patterns and suggests improvements to maintain consistency.Automatic Matching →
⌘I