figma-to-flutter
CommunityFigma to Flutter code conversion
AuthorAdhamHashim
Version1.0.0
Installs0
System Documentation
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.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: figma-to-flutter Download link: https://github.com/AdhamHashim/Flutter_Base/archive/main.zip#figma-to-flutter Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.