Figma Flutter MCP

What mhmzdev/Figma-Flutter-MCP MCP server does

The mhmzdev/Figma-Flutter-MCP MCP server connects an MCP-compatible coding agent to Figma data so the agent can use design information while writing Flutter code. It focuses on translating Figma structure into implementation guidance rather than producing a complete application independently.

The server covers two main design targets:

• Components and component sets, including their layout, dimensions, colors, text, styling, children, nested components, and variants.
• Full screens and frames, including device metadata, orientation, dimensions, sections, navigation elements, and suggested Flutter screen structure.

It also supports extracting theme colors and typography from dedicated Figma frames, exporting image assets, exporting SVG assets, and generating Flutter widget code from cached style definitions.

How it works

The mhmzdev/Figma-Flutter-MCP MCP server retrieves Figma node details through the Figma API. Requests generally use a Figma link containing a file ID and node ID. An agent can inspect a structure first, perform a deeper analysis, extract theme information, export assets, and then use the returned data when creating Flutter code.

For component workflows, structure inspection provides a quick view before detailed component analysis. Component-set inspection can list available variants, which helps an agent choose named constructors or other implementation patterns. Screen workflows have equivalent inspection and analysis operations for sections, navigation, and layout.

Image assets can be exported during screen work or through a direct asset request. SVG export uses vector-content analysis: nodes with more than 30 percent vector content are treated as SVG assets. Nested groups and frames with mixed content are handled, but the project recommends separating SVG content into its own frame or group when bulk screen export produces unwanted results.

Setup and configuration

The npm package is figma-flutter-mcp. Running it locally requires Node.js 18 or newer, a Figma access token, an MCP-capable client, and the Flutter SDK. For stdio use, configure the package with the FIGMA_API_KEY value or pass the token through the documented command-line option. Cursor setup uses an MCP configuration with npx, the package name, the Figma token, and the --stdio option.

A local HTTP development mode is also documented. After installing dependencies, place FIGMA_API_KEY in a .env file and run the project's development script. The local MCP endpoint is http://localhost:3333/mcp.

Tools and capabilities

The mhmzdev/Figma-Flutter-MCP MCP server exposes tools for:

• Exporting regular and SVG Flutter assets, including asset-directory and pubspec.yaml setup for image exports.
• Inspecting and analyzing components, component sets, screens, and theme or typography frames.
• Listing component variants.
• Extracting theme colors and typography styles.
• Generating Flutter widget code using cached style definitions.
• Reporting the current style-library cache status.

Agents can use project-specific instruction files such as .cursor/rules/fluttering.mdc, CLAUDE.md, or GEMINI.md to provide additional implementation guidance.

Limitations and notes

The mhmzdev/Figma-Flutter-MCP MCP server depends on the quality and organization of the source Figma design. Auto layouts, frames, and consistent alignment give the agent clearer data than loosely grouped content. SVGs may need to be isolated before export because Figma vectors can include icons or pen-tool shapes that are not intended as standalone assets.

The README advises using the project for MVPs, experiments, and smaller explanatory tasks rather than scalable applications at its current stage. The quality of generated Flutter output also depends on the prompt and the project instructions supplied to the coding agent.