JUHE API Marketplace
arinspunk avatar
MCP Server

Claude Talk to Figma MCP

Enables Claude Desktop and other AI tools to interact directly with Figma, allowing for powerful AI-assisted design capabilities through natural language commands.

170
GitHub Stars
8/23/2025
Last Updated
MCP Server Configuration
1{
2 "name": "ClaudeTalkToFigma",
3 "command": "bunx",
4 "args": [
5 "claude-talk-to-figma-mcp@latest"
6 ]
7}
JSON7 lines

README Documentation

Claude Talk to Figma collage

Claude Talk to Figma MCP

A Model Context Protocol (MCP) plugin that allows Claude Desktop and other AI tools (GitHub Copilot, Cursor, etc.) to interact directly with Figma, enabling powerful AI-assisted design capabilities.

Important: This project is based on cursor-talk-to-figma-mcp by Sonny Lazuardi. It has been adapted to work with Claude Desktop and expanded with additional tools. Original credit belongs to Sonny Lazuardi ❤️

⚡ Installation

1. Prerequisites

2. Setup

git clone https://github.com/arinspunk/claude-talk-to-figma-mcp.git
cd claude-talk-to-figma-mcp
bun install
  • macOS/Linux: bun run build
  • Windows: bun run build:win

3. AI client configuration

Option 1: DXT Package (Claude Desktop only)

  1. Download: Get the latest claude-talk-to-figma-mcp.dxt from releases
  2. Install: Double-click the .dxt file → Claude Desktop installs automatically

Option 2: JSON (Claude Desktop or Cursor)

  • Claude Desktop: Run bun run configure-claude (restart Claude Desktop)
  • Cursor:
    1. Go to Cursor Settings → Tools & Integrations
    2. Click "New MCP Server" to open mcp.json config (screenshot)
    3. Add this configuration:
    {
      "mcpServers": {
        "ClaudeTalkToFigma": {
          "command": "bunx",
          "args": ["claude-talk-to-figma-mcp@latest"]
        }
      }
    }
    
    1. Save the file (screenshot)

4. Setup Figma Plugin (Required for all methods)

Import src/claude_mcp_plugin/manifest.json in Figma → Menu → Plugins → Development

