skills.rest
reason-machines
reason-machinesOFFICIAL
Explore all skills by this author →
Website𝕏@reasonmachinesGitHub

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
One-click install
npx skills add https://github.com/reason-machines/design-skills --skill figma-mcp-integration-reason-machines
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
LutimiLutimi

cursor2figma

Import HTML into Figma and manage design tokens via an MCP server.

Community
Intermediate
AradotsoAradotso
3

figma-use-cli

Automate Figma node creation, editing, inspection, and multi-format export via CLI.

Official
Advanced
IsKenKenYaIsKenKenYa
35

ui-visual-validator

Analyze screenshots to validate UI modifications against design mockups and WCAG guidelines.

Community
Advanced
phuetzphuetz
30

figma

Automate Figma design workflows via REST API, Plugin API, and MCP server.

Community
Intermediate