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
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing…
Brand Guidelines
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Frontend Design
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
Impeccable
The design language that makes your AI harness better at frontend design — 1 skill, 23 commands, 45 detector rules