Figma-Context-MCP server in Cline design-aware autonomous coding.
Configure cline_mcp_settings.json from the Cline panel and the VS Code extension can fetch Figma frames mid-task — reading real layout data while it builds your UI.
Cline's whole pitch is autonomous multi-step coding inside VS Code, and UI work is where it most needs ground truth. Figma-Context-MCP (github.com/glips/figma-context-mcp, 15.1k stars) supplies it: the server fetches layout, component, and style data from Figma's API and compresses it into a form the model parses reliably, so Cline can implement a linked frame in your framework rather than improvising from a description.
Cline manages its MCP servers in its own settings file, separate from VS Code's native MCP support — a distinction that matters if you also run Copilot, because the two don't share configuration.
Open the right settings file
In the Cline panel, click the MCP Servers icon, switch to the Installed tab, and hit Configure MCP Servers. That opens cline_mcp_settings.json — the file physically lives deep in VS Code's globalStorage under saoudrizwan.claude-dev/settings/, which is exactly why you should let the panel open it rather than hunting for the path by hand.
You'll also need a Figma personal access token (Figma Settings > Security > Personal access tokens) with read access to the design files you work from.
The config
The server is the figma-developer-mcp npm package, launched over stdio. Cline supports two extra per-server fields worth knowing: disabled, for parking a server without deleting it, and autoApprove, which lets named tools run without a confirmation click each time:
{
"mcpServers": {
"figma-context": {
"command": "npx",
"args": ["-y", "figma-developer-mcp", "--stdio"],
"env": {
"FIGMA_API_KEY": "YOUR_FIGMA_TOKEN"
},
"disabled": false,
"autoApprove": []
}
}
}Check the panel, then run a real task
Cline picks up saved changes and shows the result immediately in the MCP Servers tab: a green status row for figma-context with its tools expandable below it. Red text means the spawn failed and the error is printed right there — no log spelunking required, which is one of Cline's nicer touches.
Then give it the real job: copy a link to a selection in Figma (right-click the frame > Copy link to selection) and prompt something like "implement this frame as a React component using our existing Tailwind setup." Watch the task transcript — Cline should call the Figma tool first, then start writing files.
Troubleshooting in Cline
If the server row shows an error, use the retry button on the row after fixing the cause. Spawn failures usually mean npx isn't visible to VS Code — launch VS Code from a terminal (code .) so it inherits your shell PATH, or use the absolute path to npx in the command field.
If tools execute but return authorization errors, the FIGMA_API_KEY is expired or the linked file isn't accessible to your Figma account. One more Cline-specific note: each tool call burns a confirmation prompt unless you add the tool name to autoApprove — for a read-only server like this one, approving the data-fetch tool is a reasonable convenience; leave the asset-download tool manual if you want to keep an eye on what lands in your repo.
The listing
Figma-Context-MCP's probed tool list is on its live Loomal listing at https://loomal.ai/marketplace/figma-context-mcp — worth a glance before configuring, and the design tools category around it has companion servers for screenshots and visual diffing if your Cline tasks include verifying the build matches the mock.
FAQ
How do I install Figma-Context-MCP in Cline?
Open the Cline panel > MCP Servers > Installed > Configure MCP Servers, which opens cline_mcp_settings.json. Add a figma-context entry running npx -y figma-developer-mcp --stdio with FIGMA_API_KEY in env, save, and the panel shows it connected within seconds.
Where is Cline's MCP settings file on disk?
Inside VS Code's globalStorage at saoudrizwan.claude-dev/settings/cline_mcp_settings.json. The path varies by OS and VS Code flavor, so the dependable route is the Configure MCP Servers button in the Cline panel, which opens the correct file every time.
Why does Cline show the server in red?
Red means the process failed to start. Nine times out of ten it's npx not being on VS Code's PATH (start VS Code from a terminal, or hardcode the npx path) or a JSON syntax error from a hand edit. The exact stderr output is shown inline on the server row.
Should I auto-approve the Figma tools?
Auto-approving the read-only file-data tool saves a click on every fetch and is low risk. The image-download tool writes asset files into your workspace, so keeping manual approval there gives you a checkpoint on what gets added during long autonomous runs.
Browse more MCP servers for Cline.
Live tool lists for every server in the index.