figma-mcp-go-design-automation

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Figma MCP Go Design Automation

Figma MCP Go 设计自动化

Skill by ara.so — Design Skills collection

由 ara.so 提供的技能 —— 设计技能合集

Overview

概述

figma-mcp-go

is an MCP (Model Context Protocol) server that provides AI agents with direct read/write access to Figma files through a plugin bridge. Unlike other Figma integrations, it doesn't use the Figma REST API, so there are no rate limits or token requirements. This makes it ideal for free Figma users and rapid AI-driven design automation.

Key capabilities:

73 tools for creating, modifying, and reading Figma designs
Works via local plugin bridge (no API calls)
Full access to styles, variables, components, prototypes
Export to images, PDFs, and design tokens
Integrated design strategy prompts for best practices

figma-mcp-go

是一款MCP（Model Context Protocol，模型上下文协议）服务器，通过插件桥接为AI Agent提供对Figma文件的直接读写权限。与其他Figma集成方案不同，它不使用Figma REST API，因此没有调用速率限制或令牌要求。这使其非常适合免费Figma用户以及快速AI驱动的设计自动化场景。

核心功能：

73种用于创建、修改和读取Figma设计的工具
通过本地插件桥接运行（无需API调用）
完全访问样式、变量、组件和原型
导出为图片、PDF和设计令牌
集成设计策略提示，提供最佳实践指导

Installation

安装

The MCP server runs via

npx

with no build step required. You also need to install a Figma plugin to establish the bridge.

MCP服务器通过

npx

运行，无需构建步骤。你还需要安装一款Figma插件来建立桥接。

Step 1: Configure MCP Server

步骤1：配置MCP服务器

For Claude Code CLI:

bash

claude mcp add -s project figma-mcp-go -- npx -y @vkhanhqui/figma-mcp-go@latest

For Cursor / VS Code / GitHub Copilot (

.vscode/mcp.json

json

{
  "servers": {
    "figma-mcp-go": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@vkhanhqui/figma-mcp-go"]
    }
  }
}

For Claude Desktop (

.mcp.json

json

{
  "mcpServers": {
    "figma-mcp-go": {
      "command": "npx",
      "args": ["-y", "@vkhanhqui/figma-mcp-go"]
    }
  }
}

适用于Claude Code CLI：

bash

claude mcp add -s project figma-mcp-go -- npx -y @vkhanhqui/figma-mcp-go@latest

适用于Cursor / VS Code / GitHub Copilot（

.vscode/mcp.json

）：

json

{
  "servers": {
    "figma-mcp-go": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@vkhanhqui/figma-mcp-go"]
    }
  }
}

适用于Claude Desktop（

.mcp.json

）：

json

{
  "mcpServers": {
    "figma-mcp-go": {
      "command": "npx",
      "args": ["-y", "@vkhanhqui/figma-mcp-go"]
    }
  }
}

Step 2: Install Figma Plugin

步骤2：安装Figma插件

Download
```
plugin.zip
```
from GitHub releases
In Figma Desktop: Plugins → Development → Import plugin from manifest
Select
```
manifest.json
```
from the extracted zip
Open any Figma file and run the plugin to activate the bridge

从GitHub发布页下载
```
plugin.zip
```
在Figma桌面端中：插件 → 开发 → 从清单导入插件
从解压后的zip文件中选择
```
manifest.json
```
打开任意Figma文件并运行插件以激活桥接

Core Concepts

核心概念

Tool Categories

工具分类

Create:

create_frame

create_rectangle

create_text

create_component

, etc.

Modify:

set_text

set_fills

set_auto_layout

resize_nodes

, etc.

Delete:
```
delete_nodes
```
,
```
delete_page
```
,
```
delete_style
```

Read:

get_document

get_selection

get_styles

get_variable_defs

Export:

get_screenshot

save_screenshots

export_frames_to_pdf

export_tokens

Prototype:
```
set_reactions
```
,
```
remove_reactions
```

Variables:

create_variable_collection

bind_variable_to_node

, etc.

创建：

create_frame

create_rectangle

create_text

create_component

等

修改：

set_text

set_fills

set_auto_layout

resize_nodes

等

删除：
```
delete_nodes
```
,
```
delete_page
```
,
```
delete_style
```

读取：

get_document

get_selection

get_styles

get_variable_defs

导出：

get_screenshot

save_screenshots

export_frames_to_pdf

export_tokens

原型：
```
set_reactions
```
,
```
remove_reactions
```

