figma-mcp-integration
Enable AI agents to read and modify Figma designs programmatically through Model Context Protocol integration
来源信息
- 仓库
- reason-machines/design-skills
- 最近来源活动
- 2026年5月17日 06:34
- 检测到的 SKILL.md 语言
- 英语
- 星标
- 4
- 分支
- 0
安装方式
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
检查来源文件
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
正在显示 SKILL.md
SKILL.md
来源说明 · 只读预览- name
- figma-mcp-integration
- description
- Enable AI agents to read and modify Figma designs programmatically through Model Context Protocol integration
- triggers
- ["connect to Figma","read Figma design","modify Figma elements","create Figma components","update text in Figma","export Figma nodes","set up Figma MCP","automate Figma design"]
# Figma MCP Integration
> Skill by [ara.so](https://ara.so) — Design Skills collection.
This skill enables AI agents to communicate with Figma through the Model Context Protocol (MCP), allowing programmatic reading and modification of Figma designs. The integration supports creating elements, modifying layouts, batch text updates, annotations, and prototype flow visualization.
## Installation
### 1. Install Bun Runtime
```bash
curl -fsSL https://bun.sh/install | bash
```
### 2. Quick Setup
```bash
# Clone and setup
git clone https://github.com/grab/cursor-talk-to-figma-mcp.git
cd cursor-talk-to-figma-mcp
bun setup
```
### 3. Start WebSocket Server
```bash
bun socket
```
### 4. Configure MCP in Cursor
Add to `~/.cursor/mcp.json`:
```json
{
"mcpServers": {
"TalkToFigma": {
"command": "bunx",
"args": ["cursor-talk-to-figma-mcp@latest"]
}
}
}
```
For local development:
```json
{
"mcpServers": {
"TalkToFigma": {
"command": "bun",
"args": ["/absolute/path/to/src/talk_to_figma_mcp/server.ts"]
}
}
}
```
### 5. Install Figma Plugin
- Visit [Figma Community Plugin](https://www.figma.com/community/plugin/1485687494525374295/cursor-talk-to-figma-mcp-plugin)
- Or in Figma: Plugins > Development > New Plugin > Link existing plugin > Select `src/cursor_mcp_plugin/manifest.json`
### Windows + WSL Configuration
```bash
# Install via PowerShell
powershell -c "irm bun.sh/install.ps1|iex"
```
Edit `src/socket.ts` to allow WSL connections:
```typescript
// Uncomment for Windows WSL
hostname: "0.0.0.0",
```
## Core Workflow
### 1. Establish Connection
```javascript
// First, join a channel to connect MCP server with Figma plugin
await use_mcp_tool({
server_name: "TalkToFigma",
tool_name: "join_channel",
arguments: {
channelId: "design-session-1"
}
});
```
### 2. Read Document Structure
```javascript
// Get document overview
const docInfo = await use_mcp_tool({
server_name: "TalkToFigma",
tool_name: "get_document_info",
arguments: {}
});
// Get current selection
const selection = await use_mcp_tool({
server_name: "TalkToFigma",
tool_name: "get_selection",
arguments: {}
});
// Read detailed design info from selection
const designDetails = await use_mcp_tool({
server_name: "TalkToFigma",
tool_name: "read_my_design",
arguments: {}
});
```
### 3. Query Specific Nodes
```javascript
// Get single node info
const nodeInfo = await use_mcp_tool({
server_name: "TalkToFigma",
tool_name: "get_node_info",
arguments: {
nodeId: "123:456"
}
});
// Get multiple nodes
const nodesInfo = await use_mcp_tool({
server_name: "TalkToFigma",
tool_name: "get_nodes_info",
arguments: {
nodeIds: ["123:456", "789:012", "345:678"]
}
});
```
## Creating Elements
### Create Frames and Shapes
```javascript
// Create frame container
const frame = await use_mcp_tool({
server_name: "TalkToFigma",
tool_name: "create_frame",
arguments: {
x: 100,
y: 100,
width: 400,
height: 300,
name: "Hero Section"
}
});
// Create rectangle
const rect = await use_mcp_tool({
server_name: "TalkToFigma",
tool_name: "create_rectangle",
arguments: {
x: 120,
y: 120,
width: 200,
height: 100,
name: "Card Background"
}
});
// Create text node
const text = await use_mcp_tool({
server_name: "TalkToFigma",
tool_name: "create_text",
arguments: {
x: 140,
y: 140,
characters: "Welcome to our app",
name: "Heading",
fontSize: 24,
fontFamily: "Inter",
fontWeight: "Bold"
}
});
```
### Create Component Instances
```javascript
// Get available components
const components = await use_mcp_tool({
server_name: "TalkToFigma",
tool_name: "get_local_components",
arguments: {}
});
// Create instance
const instance = await use_mcp_tool({
server_name: "TalkToFigma",
tool_name: "create_component_instance",
arguments: {
componentKey: "abc123def456",
x: 200,
y: 200
}
});
```
## Styling Elements
### Colors and Fills
```javascript
// Set fill color
await use_mcp_tool({
server_name: "TalkToFigma",
tool_name: "set_fill_color",
arguments: {
nodeId: "123:456",
r: 0.2,
g: 0.5,
b: 0.9,
a: 1.0
}
});
// Set stroke
await use_mcp_tool({
server_name: "TalkToFigma",
tool_name: "set_stroke_color",
arguments: {
nodeId: "123:456",
r: 0.1,
g: 0.1,
b: 0.1,
a: 1.0,
strokeWeight: 2
}
});
// Set corner radius
await use_mcp_tool({
server_name: "TalkToFigma",
tool_name: "set_corner_radius",
arguments: {
nodeId: "123:456",
radius: 8
}
});
// Set individual corners
await use_mcp_tool({
server_name: "TalkToFigma",
tool_name: "set_corner_radius",
arguments: {
nodeId: "123:456",
topLeft: 16,
topRight: 16,
bottomLeft: 4,
bottomRight: 4
}
});
```
## Auto Layout Configuration
### Enable Auto Layout
```javascript
// Set horizontal auto layout
await use_mcp_tool({
server_name: "TalkToFigma",
tool_name: "set_layout_mode",
arguments: {
nodeId: "123:456",
layoutMode: "HORIZONTAL",
layoutWrap: "NO_WRAP"
}
});
// Set vertical with wrapping
await use_mcp_tool({
server_name: "TalkToFigma",
tool_name: "set_layout_mode",
arguments: {
nodeId: "123:456",
layoutMode: "VERTICAL",
layoutWrap: "WRAP"
}
});
```
### Configure Spacing and Padding
```javascript
// Set padding
await use_mcp_tool({
server_name: "TalkToFigma",
tool_name: "set_padding",
arguments: {
nodeId: "123:456",
top: 24,
right: 16,
bottom: 24,
left: 16
}
});
// Set item spacing
await use_mcp_tool({
server_name: "TalkToFigma",
tool_name: "set_item_spacing",
arguments: {
nodeId: "123:456",
spacing: 12
}
});
```
### Alignment and Sizing
```javascript
// Set alignment
await use_mcp_tool({
server_name: "TalkToFigma",
tool_name: "set_axis_align",
arguments: {
nodeId: "123:456",
primaryAxisAlign: "SPACE_BETWEEN",
counterAxisAlign: "CENTER"
}
});
// Set sizing behavior
await use_mcp_tool({
server_name: "TalkToFigma",
tool_name: "set_layout_sizing",
arguments: {
nodeId: "123:456",
horizontal: "FILL",
vertical: "HUG"
}
});
```
## Text Operations
### Scan and Update Text
```javascript
// Scan text nodes with chunking for large designs
const textNodes = await use_mcp_tool({
server_name: "TalkToFigma",
tool_name: "scan_text_nodes",
arguments: {
startIndex: 0,
chunkSize: 100,
nodeId: "page-node-id" // Optional: scope to specific node
}
});
// Update single text node
await use_mcp_tool({
server_name: "TalkToFigma",
tool_name: "set_text_content",
arguments: {
nodeId: "123:456",
characters: "Updated heading text"
}
});
// Batch update multiple text nodes
await use_mcp_tool({
server_name: "TalkToFigma",
tool_name: "set_multiple_text_contents",
arguments: {
updates: [
{ nodeId: "123:456", characters: "New title" },
{ nodeId: "789:012", characters: "New description" },
{ nodeId: "345:678", characters: "Updated label" }
]
}
});
```
### Bulk Text Replacement Pattern
```javascript
// 1. Scan all text nodes
const allTextNodes = [];
let startIndex = 0;
const chunkSize = 100;
let hasMore = true;
while (hasMore) {
const chunk = await use_mcp_tool({
server_name: "TalkToFigma",
tool_name: "scan_text_nodes",
arguments: { startIndex, chunkSize }
});
allTextNodes.push(...chunk.nodes);
hasMore = chunk.hasMore;
startIndex += chunkSize;
}
// 2. Filter and prepare updates
const updates = allTextNodes
.filter(node => node.characters.includes("placeholder"))
.map(node => ({
nodeId: node.id,
characters: node.characters.replace("placeholder", "actual content")
}));
// 3. Batch update
await use_mcp_tool({
server_name: "TalkToFigma",
tool_name: "set_multiple_text_contents",
arguments: { updates }
});
```
## Layout Manipulation
### Move and Resize
```javascript
// Move node
await use_mcp_tool({
server_name: "TalkToFigma",
tool_name: "move_node",
arguments: {
nodeId: "123:456",
x: 300,
y: 200
}
});
// Resize node
await use_mcp_tool({
server_name: "TalkToFigma",
tool_name: "resize_node",
arguments: {
nodeId: "123:456",
width: 500,
height: 400
}
});
// Clone node
const cloned = await use_mcp_tool({
server_name: "TalkToFigma",
tool_name: "clone_node",
arguments: {
nodeId: "123:456",
offsetX: 50,
offsetY: 50
}
});
```
### Focus and Selection
```javascript
// Focus on specific node
await use_mcp_tool({
server_name: "TalkToFigma",
tool_name: "set_focus",
arguments: {
nodeId: "123:456"
}
});
// Set multiple selections
await use_mcp_tool({
server_name: "TalkToFigma",
tool_name: "set_selections",
arguments: {
nodeIds: ["123:456", "789:012", "345:678"]
}
});
```
### Delete Nodes
```javascript
// Delete single node
await use_mcp_tool({
server_name: "TalkToFigma",
tool_name: "delete_node",
arguments: {
nodeId: "123:456"
在 GitHub 查看这个 SKILL.md 很大，SkillsMP 这里只预览前一段内容。 在 GitHub 查看
