Verified

Figma Context MCP Server

Figma design files and metadata for AI coding agents to implement UI components.

Data last scanned yesterday · Reviewed 2 months ago

55★ 15,544TypeScriptMIT

Overview

Figma Context MCP Server facilitates the integration of Figma design files directly into AI-powered coding tools like Cursor. By providing the model with simplified layout and styling metadata, it enables agents to implement designs with higher accuracy compared to visual screenshot references. Users set up the server within their IDE, supplying a Figma access token to allow the agent to fetch specific file, frame, or group data. The server translates Figma API responses into optimized context, ensuring the AI receives only the most relevant design properties needed for one-shot component generation.

Our verdict

With a security score of 55/100, this tool carries a high risk profile that necessitates caution. The primary security concern is that every installation is granted full write access without a read-only mode, and the lack of OAuth support means handling personal API tokens directly. Given it is a community-maintained project rather than an official vendor release, users should be prepared to handle their own credential management securely.

Reduces token usage by simplifying complex Figma API responses
Optimized specifically for one-shot UI generation in Cursor
Small dependency footprint with only 16 direct packages
Significant community activity with over 15,000 GitHub stars

Installation grants full write access without read-only restrictions
No detected OAuth support for delegated authentication
Community-maintained project lacking official vendor backing

Setup

Claude Desktop

{
  "mcpServers": {
    "figma-context-mcp": {
      "args": [
        "-y",
        "figma-developer-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
ChatGPT
Claude Desktop
Cursor
VS Code
Windsurf

Frequently asked questions

›What is required to authenticate this server with Figma?

You must create and provide a personal Figma API access token to the server configuration.

›How does the server handle Figma API data?

The server simplifies and translates Figma API responses to provide only the most relevant layout and styling information to the AI model.

›Is this server designed for specific AI editors?

The server is specifically designed for use with Cursor, though it functions as a general Model Context Protocol server.

›How do I add this to my MCP configuration file?

You must add the server definition to your MCP configuration file using npx with your Figma API key as an argument, or by setting the FIGMA_API_KEY environment variable.