Awesome MCP › Design & Visualization

mhmzdev/figma-flutter-mcp

⭐ 244 TypeScript repository created 2025-08-20

Figma Flutter MCP is a Model Context Protocol server, published on npm as figma-flutter-mcp, that gives AI coding agents access to Figma design data so they can implement the design in Flutter. It requires a Figma personal access token and is configured in a client such as Cursor with an npx command and a --figma-api-key argument over stdio; for local work the repository can be cloned and run as an HTTP server that the client reaches at a /mcp endpoint. The server does not generate Flutter files itself. For components and widgets it extracts node data such as layout, styling, dimensions, colors and text content, analyses the structure of child elements and nested components, and returns suggestions for matching Flutter widgets and implementation patterns. For screens it extracts metadata such as device type, orientation and dimensions, identifies sections including header, footer, navigation and content areas, analyses navigation elements such as tab bars, app bars and drawers, and returns guidance on the Scaffold structure. Image assets are exported automatically during screen generation and placed under assets/ with the matching pubspec.yaml entries; SVG assets are exported by explicit request and may fail when the source vectors are ungrouped or scrambled. The documented workflow starts by extracting theme colors and typography from dedicated Figma frames, then generating individual widgets from Figma components (variants map onto named constructors), then whole screens. Because the output is guidance rather than code, the README recommends pairing it with agent instruction files such as Cursor rules, CLAUDE.md or GEMINI.md. The README is also available in Korean, Japanese and both Chinese scripts. Licensed under MIT.

https://github.com/mhmzdev/figma-flutter-mcp

mcp-serverfigmaflutterdesign-to-codetypescriptcursoruicode-generation