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

Token Import

Bring your existing design tokens into Figr:

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

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"
    }
  }
}

{
  "typography": {
    "font-family": {
      "sans": "Inter, system-ui, sans-serif",
      "serif": "Georgia, serif",
      "mono": "JetBrains Mono, monospace"
    },
    "font-size": {
      "xs": "0.75rem",
      "sm": "0.875rem",
      "base": "1rem",
      "lg": "1.125rem",
      "xl": "1.25rem",
      "2xl": "1.5rem",
      "3xl": "1.875rem"
    },
    "font-weight": {
      "normal": "400",
      "medium": "500",
      "semibold": "600",
      "bold": "700"
    }
  }
}

{
  "spacing": {
    "xs": "0.25rem",
    "sm": "0.5rem",
    "md": "1rem",
    "lg": "1.5rem",
    "xl": "2rem",
    "2xl": "3rem",
    "3xl": "4rem"
  },
  "border-radius": {
    "none": "0",
    "sm": "0.125rem",
    "md": "0.375rem",
    "lg": "0.5rem",
    "xl": "0.75rem",
    "full": "9999px"
  }
}

Token Validation

Ensure token quality and consistency:

Automatic Validation

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

Consistency Analysis

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

Structural design elements:

Spacing Scale

Spacing system design:
Base unit: 4px (0.25rem)
Scale progression: Linear or geometric
Component spacing: Defined relationships
Layout margins: Consistent application
Responsive adjustments: Breakpoint-specific values

Layout Grids

Grid system tokens:
Column counts: 12, 16, or custom
Gutter widths: Responsive values
Container max-widths: Breakpoint definitions
Margin calculations: Auto or fixed
Nested grid behaviors: Inheritance rules

Border & Shadow

Surface design tokens:
Border radius: Scale from subtle to rounded
Border widths: Consistent stroke weights
Shadow depths: Elevation system
Opacity levels: Transparency standards
Blur values: Effect intensity scale

Component-specific tokens:

Button tokens:
- Height variations (sm, md, lg)
- Padding specifications
- Border radius applications
- Color state definitions
- Typography scale assignments

Form element tokens:
- Input field sizing
- Border and focus states
- Label positioning
- Error state styling
- Placeholder text appearance

Navigation tokens:
- Menu item spacing
- Active state indicators
- Hover effect definitions
- Breadcrumb separators
- Mobile navigation patterns

Advanced Token Management

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))"

Contextual Variations

Handle different contexts and themes:

Dark Mode
Platform Variations
Brand Variations

{
  "color": {
    "background": {
      "light": "#ffffff",
      "dark": "#0f0f0f"
    },
    "text": {
      "light": "#1f2937",
      "dark": "#f9fafb"
    }
  }
}

{
  "component": {
    "button": {
      "height": {
        "web": "2.5rem",
        "mobile": "3rem",
        "desktop": "2.25rem"
      }
    }
  }
}

{
  "theme": {
    "consumer": {
      "primary": "#6366f1",
      "radius": "0.5rem"
    },
    "enterprise": {
      "primary": "#1f2937",
      "radius": "0.25rem"
    }
  }
}

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 updates propagate automatically:

Interface showing how token updates automatically update existing designs

Update workflows:

Global updates:
Import new token values
Review impact assessment
Approve changes
Automatic design updates
Team notification

Gradual migration:
Add new tokens alongside old
Update designs incrementally
Deprecate old tokens
Remove unused tokens
Clean up token library

Tokens flow to development:

Export formats:

CSS custom properties:
:root {
  --color-primary: #6366f1;
  --spacing-md: 1rem;
  --font-size-lg: 1.125rem;
}

JavaScript tokens:
export const tokens = {
  color: { primary: '#6366f1' },
  spacing: { md: '1rem' },
  fontSize: { lg: '1.125rem' }
};

Platform-specific:
- iOS: Swift color extensions
- Android: XML color resources
- React Native: StyleSheet objects
- Flutter: Dart theme definitions

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

Token Import Problems

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

Inconsistent Application

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

Performance Impact

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 →

How to Begin?

Canvas

Inputs and Research

Product Intelligence

Export and Share

Security & Legal

Setting Tokens

Setting Tokens

Token Configuration Process

Token Categories

Color System

Typography System

Advanced Token Management

Token Application in Figr

Design Generation

Design Validation

Token Best Practices

System Design

Maintenance

Troubleshooting Common Issues

Automatic Design System Matching

​Setting Tokens

​Token Configuration Process

​Token Categories

Color System

Typography System

​Advanced Token Management

​Token Application in Figr

Design Generation

Design Validation

​Token Best Practices

System Design

Maintenance

​Troubleshooting Common Issues

Automatic Design System Matching

Setting Tokens

Token Configuration Process

Token Categories

Advanced Token Management

Token Application in Figr

Token Best Practices

Troubleshooting Common Issues