figma

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Figma Skill

Master Figma automation and integration using the figma-desktop MCP server via mcporter. This skill enables programmatic access to Figma designs, code generation, screenshots, and Code Connect mappings.

[!CRITICAL] ⚠️ IMPORTANT - Parameter Passing:

Use function-call syntax (NOT flag syntax). Parameters go inside the function call, not as flags:
bash
mise x node@20 -- mcporter call 'figma-desktop.get_design_context(nodeId: "123:456", clientLanguages: "typescript", clientFrameworks: "react")'
Key Rules:
Parameters are camelCase inside the function call
String values use double quotes:
"value"
Boolean values use bare notation:
true
or
false
Environment variables are interpolated outside quotes:
"'$VAR'"
NO
--flag
syntax, NO JSON string escaping needed

通过mcporter调用figma-desktop MCP服务器，实现Figma自动化与集成能力。本技能支持以编程方式访问Figma设计、生成代码、截图以及管理Code Connect映射。

[!CRITICAL] ⚠️ 重要 - 参数传递：

使用函数调用语法（请勿使用标志语法）。参数需放在函数调用内部，不要作为标志传递：
bash
mise x node@20 -- mcporter call 'figma-desktop.get_design_context(nodeId: "123:456", clientLanguages: "typescript", clientFrameworks: "react")'
核心规则：
函数调用内的参数使用驼峰命名法（camelCase）
字符串值使用双引号：
"value"
布尔值使用原生写法：
true
或
false
环境变量在引号外插值：
"'$VAR'"
请勿使用
--flag
语法，无需进行JSON字符串转义

Prerequisites

前置要求

Verify Figma Desktop Connection

验证Figma Desktop连接

bash

mise x node@20 -- mcporter call 'figma-desktop.get_metadata'

Should return metadata for the currently selected node. If it fails, ensure:

Figma Desktop is running
The figma-desktop MCP server is configured in mcporter

bash

mise x node@20 -- mcporter call 'figma-desktop.get_metadata'

执行后应返回当前选中节点的元数据。如果执行失败，请确认：

Figma Desktop正在运行
mcporter中已配置好figma-desktop MCP服务器

Quick Setup

快速设置

Get Design Context (One-Shot)

获取设计上下文（单次调用）

The fastest way to get design information and generated code:

bash

mise x node@20 -- ./scripts/get_design_context.sh "123:456"

Or use the currently selected node:

bash

mise x node@20 -- ./scripts/get_design_context.sh

With framework context:

bash

mise x node@20 -- ./scripts/get_design_context.sh "123:456" --languages "typescript" --frameworks "react"

获取设计信息并生成代码的最快方式：

bash

mise x node@20 -- ./scripts/get_design_context.sh "123:456"

或者使用当前选中的节点：

bash

mise x node@20 -- ./scripts/get_design_context.sh

指定技术栈上下文：

bash

mise x node@20 -- ./scripts/get_design_context.sh "123:456" --languages "typescript" --frameworks "react"

Extract Node ID from URL

从URL提取节点ID

If you have a Figma URL like

https://figma.com/design/:fileKey/:fileName?node-id=1-2

The nodeId is
```
1:2
```
(replace
```
-
```
with
```
:
```
)

For branch URLs like

https://figma.com/design/:fileKey/branch/:branchKey/:fileName

Use
```
branchKey
```
as the fileKey

如果你的Figma URL格式为

https://figma.com/design/:fileKey/:fileName?node-id=1-2

：

对应的nodeId为
```
1:2
```
（将
```
-
```
替换为
```
:
```
）

如果是分支URL，格式为

https://figma.com/design/:fileKey/branch/:branchKey/:fileName

：

使用
```
branchKey
```
作为fileKey

Core Operations

核心操作

Get Design Context (Generate Code)

获取设计上下文（生成代码）

Primary tool for generating UI code from Figma designs:

bash

mise x node@20 -- mcporter call 'figma-desktop.get_design_context(nodeId: "123:456")'

With technology context (recommended):

bash

mise x node@20 -- mcporter call 'figma-desktop.get_design_context(nodeId: "123:456", clientLanguages: "typescript,css", clientFrameworks: "react")'

For currently selected node:

bash

mise x node@20 -- mcporter call 'figma-desktop.get_design_context()'

Force code output (for large designs):

bash

mise x node@20 -- mcporter call 'figma-desktop.get_design_context(nodeId: "123:456", forceCode: true)'

