RELATED 01
Figma Console MCP
Read and edit Figma designs, variables and components, and sync design tokens with code
3.2kGitHub stars
14k/wknpm downloads
85popularity score
Framelink MCP for Figma
Lets a coding assistant read layout and styling from Figma files and download their images.
By Graham Lipsman (individual) TypeScript Local · stdio DesignDeveloper tools
102 popularity score ★ 16k ↓ 161k/wk
Connect your client
Local (npm)
Add in one click
Opens the app, which asks before it adds the server. Then replace each <NAME> in its settings with your value.
Or add it by command or config
It needs FIGMA_API_KEY. Replace each <NAME> with your value.
Claude CodeTerminal
claude mcp add framelink-for-figma -e FIGMA_API_KEY=<FIGMA_API_KEY> -- npx -y figma-developer-mcp --stdioClaude Desktopclaude_desktop_config.json
{
"mcpServers": {
"framelink-for-figma": {
"command": "npx",
"args": [
"-y",
"figma-developer-mcp",
"--stdio"
],
"env": {
"FIGMA_API_KEY": "<FIGMA_API_KEY>"
}
}
}
}Cursor~/.cursor/mcp.json
{
"mcpServers": {
"framelink-for-figma": {
"command": "npx",
"args": [
"-y",
"figma-developer-mcp",
"--stdio"
],
"env": {
"FIGMA_API_KEY": "<FIGMA_API_KEY>"
}
}
}
}VS Code.vscode/mcp.json
{
"servers": {
"framelink-for-figma": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"figma-developer-mcp",
"--stdio"
],
"env": {
"FIGMA_API_KEY": "<FIGMA_API_KEY>"
}
}
}
}Codex~/.codex/config.toml
[mcp_servers.framelink-for-figma]
command = "npx"
args = ["-y", "figma-developer-mcp", "--stdio"]
[mcp_servers.framelink-for-figma.env]
FIGMA_API_KEY = "<FIGMA_API_KEY>"Gemini CLITerminal
gemini mcp add --scope user -e FIGMA_API_KEY=<FIGMA_API_KEY> framelink-for-figma npx -- -y figma-developer-mcp --stdioSettings 4
FIGMA_API_KEY |
Required: Figma personal access token (or pass --figma-api-key); either this or FIGMA_OAUTH_TOKEN is required. |
|---|---|
FIGMA_OAUTH_TOKEN |
Optional: Figma OAuth token, instead of a personal access token. |
PORT |
Optional: Port for HTTP mode (default 3333; FRAMELINK_PORT also accepted). |
FRAMELINK_TELEMETRY |
Optional: Set to off to turn off telemetry (DO_NOT_TRACK=1 also works). |
What it does
Framelink MCP for Figma (npm package figma-developer-mcp, also known as Figma Context MCP) gives coding tools such as Cursor access to Figma design data. You paste a link to a Figma file, frame or group into the chat and ask the assistant to implement it; the server fetches the design from the Figma API and passes it on.
Before returning anything it simplifies and translates the Figma API response so that only the relevant layout, content, visual and component information reaches the model. Its README says less context makes the assistant more accurate than approaches like pasting screenshots. A second tool downloads the SVG and PNG images and icons used in a file into a local directory, so they can be used in the code.
It runs locally with npx -y figma-developer-mcp --stdio and needs a Figma personal access token (FIGMA_API_KEY or --figma-api-key) or an OAuth token (FIGMA_OAUTH_TOKEN). It can also run as an HTTP server on a port (default 3333). The project is published as Framelink, with docs at framelink.ai.
Tools 2
get_figma_data- Get Figma file data including layout, content, visuals and component information, simplified for the model.
download_figma_images- Download SVG and PNG images used in a Figma file by the IDs of image or icon nodes, saved relative to the server's image directory.