变量：

create_variable_collection

bind_variable_to_node

等

Node IDs

节点ID

Most tools require node IDs. Get them with:

```
get_selection
```
- Currently selected nodes
```
get_document
```
- Full page tree
```
search_nodes
```
- Find by name/type
```
get_design_context
```
- Depth-limited tree

大多数工具需要节点ID。可通过以下方式获取：

```
get_selection
```
- 当前选中的节点
```
get_document
```
- 完整页面树
```
search_nodes
```
- 按名称/类型查找
```
get_design_context
```
- 深度受限的树结构

Common Patterns

常见模式

Pattern 1: Create a Simple Layout

模式1：创建简单布局

typescript

// Get current page context
const context = await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "get_metadata",
  arguments: {}
});

// Create a parent frame
const frame = await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "create_frame",
  arguments: {
    name: "Hero Section",
    x: 100,
    y: 100,
    width: 1200,
    height: 600,
    fills: [{type: "SOLID", color: {r: 0.95, g: 0.95, b: 0.95}}],
    autoLayout: {
      mode: "VERTICAL",
      primaryAxisAlignItems: "CENTER",
      counterAxisAlignItems: "CENTER",
      paddingTop: 40,
      paddingBottom: 40,
      paddingLeft: 60,
      paddingRight: 60,
      itemSpacing: 24
    }
  }
});

// Add text inside
const title = await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "create_text",
  arguments: {
    characters: "Welcome to Our Platform",
    x: 0,
    y: 0,
    parentId: frame.nodeId,
    fontSize: 48,
    fontWeight: "Bold"
  }
});

typescript

// Get current page context
const context = await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "get_metadata",
  arguments: {}
});

// Create a parent frame
const frame = await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "create_frame",
  arguments: {
    name: "Hero Section",
    x: 100,
    y: 100,
    width: 1200,
    height: 600,
    fills: [{type: "SOLID", color: {r: 0.95, g: 0.95, b: 0.95}}],
    autoLayout: {
      mode: "VERTICAL",
      primaryAxisAlignItems: "CENTER",
      counterAxisAlignItems: "CENTER",
      paddingTop: 40,
      paddingBottom: 40,
      paddingLeft: 60,
      paddingRight: 60,
      itemSpacing: 24
    }
  }
});

// Add text inside
const title = await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "create_text",
  arguments: {
    characters: "Welcome to Our Platform",
    x: 0,
    y: 0,
    parentId: frame.nodeId,
    fontSize: 48,
    fontWeight: "Bold"
  }
});

Pattern 2: Batch Update Text Content

模式2：批量更新文本内容

typescript

// Find all text nodes
const textNodes = await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "scan_text_nodes",
  arguments: {
    rootNodeId: "parentFrameId"
  }
});

// Replace placeholder text
await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "find_replace_text",
  arguments: {
    rootNodeId: "parentFrameId",
    findText: "{{product_name}}",
    replaceWith: "Acme Widget Pro",
    useRegex: false,
    caseSensitive: false
  }
});

typescript

// Find all text nodes
const textNodes = await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "scan_text_nodes",
  arguments: {
    rootNodeId: "parentFrameId"
  }
});

// Replace placeholder text
await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "find_replace_text",
  arguments: {
    rootNodeId: "parentFrameId",
    findText: "{{product_name}}",
    replaceWith: "Acme Widget Pro",
    useRegex: false,
    caseSensitive: false
  }
});

Pattern 3: Apply Design System Styles

模式3：应用设计系统样式

typescript

// Get available styles
const styles = await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "get_styles",
  arguments: {}
});

// Create a paint style
const primaryColor = await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "create_paint_style",
  arguments: {
    name: "Primary/500",
    color: "#3B82F6"
  }
});

// Apply to nodes
await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "apply_style_to_node",
  arguments: {
    nodeId: "buttonNodeId",
    styleId: primaryColor.styleId,
    styleType: "FILL"
  }
});

typescript

// Get available styles
const styles = await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "get_styles",
  arguments: {}
});

// Create a paint style
const primaryColor = await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "create_paint_style",
  arguments: {
    name: "Primary/500",
    color: "#3B82F6"
  }
});

// Apply to nodes
await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "apply_style_to_node",
  arguments: {
    nodeId: "buttonNodeId",
    styleId: primaryColor.styleId,
    styleType: "FILL"
  }
});

Pattern 4: Create Variables and Bind Them

模式4：创建变量并绑定

