figma-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Figma Design

Figma 设计

Access Figma designs, design systems, and components for frontend implementation. Extract design tokens, component specifications, and visual assets to ensure pixel-perfect implementation.

访问Figma设计稿、设计系统与组件，用于前端开发实现。提取设计令牌、组件规格与视觉资源，确保像素级精准的UI实现。

Quick Start

快速开始

Identify design source - Get Figma file URL, frame names, or component IDs from designer
Extract design tokens - Use
```
get_design_system
```
or
```
export_tokens
```
for colors, typography, spacing
Get component details - Use
```
get_node_info
```
,
```
get_component
```
for structure, variants, states

Download assets - Use

download_design_assets

export_node_as_image

for images, icons

Implement with fidelity - Apply
```
frontend-philosophy
```
to extracted tokens, maintain visual quality

确定设计来源 - 从设计师处获取Figma文件URL、框架名称或组件ID
提取设计令牌 - 使用
```
get_design_system
```
或
```
export_tokens
```
获取颜色、排版、间距信息
获取组件详情 - 使用
```
get_node_info
```
、
```
get_component
```
获取结构、变体、状态信息
下载资源 - 使用
```
download_design_assets
```
或
```
export_node_as_image
```
获取图片、图标
高还原度实现 - 将提取的令牌应用于
```
frontend-philosophy
```
，维持视觉品质

Workflow

工作流程

0) If any MCP call fails because Figma MCP is not connected, pause and set it up:

0) 若因未连接Figma MCP导致MCP调用失败，请暂停并完成以下设置：

Add the Figma MCP:

codex mcp add figma --url https://mcp.figma.com/mcp

Enable remote MCP client:

Set

[features].rmcp_client = true

config.toml

or run

codex --enable rmcp_client

Log in with OAuth (or configure API token):
- ```
codex mcp login figma
```
- OR set
```
FIGMA_ACCESS_TOKEN
```
  environment variable

After successful login, the user will have to restart codex. You should finish your answer and tell them so when they try again they can continue with Step 1.

添加Figma MCP：

codex mcp add figma --url https://mcp.figma.com/mcp

启用远程MCP客户端：

在

config.toml

中设置

[features].rmcp_client = true

或运行

codex --enable rmcp_client

通过OAuth登录（或配置API令牌）：
- ```
codex mcp login figma
```
- 或设置
```
FIGMA_ACCESS_TOKEN
```
  环境变量

登录成功后，用户需重启codex。完成此步骤后，请告知用户下次尝试时可继续执行步骤1。

1) Understand the Design Context

1) 理解设计上下文

Before extracting any data, clarify:

What Figma file or frame contains the design?
Is there a design system or shared library?
What component(s) need implementation?
Are there specific variants or states (hover, active, disabled)?
What framework is being used (React, Vue, HTML/CSS)?

Tools to use:

```
get_document_info
```
- Get file structure overview
```
get_file_nodes
```
- List all nodes in file
```
get_tree
```
- Export file structure as ASCII tree

提取数据前，请明确：

设计包含在哪个Figma文件或框架中？
是否存在设计系统或共享库？
需要实现哪些组件？
是否有特定变体或状态（悬停、激活、禁用）？
使用的框架是什么（React、Vue、HTML/CSS）？

可使用工具：

```
get_document_info
```
- 获取文件结构概览
```
get_file_nodes
```
- 列出文件中所有节点
```
get_tree
```
- 将文件结构导出为ASCII树形图

2) Extract Design System Tokens

2) 提取设计系统令牌

Design tokens are the foundation of consistent UI implementation.

Colors:

```
get_styles
```
- List all color styles
```
export_tokens({ format: "css" })
```
- Export as CSS variables
```
export_tokens({ format: "tailwind" })
```
- Export as Tailwind config
```
export_tokens({ format: "json" })
```
- Export as JSON

Typography:

```
get_styles
```
- List all text styles
Extract font families, sizes, weights, line heights
Map to
```
frontend-philosophy
```
distinctive fonts (avoid Inter, Roboto)

Spacing & Layout:

```
get_node_info
```
with
```
@layout
```
projection - Get padding, gaps, auto-layout
Extract spacing scale (4px, 8px, 16px, 24px, etc.)
Identify layout patterns (flexbox, grid)

Effects:

```
get_styles
```
- List effect styles (shadows, blurs)
```
get_css
```
- Extract exact CSS for shadows, borders, opacity

设计令牌是一致UI实现的基础。

颜色：

