Skip to main content
Glama

Claude Talk to Figma MCP

by arinspunk
npmGitHub
TypeScript
MIT License
615
134
  • Apple
  • Linux
OverviewInspectNewSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

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

Prerequisites

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

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

Setup Figma Plugin (Required for all methods)

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

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_modules → bun install → bun 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.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
Install Server
A
security – no known vulnerabilities
A
license - permissive license
A
quality - confirmed to work

How are these scores calculated?

local-only server

The server can only run on the client's local machine because it depends on local resources.

Tools

View all tools

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

  1. ⚡ Installation
    1. Prerequisites
    2. Setup
    3. AI client configuration
    4. Setup Figma Plugin (Required for all methods)
    5. First Connection
  2. 🚀 Core Concepts
    1. How It Works
    2. Key Capabilities
  3. 🛠️ Usage Patterns
    1. Getting Started with AI Design
    2. Effective Prompting Examples
  4. 📚 Command Reference
    1. 📄 Document Tools
    2. 🔧 Creation Tools
    3. ✏️ Modification Tools
    4. 📝 Text Tools
    5. 🎨 Component Tools
    6. Building DXT Package (Developers)
  5. 🧪 Testing & Quality Assurance
    1. Automated Testing
    2. Integration Testing
    3. Manual Verification Checklist
  6. 🐛 Troubleshooting & Support
    1. Connection Issues
    2. Execution Problems
    3. Performance Issues
    4. Common Solutions
  7. 🏗️ Advanced Topics
    1. Architecture Deep Dive
    2. Project Structure
    3. Contributing Guidelines
  8. 📋 Version History
    1. Current: 0.6.0
  9. 📄 License & Credits

    Related MCP Servers

    • Sketchfab MCP Server

      gregkop
      A
      security
      F
      license
      A
      quality
      Allows interaction with Sketchfab's 3D model platform through Claude or Cursor, enabling users to search, view details, and download 3D models directly from the AI interface.
      Last updated -
      4
      424
      26
      JavaScript

    • mcp-hfspace MCP Server

      xiyuefox
      A
      security
      A
      license
      A
      quality
      Connects Claude Desktop to Hugging Face Spaces with minimal setup, enabling capabilities like image generation, vision tasks, text-to-speech, and chat with AI models.
      Last updated -
      3
      184
      MIT License
      • Apple

    • Talk to Figma MCP

      yhc984
      A
      security
      F
      license
      A
      quality
      Enables Cursor AI to interact with Figma designs, allowing users to read design information and programmatically modify elements through natural language commands.
      Last updated -
      38
      3,055
      2
      TypeScript

    • Cinema4D MCP Server

      ttiimmaacc
      -
      security
      A
      license
      -
      quality
      Connects Cinema 4D to Claude, enabling AI-assisted 3D modeling and scene manipulation through natural language commands.
      Last updated -
      20
      Python
      MIT License
      • Apple

    View all related MCP servers

    New MCP Servers

    MCP directory API

    We provide all the information about MCP servers via our MCP API.

    curl -X GET 'https://glama.ai/api/mcp/v1/servers/arinspunk/claude-talk-to-figma-mcp'

    If you have feedback or need assistance with the MCP directory API, please join our Discord server