Help us improve
Share bugs, ideas, or general feedback.
From figma2flutter
This skill should be used when the user asks to "convert figma to flutter", "generate flutter code from figma", "figma to dart", "convert design to widget", "generate widget from design", "figma codegen", "IR to flutter", or mentions converting Figma designs, nodes, or components into Flutter widgets. Provides the complete pipeline for transforming Figma plugin IR output into production-quality Flutter code.
npx claudepluginhub clearclown/figma2flutterHow this skill is triggered — by the user, by Claude, or both
Slash command
/figma2flutter:figma2flutterThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Convert Figma design intermediate representation (IR) JSON into idiomatic Flutter widget code following a test-driven development pipeline.
Guides expert Flutter 3.x and Dart 3.x development for multi-platform apps, including advanced widgets, state management with Riverpod/Bloc/GetX, performance optimization, and architecture patterns.
Provides expert Flutter/Dart patterns for cross-platform mobile apps including feature-first project structure, const widget best practices, and Riverpod/Bloc state management.
Provides Flutter patterns for widget architecture, state management, Impeller renderer, and platform-adaptive design, avoiding common mistakes.
Share bugs, ideas, or general feedback.
Convert Figma design intermediate representation (IR) JSON into idiomatic Flutter widget code following a test-driven development pipeline.
The Figma plugin emits a JSON IR with this structure:
{
"version": "1.0.0",
"metadata": { "figmaFileKey": "...", "figmaNodeId": "...", "figmaNodeName": "..." },
"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": {}, "radii": {}, "shadows": {}
},
"root": { "type": "FRAME", "layout": {...}, "style": {...}, "children": [...] }
}
All style values in the node tree are token references (string keys), never raw values.
For the full IR schema, consult references/ir-schema.md.
| Figma Node | Flutter Widget | Condition |
|---|---|---|
| FRAME + auto-layout vertical | Column | No style → direct, with style → Container wrap |
| FRAME + auto-layout horizontal | Row | Same as above |
| FRAME + wrap=true | Wrap | |
| FRAME + layout mode=NONE | Stack + Positioned | |
| TEXT | Text / RichText | Mixed segments → RichText |
| RECTANGLE | Container + BoxDecoration | |
| IMAGE | ClipRRect + Image.asset | |
| COMPONENT | StatelessWidget class | |
| INSTANCE | Component class reference | Overrides → constructor params |
For the complete mapping table, consult references/widget-mapping.md.
Every generated Dart file MUST reference design tokens. Hard-coded values are forbidden.
// CORRECT
color: AppColors.primary500,
// FORBIDDEN
color: Color(0xFF3B82F6),
The figma2flutter.config.json at the project root specifies:
targetFlutterProject — Path to the Flutter projecttokenConfig.colorClassName — Token class name (e.g., "DesignTokens" for tabechao)tokenConfig.generateTokenFiles — Whether to generate token Dart filestest/golden/generated/<widget>_golden_test.dartlib/generated/widgets/<widget>.dartflutter test --update-goldens to capture baselinenpm run build # esbuild → dist/main.js
npm test # vitest: IR → Dart compilation tests
references/ir-schema.md — Complete IR JSON schema with all node typesreferences/widget-mapping.md — Exhaustive Figma→Flutter widget mappingexamples/sample-ir.json — Example Figma IR JSONexamples/sample-widget.dart — Expected Flutter output