Overview

Figma to Flutter MCP Server converts Figma design tokens and component metadata into Flutter-friendly, enriched guidance that helps AI coding agents produce clean, idiomatic Dart and Flutter code. Instead of producing finished files, this MCP (Model Context Protocol) server extracts layout, styling, color, typography, and component structure from Figma and translates that data into Flutter terminology — e.g., ThemeData, TextStyle, SizedBox, Container, and recommended widget hierarchies.

This is useful when you want to connect a coding agent (like Cursor or another MCP-compatible assistant) to real design artifacts and get context-aware suggestions. The server reduces the friction between design and implementation by providing clarified tokens, suggested widget mappings, scaffold recommendations, and navigation hints so developers and AI agents can generate consistent, production-ready Flutter UI code faster.

Features

Extracts Figma node data: layout, dimensions, colors, typography, and text content.
Translates design tokens into Flutter terminology (ThemeData, TextStyle, Material components).
Analyzes component structure and nesting to recommend widget hierarchies.
Detects screen regions and suggests Scaffold, AppBar, BottomNavigationBar patterns.
Returns structured JSON contexts optimized for AI agents (MCP protocol).
Supports stdio integration for direct MCP clients and an HTTP dev endpoint for local testing.
Cross-platform client configuration snippets for Cursor and other MCP hosts.

How it works

The server calls the Figma API using your personal access token and fetches documents, nodes, and style definitions.
Extractors process components and screens to build enriched design-token objects: colors, spacing, typography, and layout hints.
Output is framed in Flutter-friendly terms (Dart types, widget names and attributes) and served via MCP so an AI agent can load it as model context when generating code.

Note: the MCP provides guidance and enriched context for code generation — it does not write filesystem Dart files on its own.

Installation / Configuration

Prerequisites:

Node.js 18+
Figma personal access token
Optional: Cursor or any MCP-capable IDE
Optional: Flutter SDK for running generated code locally

Install and run locally:

# Clone and setup
git clone https://github.com/mhmzdev/figma-flutter-mcp
cd figma-flutter-mcp
npm install

# create .env with your Figma API key
echo "FIGMA_API_KEY=your-figma-api-key-here" > .env

# start HTTP dev server (local testing)
npm run dev

Cursor MCP configuration (Mac/Linux):

{
  "mcpServers": {
    "Figma Flutter MCP": {
      "command": "npx",
      "args": ["-y", "figma-flutter-mcp", "--figma-api-key=YOUR-API-KEY", "--stdio"]
    }
  }
}

Cursor MCP configuration (Windows):

{
  "mcpServers": {
    "Figma Flutter MCP": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "figma-flutter-mcp", "--figma-api-key=YOUR-API-KEY", "--stdio"]
    }
  }
}

Or point to local HTTP server in MCP client:

{
  "mcpServers": {
    "local-figma-flutter": {
      "url": "http://localhost:3333/mcp"
    }
  }
}

Available Resources

GitHub repository: https://github.com/mhmzdev/figma-flutter-mcp
Figma personal access tokens: https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens
MCP / Model Context Protocol: https://modelcontextprotocol.io/
Cursor AI IDE (example MCP client): https://cursor.sh

Use Cases

Convert a Figma design system into a Flutter ThemeData proposal: the MCP returns color palettes, elevation hints, and typography mappings that an AI agent can use to generate a Dart theme class.
Turn a Figma screen into a scaffold outline: extract AppBar/title, bottom navigation, and main content areas with suggested Flutter widgets (ListView, GridView, Column + Expanded).
Component-to-widget guidance: feed a Figma component node to the MCP and receive recommended widget tree, sizing constraints, and style propagation notes so an agent can implement reusable widgets.

Example prompt an AI agent might use with this MCP data:

“Given the provided Theme tokens and component mappings, generate a Dart class MyAppTheme with color constants and TextStyle definitions. Then scaffold HomeScreen using the suggested AppBar and BottomNavigationBar patterns.”

Limitations & Notes

The MCP enriches and translates Figma data but does not emit complete file artifacts — downstream code generation is performed by the AI agent using the supplied context.
Complex vector/SVG assets may require additional handling; some assets can’t be directly converted into Flutter-ready widgets.
Keep your Figma token secure (use environment variables or your MCP client’s secret storage).

For contribution guidelines, issues, and localization, see the repository on GitHub.

Figma to Flutter MCP Server — Design Token Enrichment