Figma MCP Server for Claude

Content

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.

Features

• 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

Use Cases

• 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

Installation

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 Desktop

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

Requirements

• 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)

Configuration

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

Examples

Export all icons from the design system as SVG

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 file

Common usage pattern for this MCP server

Ask Claude: "Get the color palette from this Figma file"

Extract component specifications for developers

Common usage pattern for this MCP server

Ask Claude: "Extract component specifications for developers"

List all text styles used in the design

Common usage pattern for this MCP server

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

Get File Nodes

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"],
});

Security

• 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

Troubleshooting

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.

HTTP 404 error: MCP server not responding

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 error

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 requests

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 server

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 tokens

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 files

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 errors

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 errors

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.

• Source repositorygithub.com 2026-07-18T07:31:52+00:00
• Documentationhelp.figma.com
• Package (SHA-256 pinned)/downloads/mcp/figma-mcp-server.mcpb