With artifact type context:

bash

mise x node@20 -- mcporter call 'figma-desktop.get_design_context(nodeId: "123:456", artifactType: "REUSABLE_COMPONENT", taskType: "CREATE_ARTIFACT")'

Valid

artifactType

values:

```
WEB_PAGE_OR_APP_SCREEN
```

COMPONENT_WITHIN_A_WEB_PAGE_OR_APP_SCREEN

```
REUSABLE_COMPONENT
```
```
DESIGN_SYSTEM
```

Valid

taskType

values:

```
CREATE_ARTIFACT
```
```
CHANGE_ARTIFACT
```
```
DELETE_ARTIFACT
```

从Figma设计生成UI代码的核心工具：

bash

mise x node@20 -- mcporter call 'figma-desktop.get_design_context(nodeId: "123:456")'

指定技术栈上下文（推荐）：

bash

mise x node@20 -- mcporter call 'figma-desktop.get_design_context(nodeId: "123:456", clientLanguages: "typescript,css", clientFrameworks: "react")'

针对当前选中节点：

bash

mise x node@20 -- mcporter call 'figma-desktop.get_design_context()'

强制生成代码（适用于大型设计）：

bash

mise x node@20 -- mcporter call 'figma-desktop.get_design_context(nodeId: "123:456", forceCode: true)'

指定产物类型上下文：

bash

mise x node@20 -- mcporter call 'figma-desktop.get_design_context(nodeId: "123:456", artifactType: "REUSABLE_COMPONENT", taskType: "CREATE_ARTIFACT")'

artifactType

的合法取值：

```
WEB_PAGE_OR_APP_SCREEN
```

COMPONENT_WITHIN_A_WEB_PAGE_OR_APP_SCREEN

```
REUSABLE_COMPONENT
```
```
DESIGN_SYSTEM
```

taskType

的合法取值：

```
CREATE_ARTIFACT
```
```
CHANGE_ARTIFACT
```
```
DELETE_ARTIFACT
```

Get Screenshot

获取截图

Capture a visual screenshot of a Figma node:

bash

mise x node@20 -- mcporter call 'figma-desktop.get_screenshot(nodeId: "123:456")'

For currently selected node:

bash

mise x node@20 -- mcporter call 'figma-desktop.get_screenshot()'

捕获Figma节点的可视化截图：

bash

mise x node@20 -- mcporter call 'figma-desktop.get_screenshot(nodeId: "123:456")'

针对当前选中节点：

bash

mise x node@20 -- mcporter call 'figma-desktop.get_screenshot()'

Get Metadata (Structure Overview)

获取元数据（结构概览）

Get XML structure overview of a node (node IDs, layer types, names, positions, sizes):

bash

mise x node@20 -- mcporter call 'figma-desktop.get_metadata(nodeId: "123:456")'

Note: Prefer

get_design_context

for most use cases. Use

get_metadata

only for structure overview.

获取节点的XML结构概览（包含节点ID、图层类型、名称、位置、尺寸）：

bash

mise x node@20 -- mcporter call 'figma-desktop.get_metadata(nodeId: "123:456")'

注意： 大多数场景下优先使用

get_design_context

，仅在需要查看结构概览时使用

get_metadata

。

Get Variable Definitions

获取变量定义

Get design tokens/variables for a node (colors, fonts, sizes, spacings):

bash

mise x node@20 -- mcporter call 'figma-desktop.get_variable_defs(nodeId: "123:456")'

Returns mappings like:

{'icon/default/secondary': '#949494'}

获取节点的设计令牌/变量（颜色、字体、尺寸、间距）：

bash

mise x node@20 -- mcporter call 'figma-desktop.get_variable_defs(nodeId: "123:456")'

返回的映射格式示例：

{'icon/default/secondary': '#949494'}

Get FigJam Content

获取FigJam内容

For FigJam files (whiteboards, diagrams):

bash

mise x node@20 -- mcporter call 'figma-desktop.get_figjam(nodeId: "123:456")'

With node images:

bash

mise x node@20 -- mcporter call 'figma-desktop.get_figjam(nodeId: "123:456", includeImagesOfNodes: true)'

Note: Only works for FigJam files, not standard Figma design files.

适用于FigJam文件（白板、流程图）：

bash

mise x node@20 -- mcporter call 'figma-desktop.get_figjam(nodeId: "123:456")'

