Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From figma2flutter
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.
npx claudepluginhub clearclown/figma2flutterHow this skill is triggered — by the user, by Claude, or both
Slash command
/figma2flutter:design-tokensThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Extract design tokens from Figma exports and generate type-safe Dart theme classes.
Extracts design tokens (colors, spacing, typography) and variables from Figma files via MCP server, generating CSS Custom Properties, TypeScript/JS objects, JSON, Tailwind config, and Style Dictionary formats for design systems.
Export Figma variables to design token files in DTCG, CSS custom properties, Tailwind v4/v3, SCSS, TypeScript, JSON, Style Dictionary, or Tokens Studio. Works on any Figma plan via Plugin API.
Implements design token systems with hierarchies, schemas, CSS variables, Style Dictionary pipelines, naming conventions, and multi-platform delivery for design systems.
Share bugs, ideas, or general feedback.
Extract design tokens from Figma exports and generate type-safe Dart theme classes.
| 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 |
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": {}
}
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 onesIR token keys are converted to Dart identifiers:
/ and . become camelCase boundaries: "primary/500" → primary500"Heading Large" → headingLarge// GENERATED by figma2flutter — DO NOT EDITabstract final class with static const Color fieldsstatic const TextStyle fieldstabechao 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.