```
get_styles
```
- 列出所有颜色样式
```
export_tokens({ format: "css" })
```
- 导出为CSS变量
```
export_tokens({ format: "tailwind" })
```
- 导出为Tailwind配置
```
export_tokens({ format: "json" })
```
- 导出为JSON格式

排版：

```
get_styles
```
- 列出所有文本样式
提取字体族、字号、字重、行高
映射到
```
frontend-philosophy
```
推荐的特色字体（避免使用Inter、Roboto）

间距与布局：

使用
```
@layout
```
投影调用
```
get_node_info
```
- 获取内边距、间距、自动布局信息
提取间距刻度（4px、8px、16px、24px等）
识别布局模式（flexbox、grid）

效果：

```
get_styles
```
- 列出效果样式（阴影、模糊）
```
get_css
```
- 提取阴影、边框、透明度的精确CSS代码

3) Get Component Specifications

3) 获取组件规格

For each component to implement:

Structure:

get_node_info({ node_id, select: ["@structure", "@bounds"] })

- Get hierarchy and dimensions

```
get_component
```
- Get component details and variants
```
list_local_components
```
- Audit all project components
```
list_remote_components
```
- Access team library components

Styling:

```
get_css({ node_id })
```
- Extract CSS properties (fills, strokes, effects, corner radius)

get_node_info({ node_id, select: ["@css"] })

- Get detailed styling data

Note: Apply
```
frontend-philosophy
```
- enhance generic styles with intentional color and atmosphere

Variants & States:

```
get_component
```
returns all variants (Primary/Secondary, Small/Medium/Large)
```
get_node_info
```
for each variant to understand differences
Map to component props (e.g.,
```
variant="primary"
```
,
```
size="large"
```
)

Accessibility:

Check for accessibility labels in Figma annotations
Extract semantic roles (button, link, heading)
Verify color contrast meets WCAG standards

针对每个需要实现的组件：

结构：

get_node_info({ node_id, select: ["@structure", "@bounds"] })

- 获取层级结构与尺寸

```
get_component
```
- 获取组件详情与变体
```
list_local_components
```
- 审核项目中所有组件
```
list_remote_components
```
- 访问团队库组件

样式：

```
get_css({ node_id })
```
- 提取CSS属性（填充、描边、效果、圆角）

get_node_info({ node_id, select: ["@css"] })

- 获取详细样式数据

注意：应用
```
frontend-philosophy
```
- 用有目的性的色彩与氛围优化通用样式

变体与状态：

```
get_component
```
返回所有变体（主/次按钮、小/中/大尺寸）
为每个变体调用
```
get_node_info
```
以理解差异
映射到组件属性（如
```
variant="primary"
```
、
```
size="large"
```
）

无障碍性：

检查Figma注释中的无障碍标签
提取语义角色（按钮、链接、标题）
验证颜色对比度符合WCAG标准

4) Download Visual Assets

4) 下载视觉资源

Images & Icons:

export_node_as_image({ node_id, format: "svg" })

- Export icons as SVG

export_node_as_image({ node_id, format: "png", scale: 2 })

- Export images at 2x

download_design_assets({ figma_url, local_path })

- Batch download all assets

Reference Images:

```
download_design_assets
```
includes
```
reference.png
```
for visual context
Use reference image with
```
zai-vision_*
```
tool for visual comparison during implementation

图片与图标：

export_node_as_image({ node_id, format: "svg" })

- 将图标导出为SVG格式

export_node_as_image({ node_id, format: "png", scale: 2 })

- 以2倍分辨率导出图片

download_design_assets({ figma_url, local_path })

- 批量下载所有资源

参考图片：

```
download_design_assets
```
包含
```
reference.png
```
用于视觉上下文参考
实现过程中可将参考图片与
```
zai-vision_*
```
工具配合使用，进行视觉对比

5) Implement with Design Fidelity

5) 高还原度实现

Apply extracted tokens while maintaining

frontend-philosophy

Typography:

If Figma uses generic fonts (Inter, Roboto), suggest distinctive alternatives
Maintain hierarchy and scale from design tokens
Apply proper font weights and line heights

Color:

Extract color palette from Figma
If palette is generic gray/blue, propose bold intentional alternatives
Maintain contrast ratios for accessibility

Spacing:

Use exact padding, margins, gaps from auto-layout properties
Apply brave spatial composition (generous negative space OR controlled density)

Effects:

Extract shadows, blurs, gradients from Figma
Layer visual richness (gradient meshes, noise textures) per
```
frontend-philosophy
```

