Figma MCP Server — Bridge Design and Code with AI

The Figma MCP server bridges design and development by letting your AI assistant read Figma files, extract components, and understand design systems.

Capabilities

• Read file data and structure
• Extract component properties
• Get image exports
• Access design tokens
• Inspect node hierarchies

Setup

Generate a Figma Personal Access Token from your Figma settings page.

Visit our Figma MCP page for the config or use:

{"mcpServers":{"figma":{"command":"npx","args":["-y","@figma/mcp-server"],"env":{"FIGMA_ACCESS_TOKEN":"figd_..."}}}}

Workflow

Ask: “What components are in the main design file?” or “Export the hero section as an image.” Your AI can describe designs in code terms.