Figma Flutter MCP Server

Figma design data integration for AI-driven Flutter code generation and implementation.

Data last scanned today · Reviewed yesterday

34★ 239TypeScriptMIT

Overview

Figma Flutter MCP Server enables AI coding agents, such as those used in Cursor, to bridge the gap between design and implementation. By connecting directly to Figma files, the server allows developers to programmatically extract components, design data, and assets to translate them into Flutter-compatible code structures.

Our verdict

This server carries a high risk level with a security score of 19/100, primarily due to the total absence of authentication methods and the lack of a read-only mode. Because anyone with access to the configuration can use the tool and the system lacks secure credential management like OAuth, it is not recommended for production environments or projects handling sensitive design intellectual property.

Supports multi-language documentation including Korean, Japanese, and Chinese
Small footprint with only 7 direct dependencies
Open source project under the permissive MIT license
Includes video walkthroughs for implementation workflows

Completely lacks authentication, allowing unauthorized access if configured
No read-only mode to restrict potential write operations
Community-maintained rather than supported by an official vendor
No official homepage link provided

Setup

Claude Desktop

{
  "mcpServers": {
    "figma-flutter-mcp": {
      "args": [
        "-y",
        "figma-flutter-mcp"
      ],
      "command": "npx"
    }
  }
}

Paste into ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows), then restart Claude Desktop. Some servers require API keys or tokens as environment variables — check the project's README and add an "env" object if needed.

No read-only mode — running this grants full read/write access.
No built-in authentication — anyone with access to this config can invoke every tool it exposes.

Compatibility

Client	Local	Docker	Remote	Read-only
Claude Desktop
Cursor
VS Code
Windsurf
ChatGPT

Frequently asked questions

›Does this MCP server automatically generate Flutter code files?

No, the server does not generate actual Flutter code files or screen files. It functions by extracting Figma node data and metadata to provide guidance and suggest implementation patterns for your AI coding agent.

›What are the core requirements to run this server?

You need Node.js 18 or higher, a Figma personal access token, the Flutter SDK, and an MCP-compatible client such as Cursor.

›How do I configure the server within Cursor?

You can add the server by opening the MCP settings in Cursor and adding the provided JSON configuration block containing your Figma API key. Specific command syntax is provided for both MacOS/Linux and Windows environments.

›Can I test the server locally without using the stdio command?

Yes, you can run the server via HTTP by cloning the repository, creating a .env file with your Figma API key, and running the local development command.

›What should I do if the server reports issues like 'Not being able to use tool call'?

Ensure you are using the latest version of the npm package. Old cached versions of the server can cause errors, so keeping the package updated is recommended.