Quickstart

This guide will walk you through setting up the Framelink Figma MCP server. We'll cover how to get the MCP running and integrated with your IDE. You'll also learn how to make your first request to the MCP.

1. Grab your Figma access token

Before you can make requests to the Framelink Figma MCP server, you will need to generate a Figma access token.

1. From the home page in Figma, click your profile icon in the top left corner and select Settings from the dropdown.
2. In the settings menu, select the Security tab.
3. Scroll down to the Personal access tokens section and click Generate new token.
4. Enter a name for the token and make sure you have read permissions on File content and Dev resources, then click Generate token.

If you need more detailed instructions, you can find them in Figma's documentation on access tokens.

2. Add the Framelink Figma MCP server to your IDE

Most IDEs support JSON config for MCP servers. That makes getting started easy. Once you update the MCP configuration file in your IDE, the MCP server will be automatically downloaded and enabled.

To add the Framelink Figma MCP server, use the following configuration:

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

Editor-specific MCP Setup Information

If you need more support to get your IDE configured, check out the official docs for your editor. You can also join our Discord if you need assistance.

Cursor

More details

Windsurf

More details

Cline

More details

3. Implement your first design

After configuring your IDE, you'll be able to make requests to the Framelink Figma MCP server.

Copy a link to a Figma frame or group

The MCP server compresses the data it receives from the Figma API by almost 90%. Even still, complex designs can overwhelm AI agents with too much information.

You can try to get your editor to implement a whole design for you, but for the most consistent results, work on one section at a time.

To do that, right click on the frame or group you'd like to implement, then select Copy/Paste as and choose Copy link to selection.

Paste the link into your editor

Once you have a link to the Figma frame or group, you can make a request to your editor's AI agent.

A request as simple as "Implement this Figma frame" along with the link should be enough to get the agent to call the MCP's get_figma_data function, but more context is often helpful in getting the best results.

Get your design

After submitting your request, your coding agent will get to work. It should call the MCP's get_figma_data function with the link you provided. Using the information returned from this function, your agent will generate a design.

As you can see above, the agent decided to name the classes frame-### since the Figma frames used in this example used Figma's default naming. Since this was a very simple design without much context about the intended use of the element, the agent just went with a literal interpretation of the frame's contents.

The design, however, is complete and functional.

Next steps

The Framelink Figma MCP server is simple but powerful in the right hands.

If you're ready to take your prompting skills to the next level, check out the best practices guide to learn how to use the MCP to its full potential.