Motion:

Figma prototypes may specify transitions
Add purposeful motion that enhances UX (not decorative)

应用提取的令牌同时遵循

frontend-philosophy

：

排版：

若Figma使用通用字体（Inter、Roboto），建议替换为特色替代字体
维持设计令牌中的层级与刻度
应用合适的字重与行高

颜色：

从Figma提取调色板
若调色板为通用灰/蓝色系，建议改用大胆且有目的性的替代方案
维持符合无障碍要求的对比度

间距：

使用自动布局属性中的精确内边距、外边距、间距值
应用大胆的空间构图（充足留白或可控密度）

效果：

从Figma提取阴影、模糊、渐变效果
根据
```
frontend-philosophy
```
添加视觉层次感（渐变网格、噪点纹理）

动效：

Figma原型可能指定了过渡效果
添加能增强UX的有目的性动效（而非装饰性动效）

6) Verify Implementation

6) 验证实现效果

Visual Comparison:

Export Figma frame as PNG:
```
export_node_as_image
```
Screenshot implemented component
Use
```
zai-vision_*
```
to compare for pixel-perfect accuracy

Responsive Behavior:

Check Figma constraints (fixed, stretch, scale)
Implement responsive breakpoints
Test on multiple viewport sizes

Accessibility:

Verify color contrast with Figma accessibility plugin data
Add ARIA labels and semantic HTML
Test keyboard navigation

视觉对比：

使用
```
export_node_as_image
```
将Figma框架导出为PNG
对已实现的组件截图
使用
```
zai-vision_*
```
工具对比，确保像素级精准

响应式表现：

检查Figma约束（固定、拉伸、缩放）
实现响应式断点
在多个视口尺寸上测试

无障碍性：

验证颜色对比度符合Figma无障碍插件数据
添加ARIA标签与语义化HTML
测试键盘导航

Available Tools

可用工具

Document Navigation

文档导航

```
get_document_info
```
- Get file overview and structure
```
get_file_nodes
```
- List all nodes in file
```
get_tree
```
- Export file structure as ASCII tree with node IDs
```
get_selection
```
- Get currently selected elements in Figma
```
set_current_page
```
- Switch to specific page

```
get_document_info
```
- 获取文件概览与结构
```
get_file_nodes
```
- 列出文件中所有节点
```
get_tree
```
- 将文件结构导出带节点ID的ASCII树形图
```
get_selection
```
- 获取Figma中当前选中的元素
```
set_current_page
```
- 切换到指定页面

Design System Extraction

设计系统提取

```
get_styles
```
- List all styles (color, text, effect, grid)
```
export_tokens
```
- Export design tokens to CSS/JSON/Tailwind
```
get_css
```
- Extract CSS properties from nodes
```
get_local_components
```
- Audit project components
```
get_remote_components
```
- Access team library components

```
get_styles
```
- 列出所有样式（颜色、文本、效果、网格）
```
export_tokens
```
- 将设计令牌导出为CSS/JSON/Tailwind格式
```
get_css
```
- 从节点提取CSS属性
```
get_local_components
```
- 审核项目组件
```
get_remote_components
```
- 访问团队库组件

Component Analysis

组件分析

```
get_node_info
```
- Inspect specific node properties (use projections:
```
@structure
```
,
```
@css
```
,
```
@layout
```
,
```
@typography
```
,
```
@tokens
```
)
```
get_nodes_info
```
- Batch inspect multiple nodes
```
get_component
```
- Get component details and variants
```
create_component_instance
```
- Use components in designs

```
get_node_info
```
- 检查特定节点属性（使用投影：
```
@structure
```
、
```
@css
```
、
```
@layout
```
、
```
@typography
```
、
```
@tokens
```
）
```
get_nodes_info
```
- 批量检查多个节点
```
get_component
```
- 获取组件详情与变体
```
create_component_instance
```
- 在设计中使用组件

Asset Export

资源导出

```
export_node_as_image
```
- Export as PNG/SVG/JPG
```
download_design_assets
```
- Batch download assets with reference image
```
scan_text_nodes
```
- Find all text layers for content audit

```
export_node_as_image
```
- 导出为PNG/SVG/JPG格式
```
download_design_assets
```
- 批量下载资源及参考图片
```
scan_text_nodes
```
- 查找所有文本图层用于内容审核

Query API (Advanced)

查询API（进阶）

query

- Use Figma Query DSL for token-efficient searches

Projections:

@structure

@bounds

@css

@layout

@typography

@tokens

@images

