figma-to-flutter-widget

Convert Figma specs into Flutter widgets. Use when implementing new UI from Figma and the project has an existing design system.

Envy-7z 0 Updated 3mo ago

Install

npx skillscat add envy-7z/mobile-agent-skillpack/figma-to-flutter-widget

Install via the SkillsCat registry.

SKILL.md

Figma → Flutter Widget

Rules

Match spacing, typography, colors, and layout to Figma.
Reuse existing components/styles/constants whenever possible.
Do NOT introduce new architecture/state management unless asked.
Include states: loading/empty/error if relevant.

Workflow

Read Figma spec (sizes, spacing, colors, typography).
Identify existing design tokens/components to reuse.
Implement widgets with minimal, clean structure.
If interactions needed, follow existing patterns (BLoC/Cubit, etc.).
Provide verification notes (what to check visually).

Output format

Implementation notes
Files created/updated
Visual checklist for QA

Categories

Code Gen Design Refactoring UI Components