MCP server for Figma design integration with AI coding tools
Most developer tooling work still happens through a UI a human drives. Figma Context MCP MCP server moves it into the conversation instead. MCP server for Figma design integration with AI coding tools.
When AI tools can access Figma design data directly, they generate more accurate code on the first try—far better than using screenshots.
The server publishes 8 tools. What each one is for:
get_figma_data — Fetch simplified design datadownload_figma_images — Download images and iconsPrerequisites — The Prerequisites tool exposed by this serverInstallation — The Installation tool exposed by this serverConfiguration — The Configuration tool exposed by this serverTools — The Tools tool exposed by this serverPrompts — Built-in professional prompt templates to help AI generate high-quality code:Resources — The Resources tool exposed by this serverConfiguration is passed through the environment: FIGMA_API_KEY, TEST_FIGMA_FILE_KEY, TEST_FIGMA_NODE_ID. Treat anything key-shaped as a real credential — scope it to the minimum the server needs, and rotate it if it ever lands in a shared config.
The server ships on npm as @smithery/cli, so your MCP client can launch it on demand — there is no separate build step. Add the server block to your client's configuration, restart it, and the tools register themselves.
This sits in the developer tooling group, where several servers overlap in what they claim to do but differ sharply once you actually set them up. Figma Context MCP's toolset — get_figma_data, download_figma_images, Prerequisites and 5 more — is a fair guide to whether it matches your workflow. It is maintained by 1yhy; worth a glance at recent repository activity before you build anything load-bearing on it.
We check each listing at SyncDev against the project's documentation before it goes live — if something here drifts out of date, it is a bug worth reporting.
| Tool | What it does |
|---|---|
| get_figma_data | Fetch simplified design data |
| download_figma_images | Download images and icons |
| Prerequisites | The Prerequisites tool exposed by this server. |
| Installation | The Installation tool exposed by this server. |
| Configuration | The Configuration tool exposed by this server. |
| Tools | The Tools tool exposed by this server. |
| Prompts | Built-in professional prompt templates to help AI generate high-quality code: |
| Resources | The Resources tool exposed by this server. |
{
"mcpServers": {
"figma-context": {
"command": "npx",
"args": ["-y", "@smithery/cli"],
"env": {
"FIGMA_API_KEY": "your-value",
"TEST_FIGMA_FILE_KEY": "your-value",
"TEST_FIGMA_NODE_ID": "your-value"
}
}
}
}Add to claude_desktop_config.json, then restart Claude Desktop.
| Variable | Description | Required |
|---|---|---|
| FIGMA_API_KEY | Credential the server authenticates with. | Yes |
| TEST_FIGMA_FILE_KEY | Credential the server authenticates with. | Yes |
| TEST_FIGMA_NODE_ID | Configuration value read at startup. | Optional |
Kill hallucinated APIs — version-accurate, up-to-date library documentation injected straight into context.
Microsoft's official browser automation server — drive a real browser through the accessibility tree, no screenshots needed.
GitHub's official server — repos, issues, pull requests, Actions and code security, straight from your assistant.
Issue tracking at the speed of conversation — Linear's official hosted server with OAuth and zero install.
Local repository surgery — status, diffs, commits, branches and history for any repo on disk.
Timezone sanity for AI — current time anywhere and correct conversions, without the model doing date math.