Claude Talk to Figma MCP
An MCP server that lets an agent read and edit Figma designs: colors, typography, components and export
Medium risk
We rate an entry medium when the tool runs code, makes network calls or reads project files. Check what exactly it does before installing.
Why this level
- Modifies the contents of your Figma files
- Runs a local websocket and executes code
Install
In your terminal, with SkillFoxx CLI
npx skillfoxx add mcp/claude-talk-to-figma-mcpDetects the agents on your machine, checks the risk and pins the version.
Other ways to install
Run in a terminal
claude mcp add --transport stdio ClaudeTalkToFigma -- npx -p claude-talk-to-figma-mcp@latest claude-talk-to-figma-mcp-serverOr add to the file .mcp.json, in the project
{
"mcpServers": {
"ClaudeTalkToFigma": {
"command": "npx",
"args": [
"-p",
"claude-talk-to-figma-mcp@latest",
"claude-talk-to-figma-mcp-server"
]
}
}
}If the file already exists, add the server inside the mcpServers key.
The button opens the agent and offers to add the server. If nothing happens, copy the config below.
Add to the file ~/.cursor/mcp.json, for all projects
{
"mcpServers": {
"ClaudeTalkToFigma": {
"command": "npx",
"args": [
"-p",
"claude-talk-to-figma-mcp@latest",
"claude-talk-to-figma-mcp-server"
]
}
}
}If the file already exists, add the server inside the mcpServers key. For a single project, put the same block into .cursor/mcp.json.
The button opens the agent and offers to add the server. If nothing happens, copy the config below.
Run in a terminal
code --add-mcp '{"name":"ClaudeTalkToFigma","type":"stdio","command":"npx","args":["-p","claude-talk-to-figma-mcp@latest","claude-talk-to-figma-mcp-server"]}'Or add to the file .vscode/mcp.json, in the project
{
"servers": {
"ClaudeTalkToFigma": {
"type": "stdio",
"command": "npx",
"args": [
"-p",
"claude-talk-to-figma-mcp@latest",
"claude-talk-to-figma-mcp-server"
]
}
}
}If the file already exists, add the server inside the servers key.
Run in a terminal
codex mcp add ClaudeTalkToFigma -- npx -p claude-talk-to-figma-mcp@latest claude-talk-to-figma-mcp-serverOr add to the file ~/.codex/config.toml, for all projects
[mcp_servers.ClaudeTalkToFigma]
command = "npx"
args = ["-p", "claude-talk-to-figma-mcp@latest", "claude-talk-to-figma-mcp-server"]If the file already exists, append the block to the end.
Add to the file ~/.gemini/settings.json, for all projects
{
"mcpServers": {
"ClaudeTalkToFigma": {
"command": "npx",
"args": [
"-p",
"claude-talk-to-figma-mcp@latest",
"claude-talk-to-figma-mcp-server"
]
}
}
}If the file already exists, add the server inside the mcpServers key.
Add to the file ~/.config/devin/mcp_config.json, for all projects
{
"mcpServers": {
"ClaudeTalkToFigma": {
"command": "npx",
"args": [
"-p",
"claude-talk-to-figma-mcp@latest",
"claude-talk-to-figma-mcp-server"
]
}
}
}If the file already exists, add the server inside the mcpServers key. Legacy Cascade keeps the MCP config in ~/.codeium/windsurf/mcp_config.json.
Formerly Windsurf.
Add to the file cline_mcp_settings.json, for all projects
{
"mcpServers": {
"ClaudeTalkToFigma": {
"command": "npx",
"args": [
"-p",
"claude-talk-to-figma-mcp@latest",
"claude-talk-to-figma-mcp-server"
]
}
}
}If the file already exists, add the server inside the mcpServers key. Open the settings file in Cline: MCP Servers tab, Configure MCP Servers.
Add to the file .roo/mcp.json, in the project
{
"mcpServers": {
"ClaudeTalkToFigma": {
"command": "npx",
"args": [
"-p",
"claude-talk-to-figma-mcp@latest",
"claude-talk-to-figma-mcp-server"
]
}
}
}If the file already exists, add the server inside the mcpServers key.
A fork of Roo Code, same .roo folders.
Add to the file opencode.json, in the project
{
"mcp": {
"ClaudeTalkToFigma": {
"type": "local",
"command": [
"npx",
"-p",
"claude-talk-to-figma-mcp@latest",
"claude-talk-to-figma-mcp-server"
]
}
}
}If the file already exists, add the server inside the mcp key.
Add to the file ~/.config/zed/settings.json, for all projects
{
"context_servers": {
"ClaudeTalkToFigma": {
"command": "npx",
"args": [
"-p",
"claude-talk-to-figma-mcp@latest",
"claude-talk-to-figma-mcp-server"
]
}
}
}If the file already exists, add the server inside the context_servers key.
Add to the file .codeassistant/mcp.json, in the project
{
"mcpServers": {
"ClaudeTalkToFigma": {
"command": "npx",
"args": [
"-p",
"claude-talk-to-figma-mcp@latest",
"claude-talk-to-figma-mcp-server"
]
}
}
}If the file already exists, add the server inside the mcpServers key.
Install the websocket with npx claude-talk-to-figma-mcp, import the plugin from src/claude_mcp_plugin/manifest.json in Figma Desktop, then add the MCP server to your client via npx -p claude-talk-to-figma-mcp@latest claude-talk-to-figma-mcp-server. To start, say: connect to Figma, channel X.
Other ways from the author
npx claude-talk-to-figma-mcpClones the project, installs dependencies and starts the websocket. Then import the plugin from src/claude_mcp_plugin/manifest.json in Figma Desktop.
This is third-party code. Review the repository files before installing.
What it does
The server links an agent to Figma Desktop through a local websocket and a plugin you import from a manifest. Once connected to a channel, the agent reads the current selection and document tree, inspects styles and hierarchy, creates shapes, text and frames, and edits colors, corner radius, shadows and auto layout. It runs with a free Figma account and needs no Dev Mode license. A server-side command queue lets several agents work in parallel.
Who it is for. For designers and frontend developers who want to edit Figma files and turn designs into code through chat.
Good fit when
- You need to change colors, fonts or spacing across the whole document
- You need to build a component or layout from an existing design
- You need to check contrast and accessibility inside Figma
Not a fit when
- You have no Figma Desktop or cannot import a plugin from a manifest
- You need Figma only in the browser without the desktop app
Example request
Connect to Figma, channel abc123, and replace FF6B6B with E63946 in all primary buttonsLimitations
You need Node.js, Figma Desktop and a manual plugin import through the developer menu. Each session starts a local websocket and the agent connects to a channel by its id. In parallel mode set_current_page is blocked, so creation and structural edits must pass parentId explicitly.
How to disable. Remove the server entry from your MCP client config and delete the plugin from Figma via the developer menu.
MCP
- Transport
- stdio
- Authentication
- not required
Security check
- Modifies the contents of your Figma files
- Runs a local websocket and executes code
README in short
The README lays out a three-step setup: start the websocket via npx, import the plugin into Figma Desktop and configure the MCP client. It shows configs for Cursor and other tools, a Docker option and a capability list: document analysis, element creation and editing, styles and component libraries. The project builds on Sonny Lazuardi's cursor-talk-to-figma-mcp. MIT licensed.
FAQ
Do I need paid Figma and Dev Mode?
No. The server works with any Figma account, including free, and no Dev Mode license is required.
How does the agent know which file to use?
You open the plugin in Figma, copy the channel id and ask the agent to connect to that channel.
Related
Official Claude Code plugin from the Next.js repo: adopting Cache Components and Partial Prefetching, and verifying changes on a running dev server
Official shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules
A frontend design skill with 23 commands, live browser iteration and 61 detector rules for common AI-generated UI tells
Vercel Agent Skills
Agent Skills
Vercel's skills: React and Next.js performance, UI guideline audits, React Native, component composition and deploys