Figma Server
Access Figma designs with live structure, hierarchy, auto-layout, variants, and text styles for accurate code generation
By Figma
How to install
MCP ServerMCP servers let Claude connect to external tools & services. Add this server to your MCP config, then restart the app.
Claude Desktop / Claude Code (local, stdio):
Add to claude_desktop_config.json (Desktop) or .mcp.json (Claude Code):
{
"mcpServers": {
"figma-server": {
"command": "npx",
"args": ["-y", "<package-name>"]
}
}
}Claude.ai (remote / hosted):
Settings → Connectors → “+” → search the directory → Connect, then authenticate via OAuth if prompted.
Config keys vary per server — always follow the server's own README. Restart Claude after adding it.
Exact steps can vary per project — always double-check the original source. New to this? Read the full install guide →
Source
More in Creative, Design & Art
View all →Algorithmic Art
Create algorithmic generative art with Claude AI using p5.js, flow fields, particle systems, and controlled randomness. Download for free.
Impeccable
The design language that makes your AI harness better at frontend design — 1 skill, 23 commands, 45 detector rules
Figma
Figma design tool integration. Extract design specs, generate code from designs, access component libraries, and bridge the gap between design and development.
Architect
Designs feature architectures by analyzing existing codebase patterns and conventions, then providing comprehensive implementation blueprints with specific files to create/modify, component designs, data flows, and build sequences