MCP server
Framelink Figma MCP Server
- Maintainer
- Community
- Runs
- Local (stdio)
- GitHub
- ★ 16,064, last push 2026-10-24 (checked 2026-10-24)
- License
- MIT
- Registry
- io.github.GLips/Figma-Context-MCP
- Connects to
- Figma
Install the Framelink Figma MCP Server
Pick your client. Each tab starts the same local command. Config shapes checked against each client's docs on 2026-10-25.
Needs FIGMA_API_KEY (replace the ... with your value).
Run in a terminal. Everything after -- is the command that starts the server. docs
claude mcp add --transport stdio --env FIGMA_API_KEY=... framelink-figma -- npx -y figma-developer-mcp --stdio
Claude Desktop only: Settings > Developer > Edit Config opens claude_desktop_config.json. Add this, save and restart the app. docs
{
"mcpServers": {
"framelink-figma": {
"command": "npx",
"args": [
"-y",
"figma-developer-mcp",
"--stdio"
],
"env": {
"FIGMA_API_KEY": "..."
}
}
}
}Add to ~/.cursor/mcp.json (all projects) or .cursor/mcp.json (this project), or use the install button. docs
{
"mcpServers": {
"framelink-figma": {
"command": "npx",
"args": [
"-y",
"figma-developer-mcp",
"--stdio"
],
"env": {
"FIGMA_API_KEY": "..."
}
}
}
}Add to .vscode/mcp.json (note the "servers" key and the type), or use the install button. Command Palette > "MCP: Open User Configuration" for all workspaces. docs
{
"servers": {
"framelink-figma": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"figma-developer-mcp",
"--stdio"
],
"env": {
"FIGMA_API_KEY": "..."
}
}
}
}Run codex mcp add --env FIGMA_API_KEY=... framelink-figma -- npx -y figma-developer-mcp --stdio, or add this to ~/.codex/config.toml. docs
[mcp_servers.framelink-figma] command = "npx" args = ["-y", "figma-developer-mcp", "--stdio"] [mcp_servers.framelink-figma.env] FIGMA_API_KEY = "..."
Run in a terminal (-s user adds it for all projects; the default is this project). docs
gemini mcp add -s user -e FIGMA_API_KEY=... framelink-figma npx -- -y figma-developer-mcp --stdio
Run in a terminal; it writes ~/.copilot/mcp-config.json. docs
copilot mcp add --env FIGMA_API_KEY=... framelink-figma -- npx -y figma-developer-mcp --stdio
Add to mcp_config.json: ~/.config/devin/mcp_config.json on macOS and Linux (older installs: ~/.codeium/windsurf/mcp_config.json), %APPDATA%\devin\ on Windows. docs
{
"mcpServers": {
"framelink-figma": {
"command": "npx",
"args": [
"-y",
"figma-developer-mcp",
"--stdio"
],
"env": {
"FIGMA_API_KEY": "..."
}
}
}
}Add to Zed's settings.json (or Settings > AI > MCP Servers > Add Server). Remote servers without an Authorization header sign in with OAuth. docs
{
"context_servers": {
"framelink-figma": {
"command": "npx",
"args": [
"-y",
"figma-developer-mcp",
"--stdio"
],
"env": {
"FIGMA_API_KEY": "..."
}
}
}
}Add to opencode.json in the project (or ~/.config/opencode/opencode.json). docs
{
"$schema": "https://opencode.ai/config.json",
"mcp": {
"framelink-figma": {
"type": "local",
"command": [
"npx",
"-y",
"figma-developer-mcp",
"--stdio"
],
"enabled": true,
"environment": {
"FIGMA_API_KEY": "..."
}
}
}
}Add to ~/.kiro/settings/mcp.json (all projects) or .kiro/settings/mcp.json (this project). docs
{
"mcpServers": {
"framelink-figma": {
"command": "npx",
"args": [
"-y",
"figma-developer-mcp",
"--stdio"
],
"env": {
"FIGMA_API_KEY": "..."
}
}
}
}MCP Servers > Configure > Configure MCP Servers opens cline_mcp_settings.json; add this entry. docs
{
"mcpServers": {
"framelink-figma": {
"command": "npx",
"args": [
"-y",
"figma-developer-mcp",
"--stdio"
],
"env": {
"FIGMA_API_KEY": "..."
}
}
}
}Security notes
- The local server runs with your user's permissions (npx downloads it from npm on first run).
- Needs FIGMA_API_KEY. Use a key or token with the narrowest scopes (read-only if there is one), and keep it out of config files you commit (.mcp.json, .vscode/mcp.json).
- Community code: read it (or at least the tools it registers) before you give it credentials.
Alternatives
- Figma Dev Modeofficial
Design context, variables, components and screenshots from Figma frames for code generation.
- shadcn/uiofficial · ★ 126k
Browse, search and install components from shadcn/ui and other registries, built into the shadcn CLI.
- Magic (21st.dev)official · ★ 6.2k
Generate React UI components from a prompt, inspired by 21st.dev's library.
- draw.ioofficial · ★ 5.7k
Create draw.io diagrams from Mermaid or XML, shown live in the chat.
- Excalidrawofficial · ★ 5.6k
Draw hand-drawn style Excalidraw diagrams that render live in the chat.
- AntV Chartofficial · ★ 4.4k
Generate charts (line, bar, maps, flow diagrams and 20+ more) with AntV.
- Miroofficial · ★ 163
Hosted server to read Miro boards and create diagrams, docs and tables on them.
- Webflowofficial · ★ 140
Pages, CMS collections and site settings in Webflow, with a Designer companion app.
FAQ
What does the Framelink Figma MCP Server do?+
Simplified Figma layout and style data for coding agents, using a Figma API token.
Is the Framelink Figma MCP server official?+
Community-maintained (GLips on GitHub), not by the company whose product it connects to.
How do I add Framelink Figma to Claude Code?+
Run: claude mcp add --env FIGMA_API_KEY=... --transport stdio framelink-figma -- npx -y figma-developer-mcp --stdio. Add --scope project to share it with your team through .mcp.json.
How do I use the Framelink Figma MCP server in Cursor or VS Code?+
Open the Cursor or VS Code tab above: it has the mcp.json entry and a one-click install link. Cursor uses the "mcpServers" key; VS Code uses "servers" and needs a type ("stdio").
Does Framelink Figma work in ChatGPT and claude.ai?+
No: it runs locally over stdio, and ChatGPT and claude.ai only connect to remote servers. Use it in Claude Desktop, Claude Code, Cursor, VS Code or another client that can start a local process.
What are the alternatives to the Framelink Figma MCP server?+
Other design & frontend MCP servers: Figma Dev Mode, shadcn/ui, Magic (21st.dev), draw.io and Excalidraw.