4. First Connection

  1. Start server: bun socket (verify at http://localhost:3055/status)
  2. Connect plugin: Open Claude MCP Plugin in Figma → copy channel ID
  3. Test: Ask your AI client: "Talk to Figma, channel {channel-ID}"

Success: Your AI should confirm connection and you can start designing!


🚀 Core Concepts

How It Works

Claude Desktop ↔ MCP Server ↔ WebSocket Server ↔ Figma Plugin

Simple: Claude sends design commands → Figma executes them in real-time
Bidirectional: Get info from Figma, create/modify elements, manage components

Key Capabilities

  • Document Interaction: Analyze designs, get selections, export assets
  • Element Creation: Shapes, text, frames with full styling control
  • Smart Modifications: Colors, effects, auto-layout, responsive design
  • Text Mastery: Advanced typography, font loading, text scanning
  • Component Integration: Local and team library components

🛠️ Usage Patterns

Getting Started with AI Design

  1. Make Claude a UX expert: Use this prompt 🎨
  2. Connect to your project: "Talk to Figma, channel {channel-ID}"
  3. Start designing: "Create a mobile app login screen with modern styling"

Effective Prompting Examples

✅ Good: "Create a dashboard with a sidebar navigation, header with user profile, and main content area with card-based metrics"

✅ Good: "Redesign this button component with hover states and better contrast ratios"

❌ Avoid: "Make it look nice" (too vague)

📚 Command Reference

📄 Document Tools

CommandPurposeExample Use
get_document_infoDocument analysisGet project overview
get_selectionCurrent selectionWhat's selected now
get_node_infoElement detailsInspect specific component
get_nodes_infoMultiple elements infoBatch element inspection
scan_text_nodesFind all textText audit and updates
get_stylesDocument stylesColor/text style audit
join_channelConnect to FigmaEstablish communication
export_node_as_imageAsset exportGenerate design assets

🔧 Creation Tools

CommandPurposeExample Use
create_rectangleBasic shapesButtons, backgrounds
create_frameLayout containersPage sections, cards
create_textText elementsHeadlines, labels
create_ellipseCircles/ovalsProfile pics, icons
create_polygonMulti-sided shapesCustom geometric elements
create_starStar shapesDecorative elements
clone_nodeDuplicate elementsCopy existing designs
group_nodesOrganize elementsComponent grouping
ungroup_nodesSeparate groupsBreak apart components
insert_childNest elementsHierarchical structure
flatten_nodeVector operationsBoolean operations

✏️ Modification Tools

CommandPurposeExample Use
set_fill_colorElement colorsBrand color application
set_stroke_colorBorder colorsOutline styling
move_nodePositioningLayout adjustments
resize_nodeSize changesResponsive scaling
delete_nodeRemove elementsClean up designs
set_corner_radiusRounded cornersModern UI styling
set_auto_layoutFlexbox-like layoutComponent spacing
set_effectsShadows/blursVisual polish
set_effect_style_idApply effect stylesConsistent shadow styles

📝 Text Tools

CommandPurposeExample Use
set_text_contentText updatesCopy changes
set_multiple_text_contentsBatch text updatesMulti-element editing
set_font_nameTypographyBrand font application
set_font_sizeText sizingHierarchy creation
set_font_weightText weightBold/light variations
set_letter_spacingCharacter spacingTypography fine-tuning
set_line_heightVertical spacingText readability
set_paragraph_spacingParagraph gapsContent structure
set_text_caseCase transformationUPPER/lower/Title case
set_text_decorationText stylingUnderline/strikethrough
get_styled_text_segmentsText analysisRich text inspection
load_font_asyncFont loadingCustom font access

🎨 Component Tools

CommandPurposeExample Use
get_local_componentsProject componentsDesign system audit
get_remote_componentsTeam librariesShared component access
create_component_instanceUse componentsConsistent UI elements

Building DXT Package (Developers)

To create your own DXT package:

npm run build:dxt    # Builds TypeScript and packages DXT

This creates claude-talk-to-figma-mcp.dxt ready for distribution.


🧪 Testing & Quality Assurance

Automated Testing

bun run test            # Run all tests
bun run test:watch      # Watch mode
bun run test:coverage   # Coverage report

Integration Testing

bun run test:integration  # Guided end-to-end testing

Manual Verification Checklist

  • WebSocket server starts on port 3055
  • Figma plugin connects and generates channel ID
  • AI tool recognizes "ClaudeTalkToFigma" MCP (Claude Desktop, Cursor, etc.)
  • Basic commands execute (create rectangle, change color)
  • Error handling works (invalid commands, timeouts)
  • Channel communication works between AI tool and Figma

🐛 Troubleshooting & Support

Connection Issues

  • "Can't connect to WebSocket": Ensure bun socket is running
  • "Plugin not found": Verify plugin import in Figma Development settings
  • "MCP not available":
    • Claude Desktop: Run bun run configure-claude and restart Claude
    • Cursor IDE: Check MCP configuration in mcp.json file
    • Other AI tools: Verify MCP integration settings

Execution Problems

  • "Command failed": Check Figma development console for errors
  • "Font not found": Use load_font_async to verify font availability
  • "Permission denied": Ensure you have edit access to the Figma document
  • "Timeout errors": Complex operations may need retry

Performance Issues

  • Slow responses: Large documents may require more processing time
  • Memory usage: Close unused Figma tabs, restart if necessary
  • WebSocket disconnects: Server auto-reconnects, restart if persistent

Common Solutions

  1. Restart sequence: Stop server → Close AI tool → Restart both
  2. Clean reinstall: Delete node_modulesbun installbun run build
  3. Check logs: Server terminal shows detailed error messages
  4. Update fonts: Some team fonts require manual loading in Figma
  5. Configuration check: Verify MCP setup in your AI tool's settings
  6. Port conflicts: Ensure port 3055 is not used by other applications

🏗️ Advanced Topics

Architecture Deep Dive

+----------------+     +-------+     +---------------+     +---------------+
|                |     |       |     |               |     |               |
| Claude Desktop |<--->|  MCP  |<--->| WebSocket Srv |<--->| Figma Plugin  |
|   (AI Agent)   |     |       |     |  (Port 3055)  |     |  (UI Plugin)  |
|                |     |       |     |               |     |               |
+----------------+     +-------+     +---------------+     +---------------+

Design Principles:

  • MCP Server: Business logic, validation, default values
  • WebSocket Server: Message routing and protocol translation
  • Figma Plugin: Pure command executor in Figma context

Benefits:

  • Clear separation of concerns
  • Easy testing and maintenance
  • Scalable architecture for additional tools

Project Structure

src/
  talk_to_figma_mcp/     # MCP Server implementation
    server.ts            # Main entry point
    tools/               # Tool categories by function
      document-tools.ts  # Document interaction
      creation-tools.ts  # Shape and element creation
      modification-tools.ts # Property modification
      text-tools.ts      # Text manipulation
    utils/               # Shared utilities
    types/               # TypeScript definitions
  claude_mcp_plugin/     # Figma plugin
    code.js              # Plugin implementation
    manifest.json        # Plugin configuration

Contributing Guidelines

  1. Fork and Branch: git checkout -b feature/amazing-feature
  2. Code Standards: Follow existing TypeScript patterns
  3. Testing: Add tests for new functionality
  4. Documentation: Update relevant sections
  5. Pull Request: Clear description of changes

Recent Contributors


📋 Version History

Current: 0.6.1

  • 🔧 Tool Fix: The set_stroke_color tool now correctly accepts a strokeWeight of 0 for creating invisible strokes.

Previous: 0.6.0

  • 🚀 DXT Package Support: one-click installation via Claude Desktop's extension manager (Thanks to Taylor Smits - PR #17)
  • 📦 Automated Distribution: GitHub Actions workflow for automatic DXT package generation and release uploads
  • ⚡ Enhanced UX: Installation time reduced from 15-30 minutes to 2-5 minutes for end users
  • 🔧 Developer Tools: New build scripts for DXT packaging (npm run build:dxt, npm run pack)

See CHANGELOG.md for complete version history.


📄 License & Credits

License: MIT License - see LICENSE file

Authors:

  • Xúlio Zé - Claude adaptation - GitHub
  • Sonny Lazuardi - Original implementation - GitHub

Acknowledgments:

  • Anthropic team for Claude and Model Context Protocol
  • Figma community for excellent plugin API
  • Bun team for fast JavaScript runtime

Quick Install

Quick Actions

Key Features

Model Context Protocol
Secure Communication
Real-time Updates
Open Source