Figma

1{
2  "mcpServers": {
3    "figma": {
4      "command": "npx",
5      "args": [
6        "-y",
7        "@anthropic-ai/mcp-server-figma"
8      ],
9      "env": {
10        "FIGMA_ACCESS_TOKEN": "<your-figma-access-token>"
11      }
12    }
13  }
14}
15
16// Setup steps:
17// 1. Go to Figma > Settings > Personal access tokens
18// 2. Generate a new token with file:read scope
19// 3. Set it as FIGMA_ACCESS_TOKEN
20//
21// Available tools:
22// - get_file: Get a Figma file's structure and metadata
23// - get_node: Inspect a specific node's properties
24// - get_components: List all components in a file
25// - get_styles: Extract color, text, and effect styles
26// - get_images: Export nodes as PNG/SVG/PDF
27// - get_comments: Read file comments
28//
29// Common workflows:
30// - Design-to-code: Inspect a Figma frame, generate React component
31// - Token extraction: Pull colors, fonts, spacing into tailwind config
32// - Asset export: Export icons and images for the project
33// - Design review: Compare implementation against Figma specs