Figma-Context-MCP server in VS Code (GitHub Copilot) Copilot that has seen the mock.
An entry in .vscode/mcp.json puts your Figma files within reach of Copilot's agent mode — with VS Code's inputs mechanism keeping the API token out of the committed file.
Copilot agent mode writing frontend code without design access produces plausible layouts that are subtly wrong everywhere. Figma-Context-MCP (github.com/glips/figma-context-mcp, 15.1k stars) removes the guesswork: it pulls real frame structure, spacing, and component data from Figma's API, simplified for the model, so a linked frame becomes a precise implementation target.
VS Code's native MCP support reads from mcp.json — and it has one feature most clients lack that's perfect for this server: declared inputs, which prompt for your Figma token on first start and store it securely instead of leaving it in a file you might commit.
Choose where the config lives
User scope (set up via Command Palette: MCP: Add Server) makes the server available in every workspace. Project scope — .vscode/mcp.json checked into the repo — is usually better for this server: the frontend repos that implement designs get it, and with the inputs approach below the file is safe to commit because no token ever appears in it.
Generate the token first: Figma Settings > Security > Personal access tokens, read access to the relevant files.
The config
Two VS Code-specific details: the top-level key is servers (not the mcpServers used by Cursor and Claude Desktop), and the inputs array declares the prompted secret. The npm package is figma-developer-mcp:
{
"inputs": [
{
"id": "figma-key",
"type": "promptString",
"description": "Figma personal access token",
"password": true
}
],
"servers": {
"figma-context": {
"type": "stdio",
"command": "npx",
"args": ["-y", "figma-developer-mcp", "--stdio"],
"env": {
"FIGMA_API_KEY": "${input:figma-key}"
}
}
}
}Start, verify, implement
Open the file and click Start above the server entry (or use MCP: List Servers). On first start VS Code prompts for the token, stores it, and won't ask again. Then open Copilot Chat in agent mode, expand the tools picker, and confirm the Figma tools are present and checked.
The working loop: right-click a frame in Figma, Copy link to selection, paste into agent mode with a concrete instruction — "implement this frame in src/components using our Button and Card primitives." Selection links carry a node ID so the server fetches one frame's subtree rather than the entire document, which keeps payloads small enough to leave room for your actual code context.
Troubleshooting in VS Code
Server in error state: MCP: List Servers > Show Output gives the live log. A spawn failure means npx isn't on the PATH VS Code sees — start VS Code from a terminal, or put the absolute npx path in the command field. Figma 403s in the log mean the stored token is bad; run MCP: List Servers, stop the server, and restart it to get re-prompted, or clear the stored input.
If the server runs but Copilot ignores it, confirm you're in agent mode (plain chat doesn't call MCP tools), the tools are checked in the picker, and chat.mcp.enabled hasn't been disabled by policy on managed machines. After any mcp.json edit, restart the server from the editor's inline controls rather than assuming a hot reload.
Before you add it
You can inspect the server's probed tool list on its live Loomal listing at https://loomal.ai/marketplace/figma-context-mcp. It's the most-starred entry in the design tools category, and the same npm package configures into Cursor, Cline, and Claude Code if your team splits across editors — only the file format around it changes.
FAQ
How do I install Figma-Context-MCP in VS Code with Copilot?
Add a figma-context entry under the servers key in .vscode/mcp.json running npx -y figma-developer-mcp --stdio, declare the token as a promptString input, then click Start in the MCP view. VS Code prompts for your Figma token on first start and stores it securely.
Where does VS Code store MCP servers?
In mcp.json, either user-scoped (via Command Palette: MCP: Add Server) or project-scoped at .vscode/mcp.json. Remember VS Code uses a servers key — configs copied from clients that use mcpServers won't load until you rename that key.
Why doesn't Copilot use the Figma tools?
Check that the server was actually started (saving mcp.json isn't enough), that you're in agent mode rather than plain chat, and that the Figma tools are enabled in the tools picker. If the server itself is failing, MCP: List Servers > Show Output shows whether it's a PATH problem or a Figma auth problem.
Is it safe to commit .vscode/mcp.json?
With the inputs pattern, yes — the committed file contains only a prompt definition, never the token. Each teammate gets asked for their own Figma personal access token the first time they start the server, and tokens stay in VS Code's secret storage.
Browse more MCP servers for VS Code.
Live tool lists for every Copilot-compatible server.