figma-to-flutter

Convert Figma designs into Flutter code with Flutter_Base architecture and token mapping.

1|1|Updated Jun 21, 2025

Search Tags:#code generation #figma #flutter #ui development #design to code #flutter_base

Ready to run

npx skills add https://github.com/AdhamHashim/Flutter_Base --skill figma-to-flutter

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: figma-to-flutter
Source: https://github.com/AdhamHashim/Flutter_Base/tree/main/.claude/skills/figma-to-flutter
Command: npx skills add https://github.com/AdhamHashim/Flutter_Base --skill figma-to-flutter

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automates the conversion of Figma designs into Flutter code, ensuring adherence to the Flutter_Base architecture, design tokens, and coding standards.

Core Features & Use Cases

Design to Code Conversion: Translates Figma nodes (dimensions, colors, text styles, layout) into corresponding Flutter widgets and properties.
Architecture Adherence: Maps Figma elements to Flutter_Base components like AppSize, AppColors, DefaultScaffold, DefaultButton, etc.
Safety Checks: Includes checks for screen-level padding, RTL verification, and icon background handling to ensure accurate and robust code generation.
Use Case: A designer provides a Figma screen. This Skill converts the design into a functional Flutter widget tree, respecting the project's established design system and architecture.

Quick Start

Use the figma-to-flutter skill to convert the Figma node with ID '12345' into Flutter code.

Frequently Asked Questions about figma-to-flutter

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I convert Figma designs to Flutter code?▼

Figma to Flutter code conversion translates Figma nodes into Flutter widgets by extracting dimensions, colors, and text styles, mapping them to a Flutter architecture with safety checks for accurate UI generation.

Does Figma to Flutter conversion support custom design tokens?▼

Figma to Flutter conversion supports design tokens by mapping Figma elements to specific project components like AppColors and AppSize, ensuring the generated code respects your established design system.

How to generate Flutter widgets from a Figma node ID?▼

Generating Flutter widgets from a Figma node ID involves extracting node information, scanning types and text nodes, then fetching styles to construct a functional Flutter widget tree with pixel accuracy.

What safety checks are included in Figma to Flutter code generation?▼

Figma to Flutter code generation includes safety checks for screen-level padding, RTL verification, and icon background handling to ensure robust and accurate Flutter UI output.

Can I use Figma to Flutter conversion with an existing Flutter_Base architecture?▼

Figma to Flutter conversion adheres to the Flutter_Base architecture by mapping design elements to established components like DefaultScaffold and DefaultButton, integrating seamlessly with your existing project structure.

Why does Figma to Flutter conversion require fetching node details and styles?▼

Fetching node details and styles during Figma to Flutter conversion ensures pixel accuracy by comprehensively verifying colors, fonts, spacing, and widget mapping against the original Figma design.