An MCP server that bridges Figma designs with Flutter code by extracting detailed design data, components, screens, and assets from Figma files to help AI agents generate higher-quality Flutter implementations.

Installation

NPX (MacOS/Linux)

npx -y figma-flutter-mcp --figma-api-key=YOUR-API-KEY --stdio

NPX (Windows)

cmd /c npx -y figma-flutter-mcp --figma-api-key=YOUR-API-KEY --stdio

Local Development

git clone <your-repo-url> figma-flutter-mcp
cd figma-flutter-mcp
npm install
echo "FIGMA_API_KEY=your-figma-api-key-here" > .env
npm run dev

Configuration

Cursor (MacOS/Linux)

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

Cursor (Windows)

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

Local Testing

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

Features

• Figma node data extraction: layout, styling, dimensions, colors, text content
• Structure analysis: child elements, nested components, visual hierarchy
• Flutter widget recommendations and implementation patterns
• Screen metadata extraction: device type, orientation, dimensions
• Screen section identification: header, footer, navigation, content areas
• Navigation element analysis: tab bars, app bars, drawers
• Scaffold recommendations for Flutter screen structure
• Image export (.png, .jpeg, .jpg) to assets/ folder
• SVG asset export from Figma vector elements
• Theme and typography extraction from Figma frames

Environment Variables

Required

• FIGMA_API_KEY - Figma personal access token for API authentication

Usage Examples

Setup flutter theme from <figma_link> including Colors and Typography

Create this widget in flutter from figma COMPONENT link: <figma_link>, use named constructors for variants and break the files in smaller parts for code readability

Design this intro screen from the figma link <figma_link>, ensure the code is readable by having smaller files

Export this image asset from figma link: <figma_link>

Export this as an SVG asset from Figma link: <figma_link>

Notes

Requires a Figma API Key (personal access token). Best suited for MVPs and small projects, not for scalable applications. High-quality Figma designs with auto layouts and frames yield better results. Heavy usage may trigger Figma rate limits. The server includes retry logic with delays, but does not bypass Figma's rate limits.