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で見る