typescript

// Create a variable collection for theming
const collection = await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "create_variable_collection",
  arguments: {
    name: "Theme",
    initialModeName: "Light"
  }
});

// Add Dark mode
await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "add_variable_mode",
  arguments: {
    collectionId: collection.collectionId,
    modeName: "Dark"
  }
});

// Create a color variable
const bgColor = await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "create_variable",
  arguments: {
    collectionId: collection.collectionId,
    name: "Background",
    resolvedType: "COLOR"
  }
});

// Set values for both modes
await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "set_variable_value",
  arguments: {
    variableId: bgColor.variableId,
    modeId: "Light",
    value: {r: 1, g: 1, b: 1}
  }
});

await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "set_variable_value",
  arguments: {
    variableId: bgColor.variableId,
    modeId: "Dark",
    value: {r: 0.1, g: 0.1, b: 0.1}
  }
});

// Bind to a frame
await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "bind_variable_to_node",
  arguments: {
    nodeId: "frameNodeId",
    variableId: bgColor.variableId,
    field: "fillColor"
  }
});

typescript

// Create a variable collection for theming
const collection = await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "create_variable_collection",
  arguments: {
    name: "Theme",
    initialModeName: "Light"
  }
});

// Add Dark mode
await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "add_variable_mode",
  arguments: {
    collectionId: collection.collectionId,
    modeName: "Dark"
  }
});

// Create a color variable
const bgColor = await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "create_variable",
  arguments: {
    collectionId: collection.collectionId,
    name: "Background",
    resolvedType: "COLOR"
  }
});

// Set values for both modes
await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "set_variable_value",
  arguments: {
    variableId: bgColor.variableId,
    modeId: "Light",
    value: {r: 1, g: 1, b: 1}
  }
});

await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "set_variable_value",
  arguments: {
    variableId: bgColor.variableId,
    modeId: "Dark",
    value: {r: 0.1, g: 0.1, b: 0.1}
  }
});

// Bind to a frame
await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "bind_variable_to_node",
  arguments: {
    nodeId: "frameNodeId",
    variableId: bgColor.variableId,
    field: "fillColor"
  }
});

Pattern 5: Export Designs

模式5：导出设计

typescript

// Export a single frame as screenshot
const screenshot = await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "get_screenshot",
  arguments: {
    nodeId: "frameNodeId",
    format: "PNG",
    scale: 2
  }
});
// Returns base64-encoded image

// Save multiple frames to disk
await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "save_screenshots",
  arguments: {
    nodeIds: ["frame1", "frame2", "frame3"],
    format: "PNG",
    scale: 2,
    outputDir: "/path/to/exports"
  }
});

// Export frames as PDF
await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "export_frames_to_pdf",
  arguments: {
    frameIds: ["frame1", "frame2"],
    outputPath: "/path/to/design.pdf"
  }
});

// Export design tokens
await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "export_tokens",
  arguments: {
    format: "JSON",
    outputPath: "/path/to/tokens.json"
  }
});

typescript

// Export a single frame as screenshot
const screenshot = await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "get_screenshot",
  arguments: {
    nodeId: "frameNodeId",
    format: "PNG",
    scale: 2
  }
});
// Returns base64-encoded image

// Save multiple frames to disk
await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "save_screenshots",
  arguments: {
    nodeIds: ["frame1", "frame2", "frame3"],
    format: "PNG",
    scale: 2,
    outputDir: "/path/to/exports"
  }
});

// Export frames as PDF
await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "export_frames_to_pdf",
  arguments: {
    frameIds: ["frame1", "frame2"],
    outputPath: "/path/to/design.pdf"
  }
});

// Export design tokens
await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "export_tokens",
  arguments: {
    format: "JSON",
    outputPath: "/path/to/tokens.json"
  }
});

Pattern 6: Create Prototype Interactions

模式6：创建原型交互

typescript

// Add a click reaction to navigate to another frame
await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "set_reactions",
  arguments: {
    nodeId: "buttonNodeId",
    reactions: [{
      trigger: {type: "ON_CLICK"},
      action: {
        type: "NODE",
        destinationId: "targetFrameId",
        navigation: "NAVIGATE",
        transition: {
          type: "DISSOLVE",
          duration: 0.3,
          easing: {type: "EASE_IN_OUT"}
        }
      }
    }],
    mode: "replace"
  }
});

// Get existing reactions
const reactions = await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "get_reactions",
  arguments: {
    nodeId: "buttonNodeId"
  }
});

