Create a three-tier token hierarchy in Figma Variables:

Primitive → Semantic → Component
#2563EB → color.brand.primary → button.background.default

Set up collections: Primitives, Semantic, Component with modes for light, dark, brand-a, brand-b.

Progress:

• Define primitive tokens (raw values)
• Create semantic tokens (purpose-based)
• Build component tokens (contextual)
• Configure Figma Variables with modes
• Set up Token Studio plugin
• Export to Style Dictionary
• Sync with development via GitHub

1. Primitive Tokens

Raw design values without context:

Colors:

primitive.blue.50: #EFF6FF
primitive.blue.500: #3B82F6
primitive.blue.900: #1E3A8A
primitive.gray.100: #F3F4F6
primitive.gray.900: #111827

Spacing:

primitive.space.1: 4px
primitive.space.4: 16px
primitive.space.8: 32px

Typography:

primitive.font.size.sm: 14px
primitive.font.size.lg: 18px
primitive.font.family.sans: "Inter"

2. Semantic Tokens

Purpose-driven, reference primitives:

Color System:

color.background.primary: primitive.gray.50
color.background.inverse: primitive.gray.900
color.text.primary: primitive.gray.900
color.text.inverse: primitive.gray.50
color.brand.primary: primitive.blue.500
color.brand.secondary: primitive.blue.100
color.feedback.success: primitive.green.500
color.feedback.error: primitive.red.500

Spacing System:

space.component.xs: primitive.space.1
space.component.sm: primitive.space.2
space.layout.section: primitive.space.12

3. Component Tokens

Contextual references to semantic tokens:

button.background.primary.default: color.brand.primary
button.background.primary.hover: color.brand.600
button.background.secondary.default: color.background.primary
button.text.primary.default: color.text.inverse
button.padding.horizontal: space.component.md
button.padding.vertical: space.component.sm

4. Figma Variables Setup

Collections Structure:

• Primitives (no modes - static values)
• Semantic (modes: light, dark, brand-a, brand-b)
• Component (modes: light, dark, brand-a, brand-b)

Mode Configuration:

Semantic Collection:
├── light (default)
├── dark
├── brand-a
└── brand-b

Component Collection:
├── light (default)
├── dark  
├── brand-a
└── brand-b

5. Token Studio Integration

Plugin Setup:

1. Install Token Studio for Figma
2. Connect to GitHub repository
3. Configure JSON structure:

JSON
{
  "primitive": {
    "color": {
      "blue": {
        "500": { "value": "#3B82F6", "type": "color" }
      }
    }
  },
  "semantic": {
    "color": {
      "brand": {
        "primary": { "value": "{primitive.color.blue.500}", "type": "color" }
      }
    }
  }
}

Example 1: Multi-Brand Button System Input: Need buttons that work across 3 different brand identities Output:

// Primitive
primitive.blue.500: #3B82F6
primitive.red.500: #EF4444
primitive.purple.500: #8B5CF6

// Semantic (varies by brand mode)
color.brand.primary: 
  - brand-a: primitive.blue.500
  - brand-b: primitive.red.500  
  - brand-c: primitive.purple.500

// Component
button.background.primary.default: color.brand.primary

Example 2: Dark Mode Typography Input: Text tokens that adapt to light/dark themes Output:

// Semantic tokens with mode variants
color.text.primary:
  - light: primitive.gray.900
  - dark: primitive.gray.50
  
color.text.secondary:
  - light: primitive.gray.600
  - dark: primitive.gray.400

// Component usage
card.text.heading: color.text.primary
card.text.body: color.text.secondary