Figma Design Reader

Figma Design Reader

Bridge the gap between design and code. Read Figma files, explore component trees, extract design tokens, and ask your AI to generate code from designs — without switching tools.

Setup

1. Get a Figma personal access token at https://www.figma.com/settings (Personal access tokens section)
2. Add to your MCP config:

{
  "mcpServers": {
    "figma-design-reader": {
      "command": "npx",
      "args": ["-y", "@mcphub/figma-design-reader"],
      "env": { "FIGMA_TOKEN": "figd_..." }
    }
  }
}

Example Prompts