Figma to Flutter

Figma to Flutter

Write down clean and better Flutter code from Figma design tokens and enrich nodes data in Flutter terminology.

160
Stars
6
Forks
11
Releases

Overview

Figma to Flutter MCP Server ingests Figma design data via MCP clients and returns structured guidance for building Flutter apps. It extracts node data including layout, styling, dimensions, colors, and text content from components and screens, and analyzes the hierarchy, child elements, and visual emphasis to inform widget selection. It provides guidance on Flutter widgets and implementation patterns, helping AI coding agents produce readable, modular Flutter code without generating actual files itself. For screens, it collects metadata such as device type, orientation, and dimensions, identifies sections (header, content, navigation), and suggests a Scaffold structure. It supports asset handling by outlining asset exports (images and SVGs) and notes considerations for SVG assets during export. The server is intended for use with Cursor or other MCP-enabled tools, with a local HTTP startup option, and requires a Figma API access token. It is described as a first release with room for improvement and emphasizes prompts quality to influence results.

Details

Owner
mhmzdev
Language
TypeScript
License
MIT License
Updated
2025-12-07

Features

Extract Figma node data

Extracts layout, styling, dimensions, colors, and text content from Figma nodes (components/widgets) for use by AI coding agents.

Analyze structure and hierarchy

Analyzes child elements, nested components, and visual importance to inform widget selection and layout strategies.

Flutter widget guidance

Provides recommended Flutter widgets and implementation patterns to translate designs into code-ready plans.

Screen metadata and scaffold guidance

Extracts device type, orientation, and dimensions; identifies sections and navigation to suggest Scaffold structures.

Asset handling and export hints

Outlines asset exports (images, SVGs) and pubspec considerations, including SVG export caveats.

Non-code MCP outputs

Delivers guidance rather than generated code files, optimizing prompt quality to improve AI results.

Local HTTP server for testing

Supports running an HTTP MCP endpoint for quick local testing of the server.

Audience

Flutter developersDevelopers using MCP with Cursor to translate Figma data into Flutter implementations.
UI/UX designersDesigners leveraging MCP outputs to inform AI-assisted Flutter code structure.

Tags

figmafluttermcp-serverui-design-to-codetheme-setupwidget-extractionscreen-metadataassets-exportcursorai-coding-agent