skills.rest
Aradotso
AradotsoOFFICIAL
Explore all skills by this author →
Website𝕏@aradotsoGitHub

figma-mcp-integration

Read and modify Figma designs via Model Context Protocol.

3|Updated May 16, 2026
Search Tags:#figma#mcp#ai integration#design automation#node editing#batch text updates#prototype exports
One-click install
npx skills add https://github.com/Aradotso/design-skills --skill figma-mcp-integration
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-mcp-integration
Source: https://github.com/Aradotso/design-skills/tree/main/skills/figma-mcp-integration
Command: npx skills add https://github.com/Aradotso/design-skills --skill figma-mcp-integration

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Automates repetitive Figma work by letting AI agents read, update, and create design elements directly instead of doing it manually inside the editor.

Core Features & Use Cases

  • MCP-based Figma access: Connect an AI agent to Figma through Model Context Protocol using a plugin + MCP server workflow.
  • Design inspection and node operations: Fetch document info, selection, node details, and perform move/resize/clone/delete operations.
  • Mass editing at scale: Batch update text nodes, configure auto layout, styling (fills/strokes/radius), and apply instance overrides.
  • Prototyping support: Visualize prototype reactions and create connection flows.
  • Export outputs: Export nodes as PNG/SVG/JPG for downstream use.

Quick Start

Tell the AI to connect to the MCP server, join a channel, read the current selection and then set the updated text content for the selected Figma text nodes.

Frequently Asked Questions about figma-mcp-integration

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

FAQPage Schema
How do I use AI to automate Figma design edits via MCP?▼

To automate Figma design edits via MCP, you connect an AI agent to Figma using a plugin and MCP server workflow. This allows the agent to read document structures, update text nodes, and modify auto-layout configurations programmatically.

Can I batch update text nodes in Figma using an AI agent?▼

Yes, you can batch update text nodes in Figma by instructing your AI agent to read the current selection and set the updated text content. The MCP integration supports mass editing operations including text, styling, and instance overrides.

What do I need to set up before connecting AI to Figma through MCP?▼

Before connecting AI to Figma through MCP, you need an MCP server runtime setup. You establish the connection by joining a channel through the Figma plugin, which enables the AI agent to inspect document details and perform node operations.

How does MCP handle Figma node queries and image export?▼

MCP handles Figma node queries and image export by allowing AI agents to fetch node details, apply styling configurations, and export results. The AI can export selected nodes as PNG, SVG, or JPG files for downstream use.

What are the limitations of editing Figma designs with AI automation?▼

Limitations of editing Figma designs with AI automation include the dependency on a continuous MCP server runtime and plugin connection. Complex operations require precise node queries and tool calls to ensure overrides and auto-layout changes execute correctly.

Related Skills

Explore More Design & Creative Skills→
Sacred-GSacred-G
2

figma-create-design-system-rules

Generates design system rules from Figma MCP context for AI agents.

Community
Advanced
vm0-aivm0-ai
76

figma

Accesses Figma REST API to read files, export images, and retrieve metadata.

Official
Intermediate
shane9coyshane9coy
1

mcp-builder

Guide MCP server development in Python and Node/TypeScript for LLM tool integration.

Community
Advanced
phuetzphuetz
30

figma

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

Community
Intermediate