Add this MCP server to Claude Code.
Name: Figma MCP
Merge into: ~/.claude/mcp.json under mcpServers

---
{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-mcp"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "<YOUR_FIGMA_TOKEN>"
      }
    }
  }
}

// ── Setup ────────────────────────────────────────────────────────────────────
// 1. Go to Figma > Account Settings > Personal Access Tokens
// 2. Generate a new token with read access
// 3. Replace <YOUR_FIGMA_TOKEN> above
//
// ── Available tools ──────────────────────────────────────────────────────────
// get_file               fetch a Figma file's full structure
// get_file_nodes         fetch specific nodes by ID
// get_file_components    list all components in a file
// get_file_styles        list all styles (colors, text, effects)
// get_image              export a node as PNG, SVG, or PDF
// get_comments           list comments on a file
// post_comment           add a comment to a file
//
// ── Tips ─────────────────────────────────────────────────────────────────────
// - File keys are in the URL: figma.com/file/FILE_KEY/...
// - Node IDs look like "1:23": find them in the Figma URL or Dev Mode
// - Use get_file_components to understand the design system
// - Export SVGs for icons, PNGs for raster images
// - Combine with a code generator skill to go from design to code