Figma Dev Mode MCP

About

Bridge the gap between design and development. Access Figma files, extract design tokens, and generate code from designs.

Installation

{
  "mcpServers": {
    "figma": {
      "env": {
        "FIGMA_ACCESS_TOKEN": "your_figma_token"
      },
      "args": [
        "-y",
        "@figma/mcp-dev-mode"
      ],
      "command": "npx"
    }
  }
}

How to Use

1. 1Generate a personal access token in Figma settings
2. 2Add the configuration with your Figma token
3. 3Access Figma files and design specifications
4. 4Generate code from your designs

Environment Variables