▌BestMCPTools.org
Figma MCP Server logo

Figma MCP Server

Figma's official MCP server: bring live design context directly into AI coding tools like Cursor, Claude Code, and VS Code.

DesignFreemiumClaude CodeCursorVS CodeWindsurfCodexXcodeEasy
Visit Tool
Own Figma MCP Server? Boost it to the top.✦ Upgrade to Featured

Maintenance status

Repository link unavailable
Checked September 28, 2026

The GitHub link we had for this server no longer resolves.

How to Install Figma MCP Server

$https://mcp.figma.com/mcp

Requires Claude Desktop, Cursor, Windsurf, or another MCP-compatible client.

Setup by client

Cursor (~/.cursor/mcp.json)

{
  "mcpServers": {
    "figma-mcp": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

VS Code (.vscode/mcp.json)

{
  "servers": {
    "figma-mcp": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

Claude Code (terminal)

claude mcp add --transport http figma-mcp https://mcp.figma.com/mcp

Add any API keys or environment variables the server's README lists.

About Figma MCP Server

The Figma MCP Server connects your Figma design files directly to AI-powered coding workflows via the Model Context Protocol. AI agents can read your full design context (component hierarchy, layout constraints, spacing tokens, variables, and styles) and generate design-accurate code without screenshots. It also supports bidirectional workflows: write back to the Figma canvas to create frames, components, variables, and auto layout from your AI tool. Code Connect maps Figma components to your actual codebase for consistent, production-ready output. Supported in Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, Codex, and Xcode. For 3D work, the Blender MCP setup brings the same kind of agent control to scenes and renders.

Key Features

  • design
  • figma
  • design-to-code
  • frontend
  • code-generation

Pricing

Freemium: from Free (beta). Starter: 6 calls/mo; higher limits on paid Figma plans

Pros & Cons

Pros

  • Drop-in support across MCP-compatible AI clients
  • Reduces prompt boilerplate by exposing concrete tool calls
  • Active community and ongoing updates

Cons

  • Requires an MCP-capable client to use
  • Initial setup can require configuration
  • Capability surface depends on what the underlying service exposes

Best For

  • AI engineers wiring assistants into real tools
  • Teams adopting MCP as an integration standard
  • Power users who want more than chat

Our Take on Figma MCP Server

Figma's official MCP: the canonical bridge between design files and AI coding agents.

Frequently Asked Questions

Tags

#Design#design#figma#design-to-code#frontend#code-generation#components#design-system#ui