F

How to install Figma Dev Tools in Claude Desktop

To install Figma Dev Tools in Claude Desktop, open Settings, Developer, Edit Config, paste the "figma-dev-tools" block into mcpServers in claude_desktop_config.json, and restart the app.

Built from the published package · server updated 7 days ago

1. 1

   Open the config file

   In Claude Desktop, go to Settings, then Developer, then Edit Config.

2. 2

   Add the server

   Paste this into the file. If you already have servers, add the "figma-dev-tools" entry inside your existing mcpServers block.

   {
     "mcpServers": {
       "figma-dev-tools": {
         "command": "npx",
         "args": [
           "-y",
           "figma-dev-tools"
         ]
       }
     }
   }

   Copy
3. 3

   Restart Claude Desktop

   Quit the app fully and open it again. The server appears under the tools icon in a new chat.

Config file: macOS: ~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

MCP servers run with your permissions. If Figma Dev Tools needs an API key, add it under env in the config. Check its README.

Similar servers

G

GitDiagram ahmedkhaleel2004

100

Architecture diagrams, explanations and Mermaid source for public GitHub repositories.

AAA Remote 18k

D

draw.io jgraph

100

Create draw.io diagrams in chat from Mermaid or XML, shown live and interactive. 10,000+ shapes.

AAA Remote 5.7k

A

Agent-Native PlanBuilderIO

94

Structured visual plans and PR recaps with diagrams, prototypes, annotations, and sharing

AAA Remote 7.4k