Log inSubmit server
Figma Flutter MCP logo

Figma Flutter MCP

by mhmzdev

Connects coding agents to Figma for Flutter asset export, design analysis, theme extraction, and widget code generation.

InstallRepositoryWebsite
Full README Compare alternatives Embed widget Claim this listing

Install Figma Flutter MCP

Pick your client, then add it in one click or paste the config.

STDIONode.js
~/Library/Application Support/Claude/claude_desktop_config.json
claude_desktop_config.json
{
  "mcpServers": {
    "mhmzdev-figma-flutter-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "figma-flutter-mcp"
      ],
      "env": {
        "FIGMA_API_KEY": "YOUR_VALUE_HERE"
      }
    }
  }
}

Settings → Developer → Edit Config, merge this into mcpServers, then fully quit and reopen Claude Desktop.

Values are written into the snippet above so you can paste it as is. They never leave your browser.

We couldn’t confirm it starts correctly

We ran the install command but it didn't respond within our test window — this can mean a slow first-time install rather than a real problem.

npx -y figma-flutter-mcp

No response to initialize.

This is an experimental automated check and can have false negatives — missing environment variables, a slow cold install, etc. It doesn’t necessarily mean something’s wrong. Last checked 27d ago.

Overview

The mhmzdev/Figma-Flutter-MCP MCP server gives coding agents access to Figma file and node data for Flutter development. It analyzes components, screens, themes, typography, and layouts, and can export image or SVG assets into a Flutter project. The server runs through npm with a Figma access token over stdio, or locally over HTTP for testing. Reach for it when implementing Flutter interfaces from structured Figma designs, especially MVPs and smaller projects.

Use cases

  • Generate Flutter widgets from Figma components
  • Analyze full Figma screens before implementation
  • Export Figma images and SVGs into Flutter assets
  • Extract colors and typography for a Flutter theme

Key features

  • Figma component and screen analysis
  • Flutter widget code generation
  • Image and SVG asset export
  • Theme color and typography extraction
  • Component variant inspection
  • Cached style library status

Tools13

What Figma Flutter MCP lets your agent do. Expand a tool for its parameters.

Verified live~2.1k tokens of context

Security & health

What it can reach and how reliably it runs — from our own checks, not the maintainer’s claims.

ActiveLast checked Today

Recent health check succeeded.

18/19 checks healthy over the last 78d

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 14d ago via OSV.dev · figma-flutter-mcp (npm)

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars241Stargazers on the source repository.
npm downloads266Package downloads in the last 30 days.
Last commit8mo agoMost recent push to the default branch.
Install checkInconclusiveDidn't respond in our test window — often a slow first install.
Tools exposed13Callable tools this server registers over MCP.
Directory activity5 viewsConfig copies, upvotes, and views on AllMCPs.

How Figma Flutter MCP works

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.

Read the full README View source on GitHub

Reviews

No reviews yet — be the first to share how it worked for you.

Frequently Asked Questions about Figma Flutter MCP

Install and run the `figma-flutter-mcp` npm package with Node.js 18 or newer. The documented Cursor setup uses `npx -y figma-flutter-mcp --figma-api-key=YOUR-API-KEY --stdio`; replace the placeholder with your Figma access token.

Yes.

It requires a Figma access token, supplied through `FIGMA_API_KEY` or the documented command-line option.

Yes. Its SVG export tool identifies nodes with more than 30 percent vector content as SVG assets and supports nested group and frame structures with mixed content.

Related MCP servers

All in Architecture & Design All alternatives
Add a badge to your READMEShow it’s listed — live SVG, Markdown or HTML.

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:
Live Dynamic SVG PreviewFigma Flutter MCP AllMCPs Directory Badge
Markdown (GitHub README)
[![AllMCPs](https://allmcps.com/api/badge/mhmzdev-figma-flutter-mcp?style=directory)](https://allmcps.com/mcp/mhmzdev-figma-flutter-mcp)
HTML Embed
<a href="https://allmcps.com/mcp/mhmzdev-figma-flutter-mcp"><img src="https://allmcps.com/api/badge/mhmzdev-figma-flutter-mcp?style=directory" alt="Figma Flutter MCP on AllMCPs" /></a>