包含节点图片：

bash

mise x node@20 -- mcporter call 'figma-desktop.get_figjam(nodeId: "123:456", includeImagesOfNodes: true)'

注意： 仅适用于FigJam文件，对标准Figma设计文件无效。

Code Connect

Code Connect maps Figma components to code components in your codebase.

Code Connect用于将Figma组件映射到代码库中的代码组件。

Get Code Connect Mappings

获取Code Connect映射

Check existing mappings for a node:

bash

mise x node@20 -- mcporter call 'figma-desktop.get_code_connect_map(nodeId: "123:456")'

Returns mappings like:

json

{
  "1:2": {
    "codeConnectSrc": "https://github.com/foo/components/Button.tsx",
    "codeConnectName": "Button"
  }
}

查询节点已有的映射关系：

bash

mise x node@20 -- mcporter call 'figma-desktop.get_code_connect_map(nodeId: "123:456")'

返回的映射格式示例：

json

{
  "1:2": {
    "codeConnectSrc": "https://github.com/foo/components/Button.tsx",
    "codeConnectName": "Button"
  }
}

Add Code Connect Mapping

添加Code Connect映射

Map a Figma component to a code component:

bash

mise x node@20 -- mcporter call 'figma-desktop.add_code_connect_map(nodeId: "123:456", source: "src/components/Button.tsx", componentName: "Button", label: "React")'

Required parameters:

```
source
```
: Path to component in codebase
```
componentName
```
: Name of the component
```
label
```
: Framework/language label

Valid
label
values:

React

Web Components

Vue

Svelte

Storybook

Javascript

```
Swift UIKit
```
,
```
Objective-C UIKit
```
,
```
SwiftUI
```
```
Compose
```
,
```
Java
```
,
```
Kotlin
```
,
```
Android XML Layout
```
```
Flutter
```
,
```
Markdown
```

将Figma组件映射到代码组件：

bash

mise x node@20 -- mcporter call 'figma-desktop.add_code_connect_map(nodeId: "123:456", source: "src/components/Button.tsx", componentName: "Button", label: "React")'

必填参数：

```
source
```
：代码库中组件的路径
```
componentName
```
：组件的名称
```
label
```
：框架/语言标签

label

的合法取值：

React

Web Components

Vue

Svelte

Storybook

Javascript

```
Swift UIKit
```
,
```
Objective-C UIKit
```
,
```
SwiftUI
```
```
Compose
```
,
```
Java
```
,
```
Kotlin
```
,
```
Android XML Layout
```
```
Flutter
```
,
```
Markdown
```

Create Design System Rules

创建设计系统规则

Generate design system rules for your repository:

bash

mise x node@20 -- mcporter call 'figma-desktop.create_design_system_rules(clientLanguages: "typescript", clientFrameworks: "react")'

为你的仓库生成设计系统规则：

bash

mise x node@20 -- mcporter call 'figma-desktop.create_design_system_rules(clientLanguages: "typescript", clientFrameworks: "react")'

Helper Scripts

辅助脚本

Script	Purpose
`./scripts/get_design_context.sh`	One-shot design context - Get design info and generated code (with optional framework context)
`./scripts/get_screenshot.sh`	Capture screenshot - Save node screenshot to file
`./scripts/get_variables.sh`	Get design tokens - Extract variables (colors, fonts, sizes, spacings)
`./scripts/add_code_connect.sh`	Add Code Connect - Map Figma component to code component

Script help:

bash

./scripts/get_design_context.sh --help
./scripts/get_screenshot.sh --help
./scripts/get_variables.sh --help
./scripts/add_code_connect.sh --help

脚本	用途
`./scripts/get_design_context.sh`	单次获取设计上下文 - 获取设计信息并生成代码（可指定可选的框架上下文）
`./scripts/get_screenshot.sh`	捕获截图 - 将节点截图保存到文件
`./scripts/get_variables.sh`	获取设计令牌 - 提取变量（颜色、字体、尺寸、间距）
`./scripts/add_code_connect.sh`	添加Code Connect - 将Figma组件映射到代码组件

脚本帮助：

bash

./scripts/get_design_context.sh --help
./scripts/get_screenshot.sh --help
./scripts/get_variables.sh --help
./scripts/add_code_connect.sh --help

Common Workflows

常见工作流

1. Implement a Design Component

1. 实现设计组件

bash

undefined

bash

undefined

