| 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.
