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에서 보기
