Framelink MCP for Figma

Provides a Framelink MCP server that fetches and translates Figma design data for Cursor to implement designs in code.

javascript

13.2k

GitHub Stars

javascript

Language

4 months ago

First Indexed

3 weeks 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": {
    "glips-figma-context-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=YOUR-KEY",
        "--stdio"
      ],
      "env": {
        "PORT": "PORT",
        "FIGMA_API_KEY": "YOUR-KEY"
      }
    }
  }
}

The Framelink MCP Server for Figma lets Cursor access your Figma design data to generate code that implements your designs in a single pass. By providing structured design metadata to your coding agent, you can achieve more accurate, layout-aware results and streamlined one-shot implementations.

How to use

Open your IDE’s chat or agent interface. 2) Paste a link to a Figma file, frame, or group you want to work with. 3) Ask your coding agent to perform tasks such as implementing the design or exporting components. 4) The MCP server fetches the relevant metadata from Figma and reduces it to the most useful layout and styling information before sending it to the agent, helping the model respond more accurately.

How to install

Prerequisites: you need Node.js and npm (or another runtime that can run npm-based commands). You also need a Figma API access token to authorize requests.

Configure your MCP clients to use the Framelink MCP for Figma by adding the server configuration to your MCP configuration file. You will supply your Figma API key and, optionally, the port the server should listen on.

Linux or macOS configuration example (stdio mode):

{
  "mcpServers": {
    "Framelink MCP for Figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Windows configuration example (stdio mode):

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

If you prefer, you can set environment variables instead of embedding the key in the config: FIGMA_API_KEY and PORT can be defined in the env section of your configuration.

Additional content

Security and usage notes: Keep your Figm a API key secure. Use the HTTP or stdio MCP configuration that matches your environment. The server is designed to work with Cursor, providing streamlined context to improve one-shot design implementation.

Available tools

fetchFigmaMetadata

Fetches the relevant design metadata from Figma for the specified file, frame, or group to provide the model with structured, layout-focused information.

translateResponse

Translates and reduces the raw Figma response to include only the most useful layout and styling details for code generation.