@all

Filters:
```
$match
```
,
```
$eq
```
,
```
$in
```
,
```
$gt
```
,
```
$lt
```

Example:

{ "from": ["COMPONENT"], "where": { "name": { "$match": "Button*" } }, "select": ["@structure", "@css"] }

query

- 使用Figma Query DSL进行高效搜索

投影：

@structure

、

@bounds

、

@css

、

@layout

、

@typography

、

@tokens

、

@images

、

@all

过滤器：
```
$match
```
、
```
$eq
```
、
```
$in
```
、
```
$gt
```
、
```
$lt
```

示例：

{ "from": ["COMPONENT"], "where": { "name": { "$match": "Button*" } }, "select": ["@structure", "@css"] }

Practical Workflows

实用工作流程

Design Handoff

设计交付

Goal: Extract complete design specifications for implementation

```
get_document_info
```
- Understand file structure
```
get_tree
```
- Get node IDs for target frames
```
export_tokens({ format: "tailwind" })
```
- Export design system

get_node_info({ node_id, select: ["@all"] })

- Get component details

```
download_design_assets
```
- Download assets + reference.png
Implement component using extracted data

目标： 提取完整设计规格用于开发实现

```
get_document_info
```
- 理解文件结构
```
get_tree
```
- 获取目标框架的节点ID
```
export_tokens({ format: "tailwind" })
```
- 导出设计系统

get_node_info({ node_id, select: ["@all"] })

- 获取组件详情

```
download_design_assets
```
- 下载资源及reference.png
使用提取的数据实现组件

Design System Audit

设计系统审核

Goal: Inventory design tokens and components for consistency

```
get_styles
```
- List all color, text, effect styles
```
list_local_components
```
- Get all components with usage count
```
export_tokens({ format: "json" })
```
- Export tokens for analysis
Identify inconsistencies (duplicate colors, similar components)
Recommend consolidation or cleanup

目标： 盘点设计令牌与组件，确保一致性

```
get_styles
```
- 列出所有颜色、文本、效果样式
```
list_local_components
```
- 获取所有组件及其使用次数
```
export_tokens({ format: "json" })
```
- 导出令牌用于分析
识别不一致性（重复颜色、相似组件）
建议合并或清理方案

Component Library Migration

组件库迁移

Goal: Convert Figma components to code components

```
list_local_components
```
- Get component inventory
For each component:
- ```
get_component
```
  - Get variants and properties
- ```
get_css
```
  - Extract styling
- ```
get_node_info({ select: ["@layout"] })
```
  - Get layout properties
Generate component code (React, Vue, etc.)
Create Storybook stories or documentation

目标： 将Figma组件转换为代码组件

```
list_local_components
```
- 获取组件清单
针对每个组件：
- ```
get_component
```
  - 获取变体与属性
- ```
get_css
```
  - 提取样式
- ```
get_node_info({ select: ["@layout"] })
```
  - 获取布局属性
生成组件代码（React、Vue等）
创建Storybook示例或文档

Visual QA & Pixel Perfection

视觉QA与像素级精准

Goal: Ensure implementation matches design exactly

export_node_as_image({ node_id, format: "png", scale: 2 })

- Export design

Screenshot implemented component
Use
```
zai-vision_*
```
for visual comparison
Identify discrepancies (spacing, colors, shadows)
Fix implementation and re-verify

目标： 确保实现效果与设计完全匹配

export_node_as_image({ node_id, format: "png", scale: 2 })

- 导出设计稿

对已实现的组件截图
使用
```
zai-vision_*
```
进行视觉对比
识别差异（间距、颜色、阴影）
修复实现并重新验证

Design Token Synchronization

设计令牌同步

Goal: Keep code tokens in sync with Figma

```
export_tokens({ format: "css" })
```
- Export current tokens
Compare with existing CSS variables or Tailwind config
Identify changes (new colors, updated spacing)
Update code design system
Document changes and notify team

目标： 保持代码令牌与Figma同步

```
export_tokens({ format: "css" })
```
- 导出当前令牌
与现有CSS变量或Tailwind配置对比
识别变更（新颜色、更新的间距）
更新代码中的设计系统
记录变更并通知团队

Tips for Maximum Productivity

高效使用技巧

