Two-way Figma MCP server: turn designs into framework-aware code and push frames, text, styles and variables back to the canvas.
Setup
Choose your client, copy the config, then fill in any required environment variables.
claude mcp add figwright -- npx -y @figwright/mcp@latest~/.codex/config.toml
[mcp_servers.figwright]
command = "npx"
args = ["-y", "@figwright/mcp@latest"]
# codex mcp add figwright -- npx -y @figwright/mcp@latest~/.cursor/mcp.json
{
"mcpServers": {
"figwright": {
"command": "npx",
"args": [
"-y",
"@figwright/mcp@latest"
]
}
}
}.vscode/mcp.json
{
"servers": {
"figwright": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@figwright/mcp@latest"
]
}
}
}~/.gemini/settings.json
{
"mcpServers": {
"figwright": {
"command": "npx",
"args": [
"-y",
"@figwright/mcp@latest"
]
}
}
}claude_desktop_config.json
{
"mcpServers": {
"figwright": {
"command": "npx",
"args": [
"-y",
"@figwright/mcp@latest"
]
}
}
}.trae/mcp.json
{
"mcpServers": {
"figwright": {
"command": "npx",
"args": [
"-y",
"@figwright/mcp@latest"
]
}
}
}