typescript

// Add a click reaction to navigate to another frame
await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "set_reactions",
  arguments: {
    nodeId: "buttonNodeId",
    reactions: [{
      trigger: {type: "ON_CLICK"},
      action: {
        type: "NODE",
        destinationId: "targetFrameId",
        navigation: "NAVIGATE",
        transition: {
          type: "DISSOLVE",
          duration: 0.3,
          easing: {type: "EASE_IN_OUT"}
        }
      }
    }],
    mode: "replace"
  }
});

// Get existing reactions
const reactions = await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "get_reactions",
  arguments: {
    nodeId: "buttonNodeId"
  }
});

Pattern 7: Component Management

模式7：组件管理

typescript

// Convert a frame to a component
const component = await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "create_component",
  arguments: {
    frameNodeId: "frameToConvert"
  }
});

// Get all local components
const components = await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "get_local_components",
  arguments: {}
});

// Swap an instance to use a different component
await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "swap_component",
  arguments: {
    instanceNodeId: "instanceId",
    newComponentId: "newComponentId"
  }
});

// Detach instance to plain frame
await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "detach_instance",
  arguments: {
    instanceNodeIds: ["instance1", "instance2"]
  }
});

typescript

// Convert a frame to a component
const component = await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "create_component",
  arguments: {
    frameNodeId: "frameToConvert"
  }
});

// Get all local components
const components = await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "get_local_components",
  arguments: {}
});

// Swap an instance to use a different component
await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "swap_component",
  arguments: {
    instanceNodeId: "instanceId",
    newComponentId: "newComponentId"
  }
});

// Detach instance to plain frame
await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "detach_instance",
  arguments: {
    instanceNodeIds: ["instance1", "instance2"]
  }
});

MCP Prompts

MCP提示

The server includes built-in prompts for design strategies. Use them to get AI guidance:

typescript

// Get best practices for reading designs
const readStrategy = await get_prompt({
  server_name: "figma-mcp-go",
  prompt_name: "read_design_strategy"
});

// Get best practices for creating designs
const designStrategy = await get_prompt({
  server_name: "figma-mcp-go",
  prompt_name: "design_strategy"
});

// Chunked text replacement strategy
const textStrategy = await get_prompt({
  server_name: "figma-mcp-go",
  prompt_name: "text_replacement_strategy"
});

服务器内置了设计策略相关的提示。使用它们获取AI指导：

typescript

// Get best practices for reading designs
const readStrategy = await get_prompt({
  server_name: "figma-mcp-go",
  prompt_name: "read_design_strategy"
});

// Get best practices for creating designs
const designStrategy = await get_prompt({
  server_name: "figma-mcp-go",
  prompt_name: "design_strategy"
});

// Chunked text replacement strategy
const textStrategy = await get_prompt({
  server_name: "figma-mcp-go",
  prompt_name: "text_replacement_strategy"
});

Advanced Techniques

高级技巧

Auto-Layout with Complex Constraints

带有复杂约束的自动布局

typescript

await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "set_auto_layout",
  arguments: {
    nodeId: "frameId",
    mode: "HORIZONTAL",
    primaryAxisAlignItems: "SPACE_BETWEEN",
    counterAxisAlignItems: "CENTER",
    paddingTop: 16,
    paddingBottom: 16,
    paddingLeft: 24,
    paddingRight: 24,
    itemSpacing: 12,
    primaryAxisSizingMode: "AUTO",
    counterAxisSizingMode: "FIXED"
  }
});

typescript

await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "set_auto_layout",
  arguments: {
    nodeId: "frameId",
    mode: "HORIZONTAL",
    primaryAxisAlignItems: "SPACE_BETWEEN",
    counterAxisAlignItems: "CENTER",
    paddingTop: 16,
    paddingBottom: 16,
    paddingLeft: 24,
    paddingRight: 24,
    itemSpacing: 12,
    primaryAxisSizingMode: "AUTO",
    counterAxisSizingMode: "FIXED"
  }
});

Responsive Constraints

响应式约束

typescript

await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "set_constraints",
  arguments: {
    nodeIds: ["childNodeId"],
    constraints: {
      horizontal: "STRETCH",
      vertical: "MIN"
    }
  }
});

typescript

await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "set_constraints",
  arguments: {
    nodeIds: ["childNodeId"],
    constraints: {
      horizontal: "STRETCH",
      vertical: "MIN"
    }
  }
});

