What is required to run this skill?

You need a local instance of the Figma-to-Code REST API server running on your machine and a Figma URL for the design you wish to convert.

Does it generate production-ready code automatically?

The skill generates high-quality reference code and assets, then guides Claude in implementing them according to your specific project conventions and architecture.

How does it handle different device resolutions?

It analyzes your app's existing asset strategy and downloads only the required scales (like 2x or 3x) to match your target device requirements.

Can it help with visual regression?

Yes, it includes a workflow for creating Golden Tests and comparing real app screenshots against Figma exports to ensure visual parity.

Figma to Flutter Workflow

Name: Figma to Flutter Workflow
Author: prateekmedia

byprateekmedia

•

Mobile Development

Converts Figma designs into production-ready Flutter code with pixel-perfect accuracy and automated asset management.

This skill provides a comprehensive, automated workflow for transforming Figma design files into high-quality Flutter UI components. It handles the entire lifecycle of design implementation, including metadata extraction via a local API, intelligent multi-scale asset management, and reference code generation. By integrating golden tests and side-by-side screenshot comparisons, it ensures that the final Flutter implementation matches the original design specifications with absolute precision, making it indispensable for mobile developers working with complex design systems.

Key Features

01Automated extraction of Figma design metadata and layout values

02Intelligent multi-scale asset downloading (2x, 3x, 4x) based on project structure

03Reference code generation for colors, text styles, and widget hierarchies

04Automated Golden Test creation for visual regression testing

05Iterative screenshot comparison workflow for pixel-perfect refinement

062 GitHub stars

Use Cases

01Rapidly implementing complex UI screens from Figma design links

02Automating asset management and scale resolution for Flutter projects

03Ensuring high-fidelity UI implementation through automated visual testing

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add prateekmedia/agent-skills figma-to-flutter

For use in Claude.ai and ChatGPT

Download Skill