Submit
MCP Servers2025-09-18

Figma MCP Server for Claude

Access designs, export assets, and interact with Figma files through Claude

designfigmaui-uxassetsgraphics

Author

Figma

Added

2025-09-18

Setup time

2 minutes

Difficulty

beginner

Quick use

Install command

1 lines
claude mcp list && claude mcp status figma

Claude config

.claude/settings.json

6 lines
{
  "figma": {
    "url": "http://127.0.0.1:3845/mcp",
    "transport": "http"
  }
}

Source asset

json

6 lines
{
  "figma": {
    "url": "http://127.0.0.1:3845/mcp",
    "transport": "http"
  }
}

Section

Content

Expand

Enable your AI assistants to seamlessly interact with Figma Desktop through the built-in Dev Mode MCP Server. Access design files in real-time, export assets in multiple formats, extract design tokens and specifications, and automate design-to-code workflows directly through natural language commands.

Section

Features

Expand
  • Access and browse Figma designs in real-time
  • Export assets in various formats (PNG, SVG, PDF)
  • Read design specifications and properties
  • Navigate through pages and frames programmatically
  • Extract text content and style information
  • Advanced Figma design file and component management with team collaboration features, version control, and design system integration
  • Batch operations support for efficient bulk design operations, component updates, and asset management with automatic rate limit handling and retry logic
  • Real-time design synchronization capabilities with webhook integration support for monitoring design changes and triggering automated workflows

Section

Use Cases

Expand
  • Export design assets for development implementation
  • Extract design tokens and specifications
  • Generate code from design components
  • Analyze design systems for consistency
  • Create design documentation automatically
  • Build automated design workflow systems that sync external systems with Figma for real-time design asset management and collaboration

Section

Installation

Expand

Claude Code

  1. claude mcp add --transport http figma-dev-mode-mcp-server http://127.0.0.1:3845/mcp
  2. Verify installation: claude mcp list
  3. Test connection: claude mcp status figma
Claude CodeDetails
  1. claude mcp add --transport http figma-dev-mode-mcp-server http://127.0.0.1:3845/mcp
  2. Verify installation: claude mcp list
  3. Test connection: claude mcp status figma
Claude DesktopDetails
  1. Ensure Figma Desktop is running and open Figma Desktop preferences
  2. Enable Dev Mode MCP Server in Figma Desktop settings (verify it's active on port 3845)
  3. Open Claude Desktop configuration file
  4. Add the Figma server configuration pointing to http://127.0.0.1:3845/mcp with HTTP transport
  5. Restart Claude Desktop

Section

Requirements

Expand
  • Figma Desktop application installed and running (download from https://www.figma.com/downloads/)
  • Figma Desktop Dev Mode MCP Server enabled (check Figma Desktop preferences/settings to enable)
  • Figma Desktop running with MCP Server active on local port 3845 (http://127.0.0.1:3845/mcp)
  • Internet connection (for initial Figma Desktop installation, though MCP server operates locally)
  • Claude Desktop 0.7.0+ or Claude Code with MCP support
  • Understanding of Figma design concepts (pages, frames, components, assets, design tokens)
  • HTTP transport support (local MCP server on 127.0.0.1:3845, not remote or stdio)
  • File permissions in Figma (appropriate access to files you want to interact with)
  • WSL users: Windows-native Claude Code installation or port forwarding (MCP binds to 127.0.0.1 which WSL cannot access directly)
  • Understanding that MCP Server can't serve assets directly from browser (access through Claude Code or configured MCP client)

Section

Examples

Expand

Export all icons from the design system as SVG

Common usage pattern for this MCP server

Export all icons from the design system as SVGDetails

Common usage pattern for this MCP server

Ask Claude: "Export all icons from the design system as SVG"
Get the color palette from this Figma fileDetails

Common usage pattern for this MCP server

Ask Claude: "Get the color palette from this Figma file"
Extract component specifications for developersDetails

Common usage pattern for this MCP server

Ask Claude: "Extract component specifications for developers"
List all text styles used in the designDetails

Common usage pattern for this MCP server

Ask Claude: "List all text styles used in the design"
Get File NodesDetails

Retrieve specific nodes from a Figma file with version control

// Get Figma file nodes
const file = await figma.files.get({
  file_key: "file-key",
  version: "latest",
  ids: ["node-id-1", "node-id-2"]
});

Section

Security

Expand
  • Only works with local Figma Desktop instance
  • Requires appropriate file permissions in Figma
  • No external API keys or authentication needed
  • Figma API tokens and personal access tokens must be securely stored and never exposed in client-side code or public repositories - use environment variables and secure credential management
  • Figma OAuth access tokens should be used for third-party integrations to ensure proper access control, token lifecycle management, and automatic token refresh
  • Figma file keys and node IDs may expose design structure and team information - ensure Figma resource identifiers are kept private and not shared in public configurations
  • Rate limiting and API quota management are critical for Figma MCP servers - implement proper rate limit handling, retry logic, and quota monitoring to prevent service disruption
  • Figma webhook configurations and payloads may contain sensitive design metadata and component information - ensure webhook endpoints are properly secured with authentication and HTTPS encryption
  • Figma Desktop MCP Server runs locally and binds to 127.0.0.1:3845 - ensure local network security and firewall rules prevent unauthorized access to the MCP server endpoint

Section

Troubleshooting

Expand

Invalid sessionId error from MCP endpoint

Change transport type from sse to http in MCP config. Remove old config: claude mcp remove figma-dev-mode-mcp-server, then re-add with http transport at http://127.0.0.1:3845/mcp.

Invalid sessionId error from MCP endpointDetails

Change transport type from sse to http in MCP config. Remove old config: claude mcp remove figma-dev-mode-mcp-server, then re-add with http transport at http://127.0.0.1:3845/mcp.

HTTP 404 error: MCP server not respondingDetails

Ensure Figma Desktop app is running and Dev Mode MCP Server is active. Check Figma preferences to verify MCP Server is enabled. Restart Figma Desktop if server doesn't appear.

Connection failed: invalid request body errorDetails

Verify you're using http transport, not sse. Update config URL to http://127.0.0.1:3845/mcp. Check request format matches MCP protocol specification for initialize request.

Cannot access assets - 404 on asset requestsDetails

MCP Server can't serve assets directly from browser. Access assets through Claude Code or configured MCP client. Verify file is open in Figma Desktop and permissions allow export.

WSL users cannot connect to local MCP serverDetails

Figma MCP binds only to 127.0.0.1 which WSL can't access. Use Windows-native Claude Code installation or configure port forwarding from WSL to Windows host for 127.0.0.1:3845.

Figma MCP server authentication errors with API tokensDetails

Verify API token is valid and not expired. Check token permissions match required operations. Ensure token format is correct (Bearer token in Authorization header). For OAuth integrations, verify token refresh logic is working correctly.

Figma rate limit errors when accessing large filesDetails

Implement exponential backoff retry logic with jitter. Use Figma API rate limit headers to monitor usage. Reduce concurrent requests. Cache frequently accessed file data. Figma allows 200 requests per minute per token.

Figma file or node access denied errorsDetails

Verify API token has access to the file. Check file permissions and team membership. Ensure token has required permissions (file read, file write) for target operations.

Figma MCP server connection timeouts or network errorsDetails

Check network connectivity and firewall settings. Verify Figma API endpoints are accessible. Increase request timeout values. Implement connection pooling and retry mechanisms with exponential backoff.

0% complete