Home / MCP / Framelink MCP for Figma MCP Server

Framelink MCP for Figma MCP Server

Provides a Framelink MCP server that fetches Figma metadata and translates responses for Cursor to implement designs.

typescript

12.1kstars

View on GitHub

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

{
    "mcpServers": {
        "framelink_figma": {
            "command": "npx",
            "args": [
                "-y",
                "figma-developer-mcp",
                "--figma-api-key=YOUR-KEY",
                "--stdio"
            ],
            "env": {
                "FIGMA_API_KEY": "YOUR-KEY",
                "PORT": "8080"
            }
        }
    }
}

You can run the Framelink MCP for Figma as an MCP server to connect Cursor with your Figma design data. It fetches metadata from Figma and translates responses to provide only the most relevant layout and styling information, helping you implement designs accurately in your preferred framework.

How to use

Open your MCP client and select the Framelink MCP for Figma server. Paste a link to the Figma file, frame, or group you want to work with. Ask your coding agent to implement or extract styles from the design. The server will fetch metadata from Figma and pass a streamlined, framework-ready context to the agent so your code aligns with the design.

How to install

Prerequisites: you need Node.js installed on your machine. Ensure you can run npm and npx from your command line.

1) Create a configuration that includes the Framelink MCP for Figma server.

2) You must obtain a Figma API access token to use the server.

3) Start the MCP server using the provided runtime command.

4) Connect Cursor or your MCP client to the server URL and begin exchanging Figma-driven context for code generation.

Configuration and runtime details

The server is configured as a stdio MCP server using the npx runtime. You will run the following command in your terminal as part of your MCP configuration:

{
  "mcpServers": {
    "framelink_figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"],
      "env": [
        {"name": "FIGMA_API_KEY", "value": "YOUR-KEY"},
        {"name": "PORT", "value": "8080"}
      ]
    }
  }
}

Security and tips

Keep your Figma API key confidential. Use environment variables to inject keys in your deployment environment. Only expose the minimum required permissions for your integration to reduce risk.

Troubleshooting

If you encounter connectivity issues, verify that the Figma API key is valid and that the server is reachable from your MCP client. Check that PORT is not blocked by your firewall and that your client is configured to use the correct stdio runtime for the server.

Available tools

fetchFigmaMetadata

Fetches the relevant metadata from a specified Figma file, frame, or group to provide the necessary layout and content for code generation.

translateFigmaResponse

Simplifies and translates the Figma API response so only the most relevant layout and styling information is passed to the model.