figma-mcp-server for development integration

figma-mcp-server

npxStandard

The Figma MCP server connects Figma with Gemini CLI, Cursor, and Claude Desktop. It exposes Figma's design files and resources to AI agents, allowing them to read, modify, and create designs. Developers use it to automate design workflows, generate code from designs, and integrate Figma with other development tools.

810Updated 1 month ago

Overview

The Figma MCP server connects Figma with Gemini CLI, Cursor, and Claude Desktop. It exposes Figma's design files and resources to AI agents, allowing them to read, modify, and create designs. Developers use it to automate design workflows, generate code from designs, and integrate Figma with other development tools.

Installation

1Install the package

npxnpx -y figma-mcp-server

2Add to Claude

Add this configuration to your claude_desktop_config.json:

claude_desktop_config.json

{
  "mcpServers": {
    "figma-mcp-server-npm": {
      "command": "npx",
      "args": [
        "-y",
        "npx -y figma-mcp-server"
      ]
    }
  }
}

3Verify installation

Restart Claude Desktop, then ask:

"What tools do you have available from figma-mcp-server?"

Prerequisites

Node.js 18 or higher
npm or npx available
Claude Desktop or Claude API access
API key for figma-mcp-server

Configuration

API Key Required

This server requires an API key from figma-mcp-server. Add it to your environment or config.

Variable	Required	Description
FIGMA-MCP-SERVER_API_KEY	Yes	Your figma-mcp-server API key

Usage Examples

List Resources

"What resources are available in figma-mcp-server?"

Claude will query available resources and return a list of what you can access.

Get Details

"Show me details about [specific item] in figma-mcp-server"

Claude will fetch and display detailed information about the requested item.

Create New

"Create a new [item] in figma-mcp-server with [details]"

Claude will use the appropriate tool to create the resource and confirm success.

Works with figma-mcp-server

Collaborative interface design tool with AI features

Google's multimodal AI model and assistant

AI-first code editor

AI assistant built for thoughtful, nuanced conversation

Browse all tools |Check your stack

Related skills

Browse all skills

system-prompts-and-models-of-ai-tools-chinese

@CreatorEdition

apple_foundation_models_claude_skill

@thetronjohnson

claude-code-builder

web-design-studio

Need help with MCP integration?

We build custom MCP integrations for B2B companies. From simple connections to complex multi-tool setups.

View implementation services