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

• "Read the Button component from my design file"
• "What colors are used in this Figma file?"
• "Generate a React component from this Figma frame"