Figma MCP PRO

Figma MCP PRO provides an MCP server workflow to analyze Figma designs, convert them into AI-friendly data, map designer comments to UI elements, and export assets for rapid design-to-code iteration. This enables you to generate framework-ready code across multiple targets while preserving design intent and asset fidelity.

How to use

You run the MCP server with a client capable of communicating with MCP endpoints. Start by selecting your target framework, then fetch design data from Figma, process designer comments into actionable implementation prompts, download export-ready assets, and finally analyze the reference design to guide development.

Key practical workflow steps you can perform with the MCP client include: selecting a framework, extracting AI-optimized design data, mapping comments to elements, downloading assets with original export settings, and checking the reference analysis to inform development decisions.

How to install

Prerequisites you need before installing: Node.js and NPM installed on your system.

Option 1: Install via Smithery (automatic integration) use the following command:

npx -y @smithery/cli install @artemsvit/figma-mcp-pro --client claude

Option 2: Manual installation (local installation) run this command to install globally:

npm install -g figma-mcp-pro

Initial configuration and start

Obtain your Figma API key from Figma Account Settings → Personal access tokens.

Create and configure the MCP settings to run the MCP server in stdio mode. Use the example below and replace your API key where indicated.

{
  "mcpServers": {
    "Figma MCP PRO": {
      "command": "npx",
      "args": ["figma-mcp-pro@latest", "--figma-api-key", "your-api-key-here"],
      "env": {
        "DEBUG": "true"
      }
    }
  }
}

How to run after setup

With the configuration above, you start the MCP server by executing the command from your MCP client or by running the equivalent runtime command directly in your shell: npx figma-mcp-pro@latest --figma-api-key your-api-key-here.

Available tools

show_frameworks

Lists available frameworks to target and select the desired one for code generation.

get_figma_data

Extracts AI-optimized design data from a Figma URL for the chosen framework, including layout, styling, and structure.

process_design_comments

Maps designer comments to specific design elements and generates actionable implementation prompts.

download_design_assets

Downloads assets from Figma with their original export settings and produces a visual reference image.

check_reference

Analyzes the reference image to provide design understanding and development recommendations for the chosen framework.