Claude Talk To Figma MCP

Claude Talk to Figma MCP is a plugin based on the Model Context Protocol that allows AI tools such as Claude Desktop to directly interact with Figma, enabling AI-assisted design capabilities. The project connects the AI client and the Figma plugin through a WebSocket server, supporting design operations such as document analysis, element creation and modification, and text processing.

Developer tools Image and video processing #AI Design #Figma Plugin #MCP Protocol .TypeScript

rating : 3 points

downloads : 0

update time : 2025-07-24

What is the Claude Talk to Figma MCP Server?

This is an MCP plugin that allows AI tools such as Claude Desktop to directly interact with Figma, enabling AI-assisted design capabilities. Through this server, users can use natural language instructions to create, modify, and analyze design elements in Figma.

How to use the Claude Talk to Figma MCP Server?

After installation, connect to the MCP server by configuring AI tools (such as Claude Desktop or Cursor), and then enter specific commands in the AI to interact with Figma. You need to import the plugin into Figma and establish a connection first.

Applicable Scenarios

Suitable for scenarios where designers collaborate with AI for rapid prototyping, automatic UI component creation, batch modification of design elements, generation of design documents, etc.

Main Features

Design Element CreationSupports the creation of various design elements such as shapes, text boxes, and frames, and allows setting of style attributes.

Design Element ModificationCan adjust attributes such as color, size, position, and font, and supports batch operations.

Text ManagementSupports text content updates, font style settings, paragraph format adjustments, etc.

Component IntegrationSupports the use of components from local and team libraries to improve design consistency.

Real-time InteractionReal-time communication can be established between AI and Figma, instantly reflecting design changes.

Advantages and Limitations

Advantages

Improve design efficiency and reduce manual operations

Support natural language interaction, lowering the usage threshold

Compatible with multiple AI tools (such as Claude Desktop, Cursor, etc.)

Provide rich design operation capabilities

Limitations

Requires certain technical configuration and settings

May have performance limitations for complex designs

Some advanced features may require additional configuration

How to Use

Install Dependencies

Ensure that Claude Desktop, Figma Desktop, and the Bun runtime environment are installed.

Clone the Project

Clone the project from GitHub to your local computer.

Install Dependencies

Enter the project directory and install all dependencies.

Build the Server

Build the MCP server according to your operating system.

Configure the AI Client

Configure the MCP according to the AI tool you are using (such as Claude Desktop or Cursor).

Start the Server

Run the WebSocket server to establish a connection with Figma.

Connect the Figma Plugin

Import the plugin into Figma and obtain the channel ID for the AI tool to connect.

Start Interaction

Enter commands in the AI tool, such as 'Talk to Figma, channel {channel-ID}' to start design operations.

Usage Examples

Create a Login InterfaceUse natural language instructions to let AI create a login interface containing a username input box, a password input box, and a login button.

Modify Button StylesLet AI modify the color, font, and border style of existing buttons to match the brand design specifications.

Batch Update TextLet AI batch update the content and format of multiple text elements, such as titles and subtitles.

Frequently Asked Questions

How to solve connection problems?

Why can't I see the Figma plugin?

How to handle font loading failures?

What should I do if I encounter an error when executing a command?

How to update the MCP server?

Related Resources

Official GitHub Repository

A GitHub repository containing the complete code and documentation

Figma Plugin Development Guide

Official documentation for Figma plugin development

Claude Desktop Usage Tutorial

Instructions for downloading and using Claude Desktop

Cursor IDE MCP Configuration Guide

Detailed instructions for MCP configuration in Cursor IDE

Bun JavaScript Runtime

Bun is a fast JavaScript and TypeScript runtime

🚀 Claude Talk to Figma MCP

This Model Context Protocol (MCP) plugin enables direct interaction between Claude Desktop and other AI tools (such as GitHub Copilot and Cursor) with Figma, offering powerful AI-assisted design capabilities.

⚠️ Important Note

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

⚡ Installation

Prerequisites

Install Claude Desktop or Cursor, Figma Desktop, and Bun.

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)

Download: Obtain the latest claude-talk-to-figma-mcp.dxt from releases.
Install: Double-click the .dxt file, and Claude Desktop will install it automatically.

Option 2: JSON (Claude Desktop + Cursor)

Claude Desktop: Run bun run configure-claude and restart Claude Desktop.
Cursor:
1. Navigate to Cursor Settings → Tools & Integrations.
2. Click "New MCP Server" to open the mcp.json config (screenshot).
3. Add the following 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

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

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

✨ Features

🚀 Core Concepts

How It Works

Claude Desktop ↔ MCP Server ↔ WebSocket Server ↔ Figma Plugin

Simple: Claude sends design commands, and Figma executes them in real-time.
Bidirectional: Retrieve information from Figma, create/modify elements, and manage components.

Key Capabilities

Document Interaction: Analyze designs, get selections, and export assets.
Element Creation: Create shapes, text, and frames with full styling control.
Smart Modifications: Adjust colors, effects, auto-layout, and implement responsive design.
Text Mastery: Utilize advanced typography, load fonts, and scan text.
Component Integration: Incorporate local and team library components.

