Framelink Figma MCP Server

Name: Framelink Figma MCP Server
Author: GLips

@GLips

Repository Homepage

About Framelink Figma MCP Server

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

#typescript #ai #mcp #cursor #figma

Basic information

Config

Add this server to your MCP-compatible client using the configuration below.

{
  "mcpServers": {
    "figma-developer-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "<your-figma-api-key>"
      }
    }
  }
}

Tools

When the nodeId cannot be obtained, obtain the layout information about the entire Figma file

Download SVG and PNG images used in a Figma file based on the IDs of image or icon nodes

Overview

What is Framelink Figma MCP Server?

Framelink Figma MCP Server gives AI-powered coding tools like Cursor access to Figma design data via the Model Context Protocol. It simplifies and translates Figma API responses so only the most relevant layout and styling information is provided to the model, enabling accurate one-shot implementation of designs in any framework.

How to use Framelink Figma MCP Server?

Install and configure the server by adding it to your editor’s MCP configuration file (e.g., mcpServers in Cursor). You must provide a Figma personal access token via the --figma-api-key argument or the FIGMA_API_KEY environment variable. Use the --stdio transport flag. Once running, paste a link to a Figma file, frame, or group in your AI chat and ask the agent to implement the design.

Key features of Framelink Figma MCP Server

Specifically designed for use with Cursor.
Simplifies Figma API responses for AI accuracy.
Works seamlessly with any framework or stack.
One-shot design implementation from Figma links.
Open-source under the MIT license.

Use cases of Framelink Figma MCP Server

Implement a Figma design in code directly from a file link.
Get accurate layout and styling information without pasting screenshots.
Use agent mode in Cursor to fetch relevant Figma metadata.
Speed up UI development by reducing manual design-to-code translation.

FAQ from Framelink Figma MCP Server

How do I get a Figma access token?

Create a personal access token in your Figma account settings. See Figma’s documentation for details.

Can I use this server with editors other than Cursor?

The server follows the Model Context Protocol, but it is specifically designed for and tested with Cursor. Other MCP‑compatible clients may work, but the README focuses on Cursor usage.

What data does the server send to the AI model?

It fetches metadata from the Figma API and simplifies it to include only the most relevant layout and styling information, reducing the amount of context to improve AI accuracy.

What transport and authentication are supported?

The server uses STDIO transport (specified with the --stdio flag) and authenticates via a Figma personal access token, passed as a command-line argument or environment variable.

Are there any known limitations?

The README does not mention specific limitations. It notes that accuracy improves by reducing context, which implies large or complex files may still need careful prompting.

Comments

More Media & Design MCP servers

MCP Figma to React Converter

StudentOfJS

MCP server for converting Figma designs to React components

YouTube MCP Server

ZubeidHendricks

MCP Server for YouTube API, enabling video management, Shorts creation, and advanced analytics

544

MiniMax MCP

MiniMax-AI

Official MiniMax Model Context Protocol (MCP) server that enables interaction with powerful Text to Speech, image generation and video generation APIs.

1.5K