Figma Context MCP server

The Framelink Figma MCP Server gives your AI-powered coding tools like Cursor access to your Figma files through the Model Context Protocol. This allows your coding assistant to accurately implement designs directly from Figma data, producing more precise results than alternative approaches such as using screenshots.

Installation

To use the Figma MCP server, you'll need to configure it in your AI code editor. Before starting, you'll need to create a Figma API access token from the Figma developer settings.

Configuration Setup

For macOS / Linux Users

Add the following to your editor's MCP configuration file:

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

For Windows Users

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

Replace YOUR-KEY with your actual Figma API access token.

Alternatively, you can set the API key as an environment variable:

• FIGMA_API_KEY - Your Figma access token
• PORT - Optional port for the server

Usage

Using the Figma MCP server is straightforward:

1. Open your AI-powered IDE's chat (such as agent mode in Cursor)
2. Paste a link to a Figma file, frame, or group
3. Ask your coding assistant to implement the design
4. The assistant will fetch the relevant data from Figma and use it to write code

Example Workflow

1. In Cursor, enable agent mode
2. Paste a Figma link like: https://www.figma.com/file/example/Design-File?node-id=123
3. Ask: "Please implement this design as a React component with Tailwind CSS"
4. The assistant will access the design data and generate the appropriate code

How It Works

The MCP server translates the complex Figma API responses into simplified, relevant layout and styling information. This focused approach provides only the most important design details to the AI model, resulting in:

• More accurate code generation
• Better understanding of the design's intent
• Cleaner implementation of UI components

Additional Resources

For more detailed instructions and advanced usage, see the Framelink quickstart guide.

For a visual demonstration, watch the demo video showing how to build a UI in Cursor with Figma design data.

To get help or connect with other users, join the Framelink Discord.

How to add this MCP server to Cursor

There are two ways to add an MCP server to Cursor. The most common way is to add the server globally in the ~/.cursor/mcp.json file so that it is available in all of your projects.

If you only need the server in a single project, you can add it to the project instead by creating or adding it to the .cursor/mcp.json file.

Adding an MCP server to Cursor globally

To add a global MCP server go to Cursor Settings > MCP and click "Add new global MCP server".

When you click that button the ~/.cursor/mcp.json file will be opened and you can add your server like this:

{
    "mcpServers": {
        "cursor-rules-mcp": {
            "command": "npx",
            "args": [
                "-y",
                "cursor-rules-mcp"
            ]
        }
    }
}

Adding an MCP server to a project

To add an MCP server to a project you can create a new .cursor/mcp.json file or add it to the existing one. This will look exactly the same as the global MCP server example above.

How to use the MCP server

Once the server is installed, you might need to head back to Settings > MCP and click the refresh button.

The Cursor agent will then be able to see the available tools the added MCP server has available and will call them when it needs to.

You can also explictly ask the agent to use the tool by mentioning the tool name and describing what the function does.