Use projections for efficient queries -
```
select: ["@structure", "@css"]
```
fetches only needed data
Batch node inspections - Use
```
get_nodes_info
```
for multiple nodes instead of individual calls
Export tokens early - Get design system tokens before diving into components
Download reference images - Visual context helps with implementation decisions
Map Figma variants to props - Component variants become component props (e.g.,
```
variant
```
,
```
size
```
,
```
state
```
)
Use Query DSL for large files - More token-efficient than fetching entire files
Cache component IDs - Reuse node IDs across multiple queries
Verify with visual comparison - Always compare exported design vs. implementation

使用投影实现高效查询 -
```
select: ["@structure", "@css"]
```
仅获取所需数据
批量节点检查 - 使用
```
get_nodes_info
```
处理多个节点，替代多次单独调用
尽早导出令牌 - 在深入组件前先获取设计系统令牌
下载参考图片 - 视觉上下文有助于实现决策
将Figma变体映射到属性 - 组件变体对应组件属性（如
```
variant
```
、
```
size
```
、
```
state
```
）
对大文件使用Query DSL - 比获取整个文件更高效
缓存组件ID - 在多次查询中复用节点ID
通过视觉对比验证 - 始终对比导出的设计稿与实现效果

Troubleshooting

故障排查

Authentication Errors: Re-run OAuth (
```
codex mcp login figma
```
); verify workspace access; check API token permissions
File Not Found: Verify Figma URL is correct and accessible; check file hasn't been moved or deleted
Node Not Found: Use
```
get_tree
```
to find correct node IDs; verify node hasn't been deleted
Export Failures: Check node type supports export (frames, components); verify export settings; try different format (PNG vs SVG)
Missing Fonts: Pre-load custom fonts with
```
load_font_async
```
before setting font names
Component Import Timeout: Use
```
getNodeByIdAsync
```
for local components; increase timeout for remote library components
Token Export Issues: Verify design uses variables/styles (not raw values); check file has defined color/text styles
Rate Limits: Batch operations; use Query DSL for efficient data fetching; implement exponential backoff

认证错误：重新运行OAuth登录(
```
codex mcp login figma
```
)；验证工作区访问权限；检查API令牌权限
文件未找到：验证Figma URL正确且可访问；检查文件是否被移动或删除
节点未找到：使用
```
get_tree
```
查找正确的节点ID；验证节点未被删除
导出失败：检查节点类型支持导出（框架、组件）；验证导出设置；尝试不同格式（PNG vs SVG）
字体缺失：在设置字体名称前使用
```
load_font_async
```
预加载自定义字体
组件导入超时：对本地组件使用
```
getNodeByIdAsync
```
；增加远程库组件的超时时间
令牌导出问题：验证设计使用了变量/样式（而非原始值）；检查文件是否定义了颜色/文本样式
速率限制：批量操作；使用Query DSL实现高效数据获取；实现指数退避策略

Integration with Frontend Workflow

与前端工作流集成

When working with the

frontend

agent:

Load this skill first:
```
skill("figma-design")
```
before implementation
Extract design tokens as foundation for styling
Get component specs for structure and variants
Apply frontend-philosophy to elevate generic Figma designs:
- Replace generic fonts with distinctive alternatives
- Enhance color palettes with bold, intentional choices
- Add atmosphere and depth (gradients, shadows, textures)
- Implement purposeful motion
Verify visual fidelity with exported reference images

See

reference/design-handoff-workflow.md

for detailed step-by-step process.

与

frontend

agent协作时：

先加载此技能：在实现前调用
```
skill("figma-design")
```
提取设计令牌作为样式基础
获取组件规格用于结构与变体实现
应用frontend-philosophy优化通用Figma设计：
- 用特色替代字体替换通用字体
- 用大胆、有目的性的选择增强调色板
- 添加氛围与层次感（渐变、阴影、纹理）
- 实现有目的性的动效
通过导出的参考图片验证视觉还原度

详细分步流程请查看

reference/design-handoff-workflow.md

。

References and Examples

参考资料与示例

```
reference/design-token-extraction.md
```
- How to export and apply design tokens

reference/component-implementation-guide.md

- Step-by-step component conversion

```
reference/figma-query-dsl.md
```
- Query DSL syntax and examples
```
examples/button-component-extraction.md
```
- Complete button component workflow
```
examples/design-system-migration.md
```
- Migrating Figma design system to code

```
reference/design-token-extraction.md
```
- 如何导出与应用设计令牌

reference/component-implementation-guide.md

- 组件转换分步指南

```
reference/figma-query-dsl.md
```
- Query DSL语法与示例
```
examples/button-component-extraction.md
```
- 完整按钮组件工作流
```
examples/design-system-migration.md
```
- 将Figma设计系统迁移到代码 ",