Blend Modes and Effects

混合模式与效果

typescript

// Set blend mode
await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "set_blend_mode",
  arguments: {
    nodeIds: ["overlayNodeId"],
    blendMode: "MULTIPLY"
  }
});

// Add drop shadow
await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "set_effects",
  arguments: {
    nodeId: "cardNodeId",
    effects: [{
      type: "DROP_SHADOW",
      color: {r: 0, g: 0, b: 0, a: 0.1},
      offset: {x: 0, y: 4},
      radius: 8,
      visible: true
    }]
  }
});

typescript

// Set blend mode
await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "set_blend_mode",
  arguments: {
    nodeIds: ["overlayNodeId"],
    blendMode: "MULTIPLY"
  }
});

// Add drop shadow
await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "set_effects",
  arguments: {
    nodeId: "cardNodeId",
    effects: [{
      type: "DROP_SHADOW",
      color: {r: 0, g: 0, b: 0, a: 0.1},
      offset: {x: 0, y: 4},
      radius: 8,
      visible: true
    }]
  }
});

Batch Operations

批量操作

typescript

// Rename multiple nodes with find/replace
await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "batch_rename_nodes",
  arguments: {
    nodeIds: ["node1", "node2", "node3"],
    operation: "findReplace",
    findText: "old",
    replaceWith: "new"
  }
});

// Clone and reposition
const clones = await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "clone_node",
  arguments: {
    nodeId: "sourceNodeId",
    count: 5,
    offsetX: 20,
    offsetY: 20
  }
});

typescript

// Rename multiple nodes with find/replace
await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "batch_rename_nodes",
  arguments: {
    nodeIds: ["node1", "node2", "node3"],
    operation: "findReplace",
    findText: "old",
    replaceWith: "new"
  }
});

// Clone and reposition
const clones = await use_mcp_tool({
  server_name: "figma-mcp-go",
  tool_name: "clone_node",
  arguments: {
    nodeId: "sourceNodeId",
    count: 5,
    offsetX: 20,
    offsetY: 20
  }
});

Troubleshooting

故障排除

Plugin Not Connecting

插件无法连接

Symptom: MCP tools timeout or return "plugin not ready"

Solutions:

Ensure Figma Desktop (not browser) is running
Verify plugin is loaded: Plugins → Development → figma-mcp-go
Restart both the plugin and your AI tool
Check Figma Developer Console for errors (Plugins → Development → Open Console)

症状： MCP工具超时或返回“plugin not ready”

解决方案：

确保运行的是Figma桌面端（而非浏览器版）
验证插件已加载：插件 → 开发 → figma-mcp-go
重启插件和你的AI工具
检查Figma开发者控制台是否有错误（插件 → 开发 → 打开控制台）

Node ID Not Found

节点ID未找到

Symptom: "Node with ID X not found"

Solutions:

Use
```
get_selection
```
to verify current selection IDs
Use
```
search_nodes
```
to find nodes by name
Ensure you're on the correct page with
```
navigate_to_page
```
Check if node was deleted or is on a different page

症状： “Node with ID X not found”

解决方案：

使用
```
get_selection
```
验证当前选中节点的ID
使用
```
search_nodes
```
按名称查找节点
使用
```
navigate_to_page
```
确保你在正确的页面
检查节点是否已删除或位于其他页面

Font Not Loading

字体未加载

Symptom: Text creation fails with "font not available"

Solutions:

The plugin auto-loads fonts, but they must be installed on your system
Use
```
get_fonts
```
to see available fonts in the current file
Specify common fonts:
```
fontFamily: "Inter"
```
or
```
"Roboto"
```
Check Figma's font loading status in the right panel

症状： 创建文本失败，提示“font not available”

解决方案：

插件会自动加载字体，但字体必须已安装在你的系统中
使用
```
get_fonts
```
查看当前文件中可用的字体
指定通用字体：
```
fontFamily: "Inter"
```
或
```
"Roboto"
```
检查Figma右侧面板中的字体加载状态

Rate Limit Confusion

速率限制困惑

Symptom: Worried about hitting API limits

Solution: This tool doesn't use Figma's REST API at all—there are no rate limits. All operations go through the local plugin bridge.

症状： 担心触发API速率限制

解决方案： 本工具完全不使用Figma的REST API——没有任何速率限制。所有操作都通过本地插件桥接完成。

Export Path Issues

导出路径问题

Symptom:

save_screenshots

export_frames_to_pdf

fails

