Skip to main content
Glama

Claude Talk to Figma MCP

by arinspunk
npmGitHub
TypeScript
MIT License
386
106
  • 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 ❤️

⚡ Quick Start (5 minutes)

Prerequisites

Installation

  1. Setup:
    • macOs / Linux:
      • git clone https://github.com/arinspunk/claude-talk-to-figma-mcp.git && cd claude-talk-to-figma-mcp && bun install && bun run build
    • Windows:
      • git clone https://github.com/arinspunk/claude-talk-to-figma-mcp.git
      • cd claude-talk-to-figma-mcp
      • bun install
      • bun run build:win
  2. Configure Claude: bun run configure-claude (restart Claude Desktop)
  3. Install Figma Plugin: 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 in Claude: "Talk to Figma, channel {channel-ID}"

✅ Success: Claude 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)

Server Management

  • Start: bun socket
  • Stop: Ctrl+C in terminal
  • Status: Check http://localhost:3055/status
  • Restart: Required if connection issues occur

📚 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

🔧 Complete Installation Guide

Detailed Setup Process

  1. Clone and Build:
    git clone https://github.com/arinspunk/claude-talk-to-figma-mcp.git cd claude-talk-to-figma-mcp bun install
    run the appropriate command based on your operating system:
    • macOs / Linux
    bun run build
    • Windows
    bun run build:win
  2. Configure Claude Desktop:
    bun run configure-claude
    This script:
    • Locates your Claude config file (macOS: ~/Library/Application Support/Claude/claude_desktop_config.json)
    • Creates a backup of existing configuration
    • Adds "ClaudeTalkToFigma" to your MCP list
    • Restart Claude Desktop after running this
  3. Install Figma Plugin:
    • Open Figma → Menu > Plugins > Development
    • Select "Import plugin from manifest"
    • Navigate to src/claude_mcp_plugin/manifest.json
    • Plugin appears in your development plugins list
  4. Verify Installation:
    • Claude Desktop: Check "ClaudeTalkToFigma" appears in MCPs selector
    • Figma: Find "Claude MCP Plugin" in your plugins
    • WebSocket: bun socket should start without errors

🧪 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
  • Claude recognizes "ClaudeTalkToFigma" MCP
  • Basic commands execute (create rectangle, change color)
  • Error handling works (invalid commands, timeouts)

🐛 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": Run bun run configure-claude and restart Claude

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 Claude → 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

🏗️ 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.5.3

  • Windows Compatibility: Added dedicated build command for Windows systems
  • Cross-Platform Support: Improved developer experience across all operating systems
  • Build Process Enhancement: Separated Unix/Linux and Windows build workflows
  • Developer Experience: Resolved chmod dependency issues on Windows

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

This server cannot be installed

-
security - not tested
A
license - permissive license
-
quality - not tested

How are these scores calculated?

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

  1. ⚡ Quick Start (5 minutes)
    1. Prerequisites
    2. Installation
    3. 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
    3. Server Management
  4. 📚 Command Reference
    1. 📄 Document Tools
    2. 🔧 Creation Tools
    3. ✏️ Modification Tools
    4. 📝 Text Tools
    5. 🎨 Component Tools
  5. 🔧 Complete Installation Guide
    1. Detailed Setup Process
  6. 🧪 Testing & Quality Assurance
    1. Automated Testing
    2. Integration Testing
    3. Manual Verification Checklist
  7. 🐛 Troubleshooting & Support
    1. Connection Issues
    2. Execution Problems
    3. Performance Issues
    4. Common Solutions
  8. 🏗️ Advanced Topics
    1. Architecture Deep Dive
    2. Project Structure
    3. Contributing Guidelines
  9. 📋 Version History
    1. Current: 0.5.3
  10. 📄 License & Credits

    Related MCP Servers

    • Sketchfab MCP Server

      gregkop
      -
      security
      F
      license
      -
      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 -
      13
      14
      JavaScript

    • mcp-hfspace MCP Server

      xiyuefox
      -
      security
      A
      license
      -
      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 -
      922
      MIT License
      • Apple

    • Talk to Figma MCP

      yhc984
      -
      security
      F
      license
      -
      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 -
      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 -
      10
      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