# Framelink Figma MCP server > Give coding agents simplified Figma layout and style data so they can implement designs from a file, frame or group link. - Listing: https://mcp.tc/i/framelink-figma - Connect: this is a local (stdio) server; install it on your machine (see Install). The listing link is a page, not an MCP endpoint. - Type: local (stdio) - Auth: API key - Category: [Design, Websites & CMS](https://mcp.tc/c/design) - Vendor: Framelink (GLips) - Homepage: - Repository: - Package: npm `figma-developer-mcp` ## About Framelink MCP for Figma connects AI coding tools such as Cursor to the Figma API. You paste a link to a Figma file, frame or group, and the server fetches the design metadata and reduces it to the layout and styling information that matters, so the model can write code that matches the design. It runs locally over stdio through npx using the figma-developer-mcp package. A Figma personal access token is required, passed with the --figma-api-key flag or the FIGMA\_API\_KEY environment variable. This is a community project, separate from Figma's own Dev Mode server. ## What it can do - Fetch design data from a Figma file, frame or group link - Receive simplified layout and styling info instead of raw API output - Implement designs in any framework from Figma context - Works with Cursor and other MCP-capable coding clients ## Example prompts - "Implement this Figma frame as a React component: YOUR\_FIGMA\_LINK" - "Read the layout of this Figma group and build it with plain HTML and CSS" - "Use the Figma file at this link to build the pricing page in Vue" - "Match the spacing and colors from this Figma frame in my existing component" ## Install ### Claude Code 1. Run this in a terminal, in your project folder: ```bash claude mcp add --transport stdio framelink-figma --env "FIGMA_API_KEY=" -- npx -y figma-developer-mcp --figma-api-key=YOUR_KEY --stdio ``` 2. Start Claude Code and type `/mcp`. **framelink-figma** should show as connected. Add `--scope user` to make it available in every project. Replace the placeholders with your own values. ### Claude Desktop 1. Open **Settings → Developer → Edit Config**. It opens `claude_desktop_config.json`. Add: `claude_desktop_config.json`: ```json { "mcpServers": { "framelink-figma": { "command": "npx", "args": [ "-y", "figma-developer-mcp", "--figma-api-key=YOUR_KEY", "--stdio" ], "env": { "FIGMA_API_KEY": "" } } } } ``` 2. Save the file and restart Claude Desktop. Replace the placeholders with your own values. Needs Node.js on your computer. The file lives in `~/Library/Application Support/Claude/` on macOS and `%APPDATA%\Claude\` on Windows. ### Cursor [Add to Cursor]() (opens Cursor) Or add it by hand to `~/.cursor/mcp.json` (all projects) or `.cursor/mcp.json` (this project): `mcp.json`: ```json { "mcpServers": { "framelink-figma": { "command": "npx", "args": [ "-y", "figma-developer-mcp", "--figma-api-key=YOUR_KEY", "--stdio" ], "env": { "FIGMA_API_KEY": "" } } } } ``` Needs Node.js on your computer. Replace the placeholders with your own values. ### VS Code Add it to `.vscode/mcp.json`. VS Code asks for the secret the first time and stores it securely: `.vscode/mcp.json`: ```json { "servers": { "framelink-figma": { "type": "stdio", "command": "npx", "args": [ "-y", "figma-developer-mcp", "--figma-api-key=YOUR_KEY", "--stdio" ], "env": { "FIGMA_API_KEY": "${input:figma-api-key}" } } }, "inputs": [ { "type": "promptString", "id": "figma-api-key", "description": "FIGMA_API_KEY", "password": true } ] } ``` Needs Node.js on your computer. ### Devin Desktop 1. Add it to `~/.config/devin/mcp_config.json` (macOS and Linux) or `%APPDATA%\devin\mcp_config.json` (Windows): `mcp_config.json`: ```json { "mcpServers": { "framelink-figma": { "command": "npx", "args": [ "-y", "figma-developer-mcp", "--figma-api-key=YOUR_KEY", "--stdio" ], "env": { "FIGMA_API_KEY": "" } } } } ``` 2. Refresh the MCP server list in Cascade. Replace the placeholders with your own values. Devin Desktop is the new name for Windsurf. ### Codex ```bash codex mcp add framelink-figma --env "FIGMA_API_KEY=" -- npx -y figma-developer-mcp --figma-api-key=YOUR_KEY --stdio ``` Or edit `~/.codex/config.toml` directly: `config.toml`: ```toml [mcp_servers.framelink-figma] command = "npx" args = ["-y", "figma-developer-mcp", "--figma-api-key=YOUR_KEY", "--stdio"] env = { FIGMA_API_KEY = "" } ``` Needs Node.js on your computer. Replace the placeholders with your own values. ### Gemini CLI ```bash gemini mcp add -e "FIGMA_API_KEY=" framelink-figma npx -- -y figma-developer-mcp --figma-api-key=YOUR_KEY --stdio ``` This adds it to the current project. Add `-s user` to use it everywhere. ### Any client Most clients that start local servers accept this shape: ```json { "mcpServers": { "framelink-figma": { "command": "npx", "args": [ "-y", "figma-developer-mcp", "--figma-api-key=YOUR_KEY", "--stdio" ], "env": { "FIGMA_API_KEY": "" } } } } ``` Zed puts servers under `context_servers` in its settings, with the same `command`, `args` and `env` fields. Needs Node.js on your computer. Replace the placeholders with your own values. ## Details - Server version: 0.13.2 - Last checked: 2026-10-03 - Listed: 2026-10-03 - Updated: 2026-10-03 --- Source: https://mcp.tc/i/framelink-figma (mcp.tc is an independent directory, not affiliated with this server's publisher). Corrections: https://mcp.tc/report