Solutions:

Use absolute paths:
```
/Users/username/exports/
```
not
```
~/exports/
```
Ensure the directory exists (create it first if needed)
Check write permissions on the target directory
On Windows, use forward slashes:
```
C:/Users/username/exports/
```

症状：

save_screenshots

或

export_frames_to_pdf

失败

解决方案：

使用绝对路径：
```
/Users/username/exports/
```
而非
```
~/exports/
```
确保目标目录已存在（必要时先创建）
检查目标目录的写入权限
在Windows系统中，使用正斜杠：
```
C:/Users/username/exports/
```

Auto-Layout Not Applied

自动布局未生效

Symptom:

set_auto_layout

succeeds but layout doesn't change

Solutions:

Ensure the node is a FRAME (not GROUP or other type)
Check that child constraints are compatible
Verify
```
mode
```
is
```
"HORIZONTAL"
```
or
```
"VERTICAL"
```
Some properties require
```
primaryAxisSizingMode
```
to be set

症状：

set_auto_layout

执行成功但布局未改变

解决方案：

确保节点是FRAME类型（而非GROUP或其他类型）
检查子节点的约束是否兼容
验证
```
mode
```
设置为
```
"HORIZONTAL"
```
或
```
"VERTICAL"
```
某些属性需要设置
```
primaryAxisSizingMode
```

Best Practices

最佳实践

Always get context first: Use
```
get_metadata
```
or
```
get_design_context
```
before making changes
Use search instead of hardcoding IDs: Node IDs change between sessions—use
```
search_nodes
```
or
```
get_selection
```
Leverage MCP prompts: Call
```
read_design_strategy
```
or
```
design_strategy
```
for AI-guided best practices
Batch operations: Group multiple
```
set_fills
```
,
```
resize_nodes
```
, etc. calls to minimize tool invocations
Export often: Use
```
get_screenshot
```
to verify changes visually during complex operations
Variable-first design: Prefer
```
bind_variable_to_node
```
over direct
```
set_fills
```
for themeable designs
Test on a copy: Clone important frames before applying batch transformations

始终先获取上下文：在进行修改前使用
```
get_metadata
```
或
```
get_design_context
```
使用搜索而非硬编码ID：节点ID会在会话间变化——使用
```
search_nodes
```
或
```
get_selection
```
利用MCP提示：调用
```
read_design_strategy
```
或
```
design_strategy
```
获取AI指导的最佳实践
批量操作：将多个
```
set_fills
```
、
```
resize_nodes
```
等调用分组，以减少工具调用次数
经常导出：在复杂操作过程中使用
```
get_screenshot
```
可视化验证更改
优先使用变量设计：对于可主题化的设计，优先使用
```
bind_variable_to_node
```
而非直接调用
```
set_fills
```
在副本上测试：在应用批量转换前克隆重要的帧

Reference: Key Tools by Use Case

参考：按使用场景分类的核心工具

Use Case	Recommended Tools
Get started	`get_metadata` , `get_selection` , `get_design_context`
Create layouts	`create_frame` , `set_auto_layout` , `create_section`
Add content	`create_text` , `create_rectangle` , `import_image`
Modify designs	`set_fills` , `resize_nodes` , `set_text` , `move_nodes`
Design system	`create_paint_style` , `create_text_style` , `create_variable_collection`
Prototyping	`set_reactions` , `remove_reactions` , `get_reactions`
Export	`get_screenshot` , `save_screenshots` , `export_tokens` , `export_frames_to_pdf`
Search/navigate	`search_nodes` , `navigate_to_page` , `get_pages`
Batch edits	`find_replace_text` , `batch_rename_nodes` , `set_fills` (with multiple IDs)

使用场景	推荐工具
入门上手	`get_metadata` , `get_selection` , `get_design_context`
创建布局	`create_frame` , `set_auto_layout` , `create_section`
添加内容	`create_text` , `create_rectangle` , `import_image`
修改设计	`set_fills` , `resize_nodes` , `set_text` , `move_nodes`
设计系统	`create_paint_style` , `create_text_style` , `create_variable_collection`
原型设计	`set_reactions` , `remove_reactions` , `get_reactions`
导出	`get_screenshot` , `save_screenshots` , `export_tokens` , `export_frames_to_pdf`
搜索/导航	`search_nodes` , `navigate_to_page` , `get_pages`
批量编辑	`find_replace_text` , `batch_rename_nodes` , `set_fills` （支持多个ID）