TC
ToolCompared
MCP Server

Figma MCP MCP Server

by Figma

Read frames and components and convert designs to code.

OfficialTypeScriptDesign Tools
Documentation

About Figma MCP

Figma MCP exposes file and frame data, allowing agents to inspect components, extract design tokens, and generate frontend code aligned with Figma sources.

Tags

designcomponentstokens

How to install Figma MCP

Add the following entry to your MCP client config (e.g. claude_desktop_config.json or .mcp.json). Refer to the official repository for the exact command, package name, and required environment variables.

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-figma"]
    }
  }
}

Example shape only — see the docs for the canonical install command.

Related MCP servers in Design Tools

Canva MCP
Canva

Generate, edit, and export Canva designs from chat.

Magic
21st.dev

Generate UI components from natural language inside your IDE.

Penpot
Penpot

Open-source design and prototyping platform with native MCP.

Figma Context
Framelink

Simplified Figma layout data for AI coding agents.

← Back to MCP directory