figma-mcp-integration

Read and modify Figma designs programmatically through Model Context Protocol integration.

4|Updated May 16, 2026

Search Tags:#figma #mcp #prototyping #model context protocol #design automation #cursor #auto layout

Ready to run

npx skills add https://github.com/reason-machines/design-skills --skill figma-mcp-integration-reason-machines

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: figma-mcp-integration
Source: https://github.com/reason-machines/design-skills/tree/main/skills/figma-mcp-integration
Command: npx skills add https://github.com/reason-machines/design-skills --skill figma-mcp-integration-reason-machines

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designers and developers cannot programmatically read or edit Figma files from AI agents, forcing manual repetition of tasks like bulk text updates, component creation, and layout adjustments. ## Core Features & Use Cases - Design Reading and Querying: Retrieve document structure, selections, and node details via MCP tools like get_document_info, get_node_info, and scan_text_nodes. - Element Creation and Styling: Create frames, rectangles, text, and component instances, then apply fills, strokes, corner radii, and auto layout configuration. - Batch Operations: Perform bulk text replacement, annotation conversion, instance override propagation, and prototype connector visualization. - Use Case: Localize an entire Figma design by scanning all text nodes in chunks, mapping strings to translations, and applying updates with set_multiple_text_contents in one automated pass. ## Quick Start Connect to my Figma file through the TalkToFigma MCP server and update all placeholder text in the selected frame with real content.

Frequently Asked Questions about figma-mcp-integration

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I connect an AI agent to Figma using MCP?▼

Install Bun, clone the cursor-talk-to-figma-mcp repository, run bun setup and bun socket to start the WebSocket server, then add the TalkToFigma server to ~/.cursor/mcp.json. Finally install the Figma plugin and join a channel with the join_channel tool.

How to batch update text in Figma programmatically?▼

Use scan_text_nodes with chunked startIndex and chunkSize parameters to collect all text nodes, filter the ones to change, then call set_multiple_text_contents with an array of nodeId and characters pairs to apply all updates at once.

Does Figma MCP integration work on Windows with WSL?▼

Yes, but you must install Bun via PowerShell and edit src/socket.ts to set hostname to 0.0.0.0 so the WebSocket server accepts connections from WSL. Firewall settings may also need adjustment.

Why are my Figma MCP commands not reaching the Figma plugin?▼

Commands fail when the agent has not joined a channel first. Call join_channel with a channelId before any other operation, and confirm the Figma plugin is running and connected to the same channel.

Can I export Figma nodes as images through MCP?▼

Yes, the export_node_as_image tool exports nodes as PNG, JPG, or SVG with an optional scale factor. The current implementation returns the image as base64-encoded text rather than writing files directly.