🛠️ Usage Patterns

Getting Started with AI Design

Make Claude a UX expert: Use this prompt 🎨
Connect to your project: "Talk to Figma, channel {channel-ID}".
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)

📚 Documentation

📚 Command Reference

📄 Document Tools

Property	Details
`get_document_info`	Document analysis. Example: Get project overview.
`get_selection`	Current selection. Example: What's selected now.
`get_node_info`	Element details. Example: Inspect specific component.
`get_nodes_info`	Multiple elements info. Example: Batch element inspection.
`scan_text_nodes`	Find all text. Example: Text audit and updates.
`get_styles`	Document styles. Example: Color/text style audit.
`join_channel`	Connect to Figma. Example: Establish communication.
`export_node_as_image`	Asset export. Example: Generate design assets.

🔧 Creation Tools

Property	Details
`create_rectangle`	Basic shapes. Example: Buttons, backgrounds.
`create_frame`	Layout containers. Example: Page sections, cards.
`create_text`	Text elements. Example: Headlines, labels.
`create_ellipse`	Circles/ovals. Example: Profile pics, icons.
`create_polygon`	Multi-sided shapes. Example: Custom geometric elements.
`create_star`	Star shapes. Example: Decorative elements.
`clone_node`	Duplicate elements. Example: Copy existing designs.
`group_nodes`	Organize elements. Example: Component grouping.
`ungroup_nodes`	Separate groups. Example: Break apart components.
`insert_child`	Nest elements. Example: Hierarchical structure.
`flatten_node`	Vector operations. Example: Boolean operations.

✏️ Modification Tools

Property	Details
`set_fill_color`	Element colors. Example: Brand color application.
`set_stroke_color`	Border colors. Example: Outline styling.
`move_node`	Positioning. Example: Layout adjustments.
`resize_node`	Size changes. Example: Responsive scaling.
`delete_node`	Remove elements. Example: Clean up designs.
`set_corner_radius`	Rounded corners. Example: Modern UI styling.
`set_auto_layout`	Flexbox-like layout. Example: Component spacing.
`set_effects`	Shadows/blurs. Example: Visual polish.
`set_effect_style_id`	Apply effect styles. Example: Consistent shadow styles.

📝 Text Tools

Property	Details
`set_text_content`	Text updates. Example: Copy changes.
`set_multiple_text_contents`	Batch text updates. Example: Multi-element editing.
`set_font_name`	Typography. Example: Brand font application.
`set_font_size`	Text sizing. Example: Hierarchy creation.
`set_font_weight`	Text weight. Example: Bold/light variations.
`set_letter_spacing`	Character spacing. Example: Typography fine-tuning.
`set_line_height`	Vertical spacing. Example: Text readability.
`set_paragraph_spacing`	Paragraph gaps. Example: Content structure.
`set_text_case`	Case transformation. Example: UPPER/lower/Title case.
`set_text_decoration`	Text styling. Example: Underline/strikethrough.
`get_styled_text_segments`	Text analysis. Example: Rich text inspection.
`load_font_async`	Font loading. Example: Custom font access.

🎨 Component Tools

Property	Details
`get_local_components`	Project components. Example: Design system audit.
`get_remote_components`	Team libraries. Example: Shared component access.
`create_component_instance`	Use components. Example: Consistent 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.

🔧 Technical Details

🧪 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 a 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 the AI tool and Figma.

🏗️ Advanced Topics

Architecture Deep Dive

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

Design Principles:

MCP Server: Handles business logic, validation, and default values.
WebSocket Server: Manages message routing and protocol translation.
Figma Plugin: Executes commands in the 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

Fork and Branch: git checkout -b feature/amazing-feature.
Code Standards: Follow existing TypeScript patterns.
Testing: Add tests for new functionality.
Documentation: Update relevant sections.
Pull Request: Provide a clear description of changes.

Recent Contributors

Taylor Smits - Implemented DXT Package Support, automated CI/CD workflows, and improved testing (PR #17, PR #13, PR #14).
easyhak - Fixed the build script not working on Windows OS (PR #10).

🐛 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 the mcp.json file.
- Other AI tools: Verify MCP integration settings.

Execution Problems

"Command failed": Check the 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 to be retried.

Performance Issues

Slow responses: Large documents may require more processing time.
Memory usage: Close unused Figma tabs and restart if necessary.
WebSocket disconnects: The server auto-reconnects; restart if the issue persists.

Common Solutions

Restart sequence: Stop the server, close the AI tool, and restart both.
Clean reinstall: Delete node_modules, run bun install, and then bun run build.
Check logs: The server terminal shows detailed error messages.
Update fonts: Some team fonts require manual loading in Figma.
Configuration check: Verify MCP setup in your AI tool's settings.
Port conflicts: Ensure port 3055 is not used by other applications.

📋 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: Reduced installation time 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 the complete version history.