Figma Context

Bridges Figma design data with AI coding tools to enable design-to-code workflows.

typescript

18

GitHub Stars

typescript

Language

6 months ago

First Indexed

2 months ago

Catalog Refreshed

Documentation & install

Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

{
  "mcpServers": {
    "1yhy-figma-context-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@yhy2001/figma-mcp-server",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "YOUR_FIGMA_API_KEY"
      }
    }
  }
}

Figma Context MCP is an MCP server that connects Figma design data with AI coding assistants to generate accurate code from design data. It enables seamless design-to-code workflows by providing structured design data, layout inference, and tokenized resources to AI tools, improving first-pass code quality and reducing manual iteration.

How to use

To use this MCP server with an MCP client, run the server in stdio mode using the command provided in the configuration snippet. The Figma API key must be supplied via an environment variable. Once the server is running, connect your MCP client (e.g., Cursor, Windsurf, or Cline) to the standard input/output streams to exchange design data and prompts.

How to install

Prerequisites: install Node.js version 18 or higher and a functioning JavaScript runtime environment.

Install methods (select one):

# Via Smithery (Recommended)
npx -y @smithery/cli install @1yhy/Figma-Context-MCP --client claude

# Via npm
npm install -g @yhy2001/figma-mcp-server

# From Source
git clone https://github.com/1yhy/Figma-Context-MCP.git
cd Figma-Context-MCP
pnpm install
pnpm build

Configuration and running the MCP server

Get a Figma API token from your Figma account settings under Personal access tokens. Save this token in an environment variable named FIGMA_API_KEY.

The MCP can be run in stdio mode by configuring the MCP server as shown below. This uses npx to run the server and passes the --stdio flag. The example also demonstrates setting the required environment variable for the Figma API key.

{
  "mcpServers": {
    "Figma": {
      "command": "npx",
      "args": ["-y", "@yhy2001/figma-mcp-server", "--stdio"],
      "env": {
        "FIGMA_API_KEY": "your-figma-api-key"
      }
    }
  }
}

Usage notes and development tips

In local development, you can also run the server in SSE/HTTP mode as described in the documentation. For example, start the server with an API key and expose an HTTP port if needed. The documentation shows a workflow where you start the server and connect via the SSE endpoint at http://localhost:3333/sse.