design-tokens

name	design-tokens
description	This skill should be used when the user asks to "extract tokens", "update theme", "sync design tokens", "generate dart theme", "figma tokens to dart", "create color palette", "typography scale", or mentions design token JSON, ThemeData, ThemeExtension, DesignTokens class, or updating the Dart theme from Figma exports.
version	0.1.0

Design Token Management

Extract design tokens from Figma exports and generate type-safe Dart theme classes.

Token Categories

Category	Figma Source	Dart Output
Colors	Fill styles, color variables	Color constants
Typography	Text styles	TextStyle definitions
Spacing	Auto-layout gaps, padding	double constants
Radii	Corner radius values	BorderRadius factories
Shadows	Drop shadow effects	BoxShadow lists

Token JSON Format (from IR)

Tokens are embedded in the IR document under tokens:

{
  "colors": { "primary/500": { "r": 0.23, "g": 0.51, "b": 0.96, "a": 1 } },
  "typography": { "heading/lg": { "fontFamily": "Noto Sans JP", "fontWeight": 700, "fontSize": 24, ... } },
  "spacing": { "spacing/8": 8, "spacing/16": 16 },
  "radii": { "radius/sm": 4, "radius/md": 8 },
  "shadows": {}
}

Configuration

In figma2flutter.config.json:

• tokenConfig.colorClassName — Class name for color tokens (e.g., "DesignTokens" for tabechao, "AppColors" for standalone)
• tokenConfig.generateTokenFiles — Set false to reference existing token classes instead of generating new ones

Token Naming Convention

IR token keys are converted to Dart identifiers:

• / and . become camelCase boundaries: "primary/500" → primary500
• Spaces become camelCase: "Heading Large" → headingLarge

Generation Rules

• All generated files include // GENERATED by figma2flutter — DO NOT EDIT
• Regeneration replaces the entire file (no partial updates)
• Colors use abstract final class with static const Color fields
• Typography uses static const TextStyle fields

Integration with tabechao

tabechao already has DesignTokens class at lib/core/theme/design_tokens.dart. The pipeline config uses generateTokenFiles: false and references the existing class.

For token format details, consult references/token-format.md. For Dart ThemeData patterns, consult references/dart-theme-patterns.md.