Claude与Figma对话
STDIOClaude与Figma直接交互的MCP服务器
Claude与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 ❤️
git clone https://github.com/arinspunk/claude-talk-to-figma-mcp.git cd claude-talk-to-figma-mcp bun install
bun run buildbun run build:winclaude-talk-to-figma-mcp.dxt from releases.dxt file → Claude Desktop installs automaticallybun run configure-claude (restart Claude Desktop)mcp.json config (screenshot){ "mcpServers": { "ClaudeTalkToFigma": { "command": "bunx", "args": ["claude-talk-to-figma-mcp@latest"] } } }
Import src/claude_mcp_plugin/manifest.json in Figma → Menu → Plugins → Development
bun socket (verify at http://localhost:3055/status)✅ Success: Your AI should confirm connection and you can start designing!
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
✅ 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 | Purpose | Example Use |
|---|---|---|
get_document_info | Document analysis | Get project overview |
get_selection | Current selection | What's selected now |
get_node_info | Element details | Inspect specific component |
get_nodes_info | Multiple elements info | Batch element inspection |
scan_text_nodes | Find all text | Text audit and updates |
get_styles | Document styles | Color/text style audit |
join_channel | Connect to Figma | Establish communication |
export_node_as_image | Asset export | Generate design assets |
| Command | Purpose | Example Use |
|---|---|---|
create_rectangle | Basic shapes | Buttons, backgrounds |
create_frame | Layout containers | Page sections, cards |
create_text | Text elements | Headlines, labels |
create_ellipse | Circles/ovals | Profile pics, icons |
create_polygon | Multi-sided shapes | Custom geometric elements |
create_star | Star shapes | Decorative elements |
clone_node | Duplicate elements | Copy existing designs |
group_nodes | Organize elements | Component grouping |
ungroup_nodes | Separate groups | Break apart components |
insert_child | Nest elements | Hierarchical structure |
flatten_node | Vector operations | Boolean operations |
| Command | Purpose | Example Use |
|---|---|---|
set_fill_color | Element colors | Brand color application |
set_stroke_color | Border colors | Outline styling |
move_node | Positioning | Layout adjustments |
resize_node | Size changes | Responsive scaling |
delete_node | Remove elements | Clean up designs |
set_corner_radius | Rounded corners | Modern UI styling |
set_auto_layout | Flexbox-like layout | Component spacing |
set_effects | Shadows/blurs | Visual polish |
set_effect_style_id | Apply effect styles | Consistent shadow styles |
| Command | Purpose | Example Use |
|---|---|---|
set_text_content | Text updates | Copy changes |
set_multiple_text_contents | Batch text updates | Multi-element editing |
set_font_name | Typography | Brand font application |
set_font_size | Text sizing | Hierarchy creation |
set_font_weight | Text weight | Bold/light variations |
set_letter_spacing | Character spacing | Typography fine-tuning |
set_line_height | Vertical spacing | Text readability |
set_paragraph_spacing | Paragraph gaps | Content structure |
set_text_case | Case transformation | UPPER/lower/Title case |
set_text_decoration | Text styling | Underline/strikethrough |
get_styled_text_segments | Text analysis | Rich text inspection |
load_font_async | Font loading | Custom font access |
| Command | Purpose | Example Use |
|---|---|---|
get_local_components | Project components | Design system audit |
get_remote_components | Team libraries | Shared component access |
create_component_instance | Use components | Consistent UI elements |
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.
bun run test # Run all tests bun run test:watch # Watch mode bun run test:coverage # Coverage report
bun run test:integration # Guided end-to-end testing
bun socket is runningbun run configure-claude and restart Claudemcp.json fileload_font_async to verify font availabilitynode_modules → bun install → bun run build+----------------+ +-------+ +---------------+ +---------------+
| | | | | | | |
| Claude Desktop |<--->| MCP |<--->| WebSocket Srv |<--->| Figma Plugin |
| (AI Agent) | | | | (Port 3055) | | (UI Plugin) |
| | | | | | | |
+----------------+ +-------+ +---------------+ +---------------+
Design Principles:
Benefits:
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
git checkout -b feature/amazing-featureset_stroke_color tool now correctly accepts a strokeWeight of 0 for creating invisible strokes.npm run build:dxt, npm run pack)See CHANGELOG.md for complete version history.
License: MIT License - see LICENSE file
Authors:
Acknowledgments: