Figma MCP server integration for design context and code generation.

This plugin provides access to Figma's official MCP server, enabling Claude Code to:

• Read design files and extract component information
• Understand design tokens, styles, and layouts
• Generate code from Figma designs
• Access design system documentation

Figma offers two MCP server options:

The desktop server provides faster response times and works with local Figma files.

• Figma account
• Browser for OAuth authentication

• Figma desktop app installed
• Dev Mode enabled (requires paid Figma plan)
• Figma app running with MCP server enabled

/plugin install figma@claude-code-plugins

No configuration needed. The plugin uses https://mcp.figma.com/mcp by default.

Set the environment variable to use the local desktop server:

export FIGMA_MCP_URL="http://127.0.0.1:3845/mcp"

Or in your Claude Code settings:

{
  "env": {
    "FIGMA_MCP_URL": "http://127.0.0.1:3845/mcp"
  }
}

Uses OAuth with browser-based authentication:

1. First MCP tool usage opens a browser window
2. Log in to your Figma account
3. Grant Claude Code access
4. Authentication completes automatically

Authentication is handled by the Figma desktop app - no additional steps needed.

Analyze the layout of the login screen in my Figma file
Extract the color palette from the design system
List all components used in the dashboard page

Generate React components from the Figma design at [URL]
Create CSS styles matching the button component in Figma
Convert the card component to Tailwind CSS

Export design tokens from the Figma file
Show me the typography scale defined in the design system
List all spacing values used in the design

1. Open Figma desktop app
2. Go to Preferences > Developer
3. Enable MCP Server
4. The server starts on http://127.0.0.1:3845/mcp

Note: Dev Mode requires a Figma Professional, Organization, or Enterprise plan.

1. OAuth fails: Clear browser cookies and retry
2. File not found: Ensure you have access to the Figma file
3. Rate limited: Wait a few minutes before retrying

1. Connection refused: Ensure Figma app is running with MCP server enabled
2. Port conflict: Check if another application is using port 3845
3. Dev Mode required: Verify you have a paid Figma plan with Dev Mode

1. Slow responses: Try the desktop server for faster local access
2. Missing components: Some features require Dev Mode access

• Figma MCP Documentation
• Figma Dev Mode
• Figma REST API

MIT - see LICENSE