home / mcp / framelink figma mcp server

Framelink Figma MCP Server

MCP server to provide Figma layout information to AI coding agents like Cursor

Installation

Add the following to your MCP client configuration file.

Configuration

{
  "mcpServers": {
    "zwe1-figma-context-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=YOUR-KEY",
        "--stdio"
      ]
    }
  }
}

You can connect Cursor and other AI coding tools to your Figma data with this MCP server, enabling one-shot design-to-code workflows. It fetches the relevant Figma metadata and presents only the essential layout and styling information to your AI client, helping you implement designs more accurately and efficiently.

How to use

Open your IDE’s chat or agent mode, such as Cursor, and prepare to work with a Figma file you own or have access to.

1. Paste a link to a Figma file, frame, or group into the chat.

2. Ask your AI coding tool to perform tasks against that Figma context, for example to implement the design in your project.

3. The MCP server will fetch the relevant metadata from Figma and translate it into a concise, actionable set of layout and styling details for your AI client.

How to install

Prerequisites you need on your system before you install and run the MCP server.

• Node.js installed on your machine (includes npm). Install from https://nodejs.org if needed.

• Access to a Figma API key to authorize metadata retrieval from the Figma platform.

Install and run the Framelink Figma MCP Server by adding a configuration block to your MCP client configuration file. The examples below show how to configure the MCP server using npx for MacOS/Linux and with cmd for Windows.

MacOS / Linux

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

Windows

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

Installing via Smithery

If you want to install Framelink Figma MCP Server for Claude Desktop automatically via Smithery, run the following command.

npx -y @smithery/cli install @Zwe1/figma-context-mcp --client claude

Available tools

fetchFigmaMetadata

Fetches metadata for the specified Figma file, frame, or group to surface layout and styling information to the AI client.

translateAndLimitContext

Translates and limits API responses to include only the most relevant layout and styling details for accurate code generation.

orchestrateOneShotImplementation

Coordinates the design-to-code process by delivering concise design data to the AI agent for one-shot implementations.