Back to MCP Servers

Figma Server

Access Figma designs with live structure, hierarchy, auto-layout, variants, and text styles for accurate code generation

figmadesignuiofficial
By Figma

Installation

npm install -g @anthropic-ai/mcp-server-figma

Configuration

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "@anthropic-ai/mcp-server-figma"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "your-figma-access-token"
      }
    }
  }
}

How to use

  1. Run the installation command above (if needed)
  2. Open your Claude Code settings file (~/.claude/settings.json)
  3. Add the configuration to the mcpServers section
  4. Restart Claude Code to apply changes
View source on GitHub

Related

Frontend Design
Plugins