Get the node ID from Figma URL (node-id=1-2 → nodeId="1:2")

从Figma URL获取节点ID（node-id=1-2 → nodeId="1:2"）

NODE_ID="1:2"

Get design context with your tech stack

获取对应技术栈的设计上下文

mise x node@20 -- mcporter call 'figma-desktop.get_design_context(nodeId: "'$NODE_ID'", clientLanguages: "typescript,css", clientFrameworks: "react")'

Get variables/tokens for the component

获取组件的变量/令牌

mise x node@20 -- mcporter call 'figma-desktop.get_variable_defs(nodeId: "'$NODE_ID'")'

undefined

mise x node@20 -- mcporter call 'figma-desktop.get_variable_defs(nodeId: "'$NODE_ID'")'

undefined

2. Document Component in Code Connect

2. 在Code Connect中记录组件文档

bash

undefined

bash

undefined

Check existing mappings

检查现有映射

mise x node@20 -- mcporter call 'figma-desktop.get_code_connect_map(nodeId: "123:456")'

Add mapping

添加映射

mise x node@20 -- mcporter call 'figma-desktop.add_code_connect_map(nodeId: "123:456", source: "src/components/Button/Button.tsx", componentName: "Button", label: "React")'

undefined

mise x node@20 -- mcporter call 'figma-desktop.add_code_connect_map(nodeId: "123:456", source: "src/components/Button/Button.tsx", componentName: "Button", label: "React")'

undefined

3. Extract Design System Tokens

3. 提取设计系统令牌

bash

undefined

bash

undefined

Get all variables for a design system frame

获取设计系统框架的所有变量

mise x node@20 -- mcporter call 'figma-desktop.get_variable_defs(nodeId: "0:1")'

Generate design system rules

生成设计系统规则

mise x node@20 -- mcporter call 'figma-desktop.create_design_system_rules(clientLanguages: "typescript,css", clientFrameworks: "react")'

undefined

mise x node@20 -- mcporter call 'figma-desktop.create_design_system_rules(clientLanguages: "typescript,css", clientFrameworks: "react")'

undefined

4. Screenshot for Documentation

4. 生成文档用截图

bash

undefined

bash

undefined

Get screenshot of a component

获取组件截图

mise x node@20 -- mcporter call 'figma-desktop.get_screenshot(nodeId: "123:456")' > component.png

undefined

mise x node@20 -- mcporter call 'figma-desktop.get_screenshot(nodeId: "123:456")' > component.png

undefined

Common Issues & Solutions

常见问题与解决方案

Problem	Solution
Connection refused	Ensure Figma Desktop is running and figma-desktop MCP server is configured
Node not found	Verify nodeId format is `123:456` (colon separator). Check the node exists in the file.
No output for large design	Use `forceCode: true` parameter to force code generation
Wrong code language	Specify `clientLanguages` and `clientFrameworks` parameters
"Invalid arguments" or command fails	Use function-call syntax, NOT flag syntax. Parameters go inside `functionName(param: value)`
FigJam tool not working	`get_figjam` only works for FigJam files, not regular Figma design files
Code Connect not appearing	Ensure the node is a component instance, not a regular frame

问题	解决方案
连接被拒绝	确认Figma Desktop正在运行，且已配置figma-desktop MCP服务器
未找到节点	验证nodeId格式为 `123:456` （冒号分隔符），确认文件中存在该节点
大型设计无输出	使用 `forceCode: true` 参数强制生成代码
代码语言错误	指定 `clientLanguages` 和 `clientFrameworks` 参数
"参数无效"或命令执行失败	使用函数调用语法，不要使用标志语法，参数需放在 `functionName(param: value)` 内部
FigJam工具无效	`get_figjam` 仅适用于FigJam文件，对普通Figma设计文件无效
Code Connect映射不显示	确认节点是组件实例，而非普通框架

Discovering Function Parameters with Schema Introspection

通过模式自省发现函数参数

The mcporter CLI can introspect the MCP server schema to discover correct parameters and their types.

mcporter CLI可以自省MCP服务器的模式，从而发现正确的参数及其类型。

List All Available Tools

列出所有可用工具

bash

mise x node@20 -- mcporter list figma-desktop --json | jq -r ".tools[].name"

Returns:

get_design_context
get_variable_defs
get_screenshot
get_code_connect_map
add_code_connect_map
get_metadata
create_design_system_rules
get_figjam

