# mhmzdev/Figma-Flutter-MCP [Health: Active]

**Category:** 📐 Architecture & Design  
**Repository:** https://github.com/mhmzdev/Figma-Flutter-MCP  
**GitHub Stars:** 244  
**Views:** 4  
**Installs:** 0  
**Upvotes:** 0  
**Directory Page:** https://allmcps.com/mcp/mhmzdev-figma-flutter-mcp

## Description
Provide coding agents direct access to Figma data to help them write Flutter code for building apps including assets exports, widgets maintenance and full screens implementations.

## Tools
Capabilities this server exposes over MCP:

- **export_flutter_assets** — Export images from Figma nodes and set up Flutter assets directory with pubspec.yaml
- **export_svg_flutter_assets** — Export SVG assets from Figma nodes. Detects SVG content by analyzing vector percentage - nodes with >30% vector content are considered SVG assets. Handles nested GROUP/FRAME structures with mixed content.
- **analyze_figma_component** — Analyze a Figma component or component set to extract layout, styling, and structure information for Flutter widget creation. Use analyze_full_screen for complete screen layouts.
- **list_component_variants** — List all variants in a Figma component set to help with variant selection
- **inspect_component_structure** — Get a quick overview of component structure, children, and nested components. Use inspect_screen_structure for full screens.
- **generate_flutter_implementation** — Generate complete Flutter widget code using cached style definitions
- **style_library_status** — Get comprehensive status report of the cached style library
- **analyze_full_screen** — Analyze a complete Figma screen/frame to extract layout, sections, navigation, and structure information for Flutter screen implementation
- **inspect_screen_structure** — Get a quick overview of screen structure, sections, and navigation elements
- **extract_theme_colors** — Extract colors from a Figma theme frame containing color swatches with labels
- **inspect_theme_frame** — Inspect the structure of a theme frame to understand its contents before extraction
- **extract_theme_typography** — Extract typography styles from a Figma theme frame containing text samples with different styles
- **inspect_typography_frame** — Inspect the structure of a typography frame to understand its text contents before extraction

## Claude Desktop Quick Installation
Install path detected from listing signals. Uses `npx` (confidence: high):

```json
"mcpServers": {
  "figma-flutter-mcp": {
    "command": "npx",
    "args": ["-y","figma-flutter-mcp","--figma-api-key=YOUR-API-KEY","--stdio"],
    "env": {
      "FIGMA_API_KEY": ""
    }
  }
}
```

**Requires environment variables:** `FIGMA_API_KEY` — the values above are empty placeholders; fill in real credentials before running (see the repository for what each one is for).

## Documentation

## 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.

_Full upstream README: https://allmcps.com/mcp/mhmzdev-figma-flutter-mcp/readme_