figma-flutter

This MCP server helps your AI tooling access and understand Figma design data in a Flutter-friendly context without generating full Flutter code files. It extracts components, widgets, and screen metadata from Figma and provides guidance on how to implement them in Flutter. Use it with Cursor or other MCP-enabled clients to prompt the AI coding agent with structured data about Figma nodes, layout, styling, and navigation, so the agent can suggest Flutter widget trees, scaffolding, and implementation patterns. The server does not output final Flutter files, but it helps you reason about structure, theming, typography, and screen scaffolding to speed up the development process.

To use it in your MCP client, configure an MCP entry that points to figma-flutter-mcp with your Figma API key. The agent will then pass the Figma data into prompts, and you can instruct it to generate Flutter code snippets, widget trees, or layout guidance based on the extracted information. If you’re testing locally, you can run the HTTP variant and point your MCP client to http://localhost:3333/mcp for a REST-like interface, or use stdio mode for direct tool calls in Cursor or similar environments.

Prerequisites:

• Node.js 18+ installed on your machine
• npm or pnpm for package installation
• A Figma API access token (generate from your Figma account)
• Flutter SDK if you plan to run and test Flutter code locally

Step-by-step installation:

1. Clone or set up the MCP project (if you already have the package, skip to step 3):

git clone <your-repo-url> figma-flutter-mcp
cd figma-flutter-mcp

2. Install dependencies:

npm install

3. Create a .env file (optional if you pass via config) with your Figma API key:

echo "FIGMA_API_KEY=your-figma-api-key" > .env

4. Start the server (HTTP for local testing):

npm run dev

5. Configure your MCP client (Cursor, etc.) to point to the server. Example for local HTTP:

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

6. If you prefer stdio mode (npx in the MCP client), ensure your client uses the command and arguments shown in the mcp_config above.

Notes and tips:

• The MCP exposes Figma data to assist AI agents in crafting Flutter-friendly guidance (widgets, themes, layout scaffolding). It does not generate full Flutter code files automatically.
• Ensure your Figma API key is kept secure. Use the FIGMA_API_KEY env var or embed the key in your MCP client configuration only in trusted environments.
• If you update the MCP package, reload or restart your MCP client to pick up new changes and avoid cache-related issues.
• When using the HTTP variant, you can test prompts and responses quickly, then switch back to stdio for tighter integration with Cursor-like workflows.
• The npm package name is figma-flutter-mcp; keep it up to date to benefit from improvements and fixes.