bash

mise x node@20 -- mcporter list figma-desktop --json | jq -r ".tools[].name"

返回示例：

get_design_context
get_variable_defs
get_screenshot
get_code_connect_map
add_code_connect_map
get_metadata
create_design_system_rules
get_figjam

Inspect a Specific Tool Schema

查看指定工具的模式

bash

mise x node@20 -- mcporter list figma-desktop --json | jq '.tools[] | select(.name == "get_design_context")'

This returns the full JSON schema including:

```
inputSchema.properties
```
- All available parameters with types and descriptions
```
inputSchema.required
```
- Which parameters are mandatory

Filter for just required parameters:

bash

mise x node@20 -- mcporter list figma-desktop --json | \
  jq '.tools[] | select(.name == "add_code_connect_map") | .inputSchema.required[]'

Get parameter descriptions:

bash

mise x node@20 -- mcporter list figma-desktop --json | \
  jq '.tools[] | select(.name == "get_design_context") | .inputSchema.properties | to_entries[] | "\(.key): \(.value.description)"'

bash

mise x node@20 -- mcporter list figma-desktop --json | jq '.tools[] | select(.name == "get_design_context")'

返回完整的JSON模式，包含：

```
inputSchema.properties
```
- 所有可用参数及其类型和描述
```
inputSchema.required
```
- 必填参数列表

仅筛选必填参数：

bash

mise x node@20 -- mcporter list figma-desktop --json | \
  jq '.tools[] | select(.name == "add_code_connect_map") | .inputSchema.required[]'

获取参数描述：

bash

mise x node@20 -- mcporter list figma-desktop --json | \
  jq '.tools[] | select(.name == "get_design_context") | .inputSchema.properties | to_entries[] | "\(.key): \(.value.description)"'

Tips

小贴士

Node ID from URL:
```
node-id=1-2
```
in URL becomes
```
nodeId: "1:2"
```
(replace
```
-
```
with
```
:
```
)
Branch URLs: For branch URLs, use
```
branchKey
```
as the fileKey
Currently selected: Omit
```
nodeId
```
to use the currently selected node in Figma Desktop
Technology context: Always specify
```
clientLanguages
```
and
```
clientFrameworks
```
for better code generation
Large designs: Use
```
forceCode: true
```
if output is truncated
Use
jq
for JSON parsing in shell scripts
Use schema introspection when unsure about parameters -
```
mcporter list figma-desktop --json | jq
```
is your friend

从URL获取节点ID： URL中的
```
node-id=1-2
```
对应
```
nodeId: "1:2"
```
（将
```
-
```
替换为
```
:
```
）
分支URL： 针对分支URL，使用
```
branchKey
```
作为fileKey
当前选中节点： 省略
```
nodeId
```
即可使用Figma Desktop中当前选中的节点
技术栈上下文： 始终指定
```
clientLanguages
```
和
```
clientFrameworks
```
以获得更优的代码生成效果
大型设计： 如果输出被截断，使用
```
forceCode: true
```
参数
Shell脚本中使用
jq
解析JSON
不确定参数时使用模式自省 -
```
mcporter list figma-desktop --json | jq
```
是非常实用的工具

Available Tools Reference

可用工具参考

Tool	Purpose	Required Params
`get_design_context`	Generate UI code from design	None (uses selection)
`get_screenshot`	Capture visual screenshot	None (uses selection)
`get_metadata`	Get XML structure overview	None (uses selection)
`get_variable_defs`	Get design tokens/variables	None (uses selection)
`get_code_connect_map`	Get existing code mappings	None (uses selection)
`add_code_connect_map`	Map design to code component	`source` , `componentName` , `label`
`create_design_system_rules`	Generate design system rules	None
`get_figjam`	Get FigJam content	None (uses selection)

工具	用途	必填参数
`get_design_context`	从设计生成UI代码	无（使用当前选中节点）
`get_screenshot`	捕获可视化截图	无（使用当前选中节点）
`get_metadata`	获取XML结构概览	无（使用当前选中节点）
`get_variable_defs`	获取设计令牌/变量	无（使用当前选中节点）
`get_code_connect_map`	获取现有代码映射	无（使用当前选中节点）
`add_code_connect_map`	将设计映射到代码组件	`source` , `componentName` , `label`
`create_design_system_rules`	生成设计系统规则	无
`get_figjam`	获取FigJam内容	无（使用当前选中节点）