figcraft-implement-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implement Design

实现设计

Overview

概述

This skill provides a structured workflow for translating Figma designs into production-ready code with pixel-perfect accuracy. Default tool: figcraft's
get_design_context
— figcraft's self-built design-to-code context extraction runs against the Figma Plugin API and returns in-session metadata that the component's author (figcraft itself) produced.

本技能提供了一套结构化工作流，可将Figma设计转换为像素级精准的生产就绪代码。默认工具：figcraft的
get_design_context
—— figcraft自研的设计转代码上下文提取功能基于Figma Plugin API运行，返回组件作者（即figcraft自身）生成的会话内元数据。

Skill Boundaries

技能边界

Use this skill when the deliverable is code in the user's repository.
If the user asks to create/edit/delete nodes inside Figma itself, switch to figcraft-use.
If the user asks to build or update a full-page screen in Figma, switch to figma-create-ui.
If the user asks only for Code Connect mappings, switch to figcraft-code-connect.
If the user asks to author reusable agent rules (
```
CLAUDE.md
```
/
```
AGENTS.md
```
), switch to figcraft-create-design-system-rules.

当交付物为用户仓库中的代码时，使用本技能。
如果用户要求在Figma内部创建/编辑/删除节点，请切换至figcraft-use。
如果用户要求在Figma中构建或更新整页屏幕，请切换至figma-create-ui。
如果用户仅要求Code Connect映射，请切换至figcraft-code-connect。
如果用户要求编写可复用Agent规则（
```
CLAUDE.md
```
/
```
AGENTS.md
```
），请切换至figcraft-create-design-system-rules。

Tool Choice: figcraft First, Official Figma MCPs When They Fit

工具选择：优先使用figcraft，适配场景下使用官方Figma MCP

Default — use figcraft for all design-to-code work:

```
get_design_context(nodeId, framework?)
```
— structured node tree + resolved variables/styles/components
```
export_image(nodeId)
```
— visual reference (returns base64)
```
get_node_info(nodeId, detail)
```
— full node properties when you need a single deep dive
```
get_current_page(maxDepth)
```
— page-level overview

Why figcraft is the default (honest differentiation):

In-session freshness — figcraft is a single MCP session: if the agent just edited a component via figcraft writes,
```
get_design_context
```
returns the new shape immediately. figma-desktop MCP / Figma Remote MCP would have to re-fetch via REST.
Zero OAuth / API-token setup — the figcraft plugin installs directly. Figma Remote MCP requires OAuth + Organization plan.
Zero Figma-plan gating — Plugin API is available on every Figma plan. Figma Remote MCP requires Organization or Enterprise.
Richer metadata — figcraft owns component property keys with
```
#id
```
suffixes, INSTANCE_SWAP
```
preferredValues
```
, role plugin data. These are figcraft's own authoring artifacts; the official MCPs reverse-engineer them from the REST representation.
No REST rate limits — Plugin-side reads do not consume REST quota.

Where figcraft is NOT magic (honest limits):

figcraft plugin + relay assume a local Figma client (Desktop app or Figma Web in the user's browser) reachable from wherever the MCP server runs. For remote / cloud / claude.ai-web scenarios, figcraft has the same local-connectivity trade-off as figma-desktop MCP and needs a tunnel or a local MCP-server proxy.
For pure cloud agents with zero reach to a local Figma client, Figma Remote MCP server (
```
https://...figma.com/mcp
```
, OAuth-based) is the right tool.

Fall back to the official Figma MCPs when:

User needs Code Connect publish-side helpers (
```
get_code_connect_suggestions
```
/
```
send_code_connect_mappings
```
) — Figma Desktop MCP only
User needs Dev Mode UI's existing source-link metadata — Figma Desktop MCP only
The agent runs in a fully cloud environment with no reach to the user's local Figma / figcraft plugin — Figma Remote MCP with OAuth

默认选择 —— 所有设计转代码工作均使用figcraft：

```
get_design_context(nodeId, framework?)
```
—— 结构化节点树 + 已解析的变量/样式/组件
```
export_image(nodeId)
```
—— 视觉参考（返回base64格式）
```
get_node_info(nodeId, detail)
```
—— 单节点深度解析的完整属性
```
get_current_page(maxDepth)
```
—— 页面级概览

为何figcraft是默认选择（客观差异化说明）：

会话内实时性 —— figcraft是单一MCP会话：如果Agent刚通过figcraft写入操作编辑了组件，
```
get_design_context
```
会立即返回更新后的结构。figma-desktop MCP / Figma Remote MCP则需通过REST重新获取。
无需OAuth/API令牌配置 —— figcraft插件可直接安装。Figma Remote MCP需要OAuth + 企业版计划。
无Figma版本限制 —— Plugin API适用于所有Figma版本。Figma Remote MCP需要企业版或旗舰版。
更丰富的元数据 —— figcraft拥有带
```
#id
```
后缀的组件属性键、INSTANCE_SWAP
```
preferredValues
```
、角色插件数据。这些是figcraft自身的创作产物；官方MCP需从REST表示中逆向解析。
无REST速率限制 —— 插件端读取操作不消耗REST配额。

figcraft的局限性（客观说明）：

figcraft插件和中继依赖本地Figma客户端（桌面应用或用户浏览器中的Figma网页），且需能连接到MCP服务器所在位置。对于远程/云端/claude.ai-web场景，figcraft与figma-desktop MCP存在相同的本地连接限制，需要隧道或本地MCP服务器代理。
对于完全无法访问本地Figma客户端的纯云端Agent，Figma Remote MCP服务器（
```
https://...figma.com/mcp
```
，基于OAuth）是合适的工具。

在以下场景下 fallback 至官方Figma MCP：

用户需要Code Connect发布端辅助工具（
```
get_code_connect_suggestions
```
/
```
send_code_connect_mappings
```
）—— 仅Figma Desktop MCP支持
用户需要Dev Mode UI中已有的源链接元数据——仅Figma Desktop MCP支持
Agent运行在完全云端环境，无法访问用户本地Figma/figcraft插件——使用带OAuth的Figma Remote MCP

Prerequisites

前置条件

figcraft plugin connected to the target Figma file (call
```
ping
```
or
```
get_mode
```
to verify). If ping fails → STOP. Do not fall back to other MCP servers. Tell user: open Figma → Plugins → FigCraft → wait for connection, then retry.
A target node ID — either from a Figma URL the user provided, from
```
get_selection
```
, or from
```
get_current_page
```
Project should have an established design system or component library (preferred)

figcraft插件已连接到目标Figma文件（调用
```
ping
```
或
```
get_mode
```
验证）。如果ping失败 → 停止操作。不要切换到其他MCP服务器。 告知用户：打开Figma → 插件 → FigCraft → 等待连接完成后重试。
目标节点ID——可从用户提供的Figma URL、
```
get_selection
```
或
```
get_current_page
```
获取
项目应已建立设计系统或组件库（优先推荐）

Required Workflow

必选工作流

Follow these steps in order. Do not skip steps.

按顺序执行以下步骤，请勿跳过。

Step 1: Get Node ID

步骤1：获取节点ID

Option A: Parse from Figma URL

选项A：从Figma URL解析

When the user provides a Figma URL, extract the node ID. figcraft connects to the currently open Figma file through its plugin, so a fileKey is not needed for figcraft tool calls — only the nodeId.

URL format:

https://figma.com/design/:fileKey/:fileName?node-id=42-15

Extract:

Node ID: the value of the
```
node-id
```
query parameter (e.g.
```
42-15
```
, normalized to
```
42:15
```
internally)

If the URL points to a different file than the one open in Figma, ask the user to switch the Figma file first — figcraft does not perform cross-file reads.

当用户提供Figma URL时，提取节点ID。figcraft通过其插件连接到当前打开的Figma文件，因此figcraft工具调用不需要fileKey——仅需nodeId。

URL格式：

https://figma.com/design/:fileKey/:fileName?node-id=42-15

提取内容：

节点ID：
```
node-id
```
查询参数的值（例如
```
42-15
```
，内部会标准化为
```
42:15
```
）

如果URL指向的文件与Figma中当前打开的文件不同，请要求用户先切换Figma文件——figcraft不支持跨文件读取。

Option B: Use Current Selection

选项B：使用当前选中内容

When the user has selected a node in Figma, call

get_selection

to retrieve its id.

get_selection() → returns { count, nodes: [{ id, name, type, ... }] }

当用户在Figma中选中某个节点时，调用

get_selection

获取其ID。

get_selection() → 返回 { count, nodes: [{ id, name, type, ... }] }

Option C: Browse the Page

选项C：浏览页面

When the user describes the target without an id, call

get_current_page(maxDepth: 1)

for a fast overview, then drill into specific frames with

get_node_info(nodeId, detail: "standard")

当用户描述了目标但未提供ID时，调用

get_current_page(maxDepth: 1)

获取快速概览，然后使用

get_node_info(nodeId, detail: "standard")

深入查看特定框架。

Step 2: Fetch Design Context

步骤2：获取设计上下文

Run

get_design_context

with the nodeId. Optionally pass

framework

to get a tailored hint string.

get_design_context(nodeId: "42:15", framework: "react")

This returns:

tree
— full compressed node hierarchy with
```
boundVariables
```
and
```
styleId
```
references preserved
variables
— every variable referenced in the tree, resolved to
```
{ id, name, type, collection }
```
(e.g.
```
color/bg/primary
```
→ COLOR in collection
```
Color
```
)
styles
— every paint/text/effect style referenced, resolved to
```
{ id, name, type }
```
components
— every component the tree's instances point to, resolved to
```
{ name, key, isSet, remote, propertyDefinitions }
```
frameworkHint
— short guidance string the LLM uses to map Figma constructs to the target framework (Flexbox / HStack / Modifier / etc.)
summary
— counts of textNodes, imageNodes, variablesUsed, stylesUsed, componentsUsed

framework values:

react

vue

swiftui

compose

tailwind

unspecified

(default).

If the response is too large:

Call
```
get_current_page(maxDepth: 2)
```
for a high-level node map
Identify the specific child nodes worth zooming in on
Call
```
get_design_context(nodeId: "<childId>")
```
for each child individually

使用nodeId调用

get_design_context

。可选择性传入

framework

以获取定制化提示字符串。

get_design_context(nodeId: "42:15", framework: "react")

返回内容包括：

tree
—— 完整压缩节点层级，保留
```
boundVariables
```
和
```
styleId
```
引用
variables
—— 树中引用的所有变量，解析为
```
{ id, name, type, collection }
```
（例如
```
color/bg/primary
```
→ 集合
```
Color
```
中的COLOR类型）
styles
—— 引用的所有填充/文本/效果样式，解析为
```
{ id, name, type }
```

components
—— 树中实例指向的所有组件，解析为

{ name, key, isSet, remote, propertyDefinitions }

frameworkHint
—— 简短指导字符串，供LLM将Figma结构映射到目标框架（Flexbox / HStack / Modifier等）
summary
—— textNodes、imageNodes、variablesUsed、stylesUsed、componentsUsed的数量统计

framework可选值：

react

vue

swiftui

compose

tailwind

unspecified

（默认）。

如果响应内容过大：

调用
```
get_current_page(maxDepth: 2)
```
获取高级节点映射
确定值得深入查看的特定子节点
分别为每个子节点调用
```
get_design_context(nodeId: "<childId>")
```

Step 3: Capture Visual Reference

步骤3：捕获视觉参考

Run

export_image

for a visual reference.

export_image(nodeId: "42:15", format: "PNG", scale: 2)

This returns base64-encoded image data. Keep it accessible throughout implementation as the source of truth for visual validation.

调用

export_image

获取视觉参考。

export_image(nodeId: "42:15", format: "PNG", scale: 2)

返回base64编码的图像数据。在整个实现过程中保持可访问，作为视觉验证的真实来源。

Step 4: Resolve Asset References

步骤4：解析资源引用

The

tree

from Step 2 contains image fill references. For each

IMAGE

paint:

The
```
imageHash
```
identifies the image inside the Figma file
Call
```
export_image
```
on the specific node containing the image fill to get its rasterized version
Save the exported image to the project's asset directory

For SVG/icon nodes (vector nodes with no children):

Call
```
export_image(nodeId, format: "SVG")
```
to get clean SVG markup
DO NOT add new icon packages — assets should come from the Figma export

步骤2中的

tree

包含图像填充引用。对于每个

IMAGE

填充：

```
imageHash
```
标识Figma文件中的图像
调用包含图像填充的特定节点的
```
export_image
```
获取其光栅化版本
将导出的图像保存到项目的资源目录

对于SVG/图标节点（无子节点的矢量节点）：

调用
```
export_image(nodeId, format: "SVG")
```
获取干净的SVG标记
请勿添加新的图标包——资源应来自Figma导出

Step 5: Translate to Project Conventions

步骤5：转换为项目规范

Translate the Figma context into the target framework, styles, and conventions.

Use the resolved arrays from Step 2 directly:

```
variables[].name
```
→ map slash-separated names to your CSS variables / theme tokens (e.g.
```
color/bg/primary
```
→
```
var(--color-bg-primary)
```
for web,
```
Color.bgPrimary
```
for SwiftUI)
```
styles[].name
```
→ map to text style classes / typography utilities
```
components[]
```
→ if
```
remote: true
```
, the component lives in a published library; if
```
key
```
is set, it's importable. Match by name to existing project components first.

Framework-specific mappings (driven by
frameworkHint
):

Figma	React/Tailwind	SwiftUI	Compose
`layoutMode: HORIZONTAL`	`flex flex-row`	`HStack { ... }`	`Row { ... }`
`layoutMode: VERTICAL`	`flex flex-col`	`VStack { ... }`	`Column { ... }`
`itemSpacing: 16`	`gap-4`	`spacing: 16`	`Arrangement.spacedBy(16.dp)`
`padding: 24`	`p-6`	`.padding(24)`	`Modifier.padding(24.dp)`
Variable bound fill	`bg-[var(--color-bg-primary)]` or matched token	`Color.bgPrimary`	`MaterialTheme.colors.primary`

Reuse over recreation: Always check for existing components before creating new ones. Use

search_design_system(query: "<component name>")

if the project also has a Figma library, to confirm the design system component is published.

将Figma上下文转换为目标框架、样式和规范。

直接使用步骤2中的解析数组：

```
variables[].name
```
→ 将斜杠分隔的名称映射到CSS变量/主题令牌（例如
```
color/bg/primary
```
→ Web端为
```
var(--color-bg-primary)
```
，SwiftUI端为
```
Color.bgPrimary
```
）
```
styles[].name
```
→ 映射到文本样式类/排版工具
```
components[]
```
→ 如果
```
remote: true
```
，组件位于已发布的库中；如果
```
key
```
已设置，则可导入。优先按名称匹配现有项目组件。

框架特定映射（由
frameworkHint
驱动）：

Figma	React/Tailwind	SwiftUI	Compose
`layoutMode: HORIZONTAL`	`flex flex-row`	`HStack { ... }`	`Row { ... }`
`layoutMode: VERTICAL`	`flex flex-col`	`VStack { ... }`	`Column { ... }`
`itemSpacing: 16`	`gap-4`	`spacing: 16`	`Arrangement.spacedBy(16.dp)`
`padding: 24`	`p-6`	`.padding(24)`	`Modifier.padding(24.dp)`
绑定变量的填充	`bg-[var(--color-bg-primary)]` 或匹配的令牌	`Color.bgPrimary`	`MaterialTheme.colors.primary`

复用优先于创建：创建新组件前始终检查是否存在现有组件。如果项目也有Figma库，使用

search_design_system(query: "<component name>")

确认设计系统组件已发布。

Step 6: Achieve 1:1 Visual Parity

步骤6：实现1:1视觉一致性

Strive for pixel-perfect visual parity with the Figma design.

Guidelines:

Prioritize Figma fidelity to match designs exactly
Avoid hardcoded values — use the
```
variables
```
/
```
styles
```
arrays from Step 2 to drive every color, spacing, radius, and font
When project tokens diverge from Figma, prefer project tokens but adjust spacing/sizes minimally to preserve visuals
Follow WCAG requirements for accessibility
Add component documentation as needed

力求与Figma设计实现像素级视觉一致性。

指南：

优先保证Figma保真度，完全匹配设计
避免硬编码值——使用步骤2中的
```
variables
```
/
```
styles
```
数组控制所有颜色、间距、圆角和字体
当项目令牌与Figma不一致时，优先使用项目令牌，但最小调整间距/尺寸以保留视觉效果
遵循WCAG无障碍要求
根据需要添加组件文档

Step 7: Validate Against Figma

步骤7：对照Figma验证

Before marking complete, validate the final UI against the Step 3 screenshot.

Validation checklist:

Layout matches (spacing, alignment, sizing)
Typography matches (font, size, weight, line height)
Colors match exactly — every color comes from the resolved variables, not eyeballed
Interactive states work as designed (hover, active, disabled)
Responsive behavior follows Figma constraints
Assets render correctly
Accessibility standards met

For an automated structural check on the result you implemented in Figma, call

audit_node(nodeId)

verify_design(nodeId)

在标记完成前，对照步骤3的截图验证最终UI。

验证清单：

布局匹配（间距、对齐、尺寸）
排版匹配（字体、大小、字重、行高）
颜色完全匹配——所有颜色均来自解析后的变量，而非目测
交互状态按设计工作（悬停、激活、禁用）
响应式行为遵循Figma约束
资源渲染正确
符合无障碍标准

如需对在Figma中实现的结果进行自动化结构检查，调用

audit_node(nodeId)

或

verify_design(nodeId)

。

Implementation Rules

实现规则

Component Organization

组件组织

Place UI components in the project's designated design system directory
Follow the project's component naming conventions
Avoid inline styles unless truly necessary for dynamic values

将UI组件放置在项目指定的设计系统目录中
遵循项目的组件命名规范
除非动态值确实需要，否则避免内联样式

Design System Integration

设计系统集成

ALWAYS use components from the project's design system when possible
Map Figma design tokens (from
```
get_design_context.variables
```
) to project design tokens by name match, not by raw value
When a matching component exists, extend it rather than creating a new one
Document any new components added to the design system

尽可能始终使用项目设计系统中的组件
通过名称匹配将Figma设计令牌（来自
```
get_design_context.variables
```
）映射到项目设计令牌，而非原始值
当存在匹配组件时，扩展该组件而非创建新组件
记录添加到设计系统的任何新组件

Code Quality

代码质量

Avoid hardcoded values — extract to constants or design tokens
Keep components composable and reusable
Add TypeScript types for component props
Include JSDoc comments for exported components

避免硬编码值——提取为常量或设计令牌
保持组件的可组合性和可复用性
为组件props添加TypeScript类型
为导出的组件添加JSDoc注释

Examples

示例

Example 1: Implementing a Button Component

示例1：实现按钮组件

User says: "Implement this Figma button component: https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/DesignSystem?node-id=42-15"

Actions:

Parse URL →
```
nodeId = "42:15"
```
. Confirm the file is currently open in Figma (figcraft only reads the live file).
Run
```
get_design_context(nodeId: "42:15", framework: "react")
```
— returns the button tree, the
```
color/text/inverse
```
variable, the
```
Button/Primary
```
component metadata, and the React framework hint.

Run

export_image(nodeId: "42:15", format: "PNG", scale: 2)

for the screenshot.

From the
```
components
```
array: the button is a remote library component with property definitions
```
{ Label: TEXT, Icon: INSTANCE_SWAP, State: VARIANT }
```
.
Check if project has an existing button component with matching API. If yes, extend it; if no, create new component using project conventions.
Map Figma variables to project tokens by name:
```
color/bg/primary
```
→
```
var(--color-bg-primary)
```
.
Validate against the Step 3 screenshot for padding, border radius, typography.

Result: Button component matching Figma design, integrated with project design system.

用户说：“实现这个Figma按钮组件：https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/DesignSystem?node-id=42-15”

操作：

解析URL →
```
nodeId = "42:15"
```
。确认该文件当前在Figma中打开（figcraft仅读取实时文件）。

调用

get_design_context(nodeId: "42:15", framework: "react")

—— 返回按钮树、

color/text/inverse

变量、

Button/Primary

组件元数据和React框架提示。

调用

export_image(nodeId: "42:15", format: "PNG", scale: 2)

获取截图。

从
```
components
```
数组可知：该按钮是远程库组件，属性定义为
```
{ Label: TEXT, Icon: INSTANCE_SWAP, State: VARIANT }
```
。
检查项目是否有API匹配的现有按钮组件。如果有，扩展它；如果没有，按照项目规范创建新组件。
按名称将Figma变量映射到项目令牌：
```
color/bg/primary
```
→
```
var(--color-bg-primary)
```
。
对照步骤3的截图验证 padding、圆角、排版。

结果： 匹配Figma设计的按钮组件，已集成到项目设计系统中。

Example 2: Building a Dashboard Layout

示例2：构建仪表板布局

User says: "Build this dashboard: https://figma.com/design/pR8mNv5KqXzGwY2JtCfL4D/Dashboard?node-id=10-5"

Actions:

Parse URL →
```
nodeId = "10:5"
```
. Confirm the dashboard file is open in Figma.
Run
```
get_current_page(maxDepth: 2)
```
to understand the page structure (header, sidebar, content area, cards).
Run
```
get_design_context(nodeId: "10:5", framework: "react")
```
for the full dashboard. If the response is too large, switch to per-section calls using the child nodeIds from Step 2.

Run

export_image(nodeId: "10:5", format: "PNG", scale: 2)

for a full-page reference.

Export logos and chart assets via

export_image(nodeId: "<assetId>", format: "SVG")

per asset.

Build layout using the project's layout primitives, driven by the
```
tree.layoutMode
```
and
```
tree.itemSpacing
```
values from Step 3.
Implement each section using existing components where possible, matching by name from
```
components[]
```
.
Validate responsive behavior against Figma constraints in the screenshot.

Result: Complete dashboard matching Figma design with responsive layout.

用户说：“构建这个仪表板：https://figma.com/design/pR8mNv5KqXzGwY2JtCfL4D/Dashboard?node-id=10-5”

操作：

解析URL →
```
nodeId = "10:5"
```
。确认仪表板文件已在Figma中打开。
调用
```
get_current_page(maxDepth: 2)
```
了解页面结构（页眉、侧边栏、内容区域、卡片）。
调用
```
get_design_context(nodeId: "10:5", framework: "react")
```
获取完整仪表板数据。如果响应过大，切换为使用步骤2中的子节点ID进行分区域调用。

调用

export_image(nodeId: "10:5", format: "PNG", scale: 2)

获取整页参考截图。

对每个资源调用
```
export_image(nodeId: "<assetId>", format: "SVG")
```
导出logo和图表资源。
使用项目的布局原语构建布局，由步骤3中的
```
tree.layoutMode
```
和
```
tree.itemSpacing
```
值驱动。
尽可能使用现有组件实现每个区域，按
```
components[]
```
中的名称匹配。
对照截图验证响应式行为是否符合Figma约束。

结果： 完整的仪表板，匹配Figma设计并具备响应式布局。

Best Practices

最佳实践

Always Start with Context

始终从上下文开始

Never implement based on assumptions. Always run

get_design_context

and

export_image

first.

切勿基于假设进行实现。始终先调用

get_design_context

和

export_image

。

Incremental Validation

增量验证

Validate frequently during implementation, not just at the end. This catches issues early.

在实现过程中频繁验证，而非仅在最后验证。这可以尽早发现问题。

Document Deviations

记录偏差

If you must deviate from the Figma design (e.g., for accessibility or technical constraints), document why in code comments.

如果必须偏离Figma设计（例如出于无障碍或技术约束），请在代码注释中记录原因。

Reuse Over Recreation

复用优先于创建

Always check for existing components before creating new ones. Consistency across the codebase is more important than exact Figma replication.

创建新组件前始终检查是否存在现有组件。代码库的一致性比精确复制Figma更重要。

Design System First

设计系统优先

When in doubt, prefer the project's design system patterns over literal Figma translation.

如有疑问，优先选择项目的设计系统模式而非字面翻译Figma。

Token-Driven Styling

令牌驱动的样式

Every color, spacing, radius, and font in the generated code should map to a name from

get_design_context.variables

get_design_context.styles

. If you find yourself writing a raw hex or px value, stop and check if a token exists.

生成代码中的每个颜色、间距、圆角和字体都应映射到

get_design_context.variables

或

get_design_context.styles

中的名称。如果发现自己在编写原始十六进制或px值，请停止并检查是否存在对应的令牌。

Common Issues and Solutions

常见问题及解决方案

Issue: Response too large from get_design_context

问题：get_design_context响应内容过大

Cause: The target node has too many descendants to return in a single call. Solution: Call

get_current_page(maxDepth: 2)

to find logical sub-frames, then

get_design_context

on each child individually.

原因： 目标节点包含过多子节点，无法在单次调用中返回。 解决方案： 调用

get_current_page(maxDepth: 2)

找到逻辑子框架，然后分别对每个子节点调用

get_design_context

。

Issue: Design doesn't match after implementation

问题：实现后设计不匹配

Cause: Visual discrepancies between the implemented code and the original Figma design. Solution: Compare side-by-side with the screenshot from Step 3. Cross-check color/spacing values against the

variables

array — if a value didn't come from a token, that's the likely source of drift.

原因： 实现的代码与原始Figma设计存在视觉差异。 解决方案： 与步骤3的截图并排对比。对照

variables

数组交叉检查颜色/间距值——如果某个值不是来自令牌，那很可能是差异的来源。

Issue: Variable names don't match project tokens

问题：变量名称与项目令牌不匹配

Cause: The Figma library uses different naming conventions than the project's CSS / theme tokens. Solution: Maintain a one-time naming map in the project (e.g.

color/bg/primary

→

--color-bg-primary

). If a Figma variable has no project equivalent, propose adding it to the project's design system rather than hardcoding.

原因： Figma库使用的命名规范与项目的CSS/主题令牌不同。 解决方案： 在项目中维护一次性命名映射（例如

color/bg/primary

→

--color-bg-primary

）。如果Figma变量没有对应的项目等效项，建议将其添加到项目的设计系统中，而非硬编码。

Issue: Component with

remote: true

not found in code

问题：

remote: true

的组件在代码中找不到

Cause: The Figma instance points to a published library component that doesn't have a matching code component yet. Solution: Confirm with the user whether to create the missing component or detach the instance and inline the design.

原因： Figma实例指向已发布的库组件，但该组件尚未有匹配的代码组件。 解决方案： 与用户确认是创建缺失的组件还是分离实例并内联设计。

Understanding Design Implementation

理解设计实现

The Figma implementation workflow establishes a reliable process for translating designs to code:

For designers: Confidence that implementations will match their designs with pixel-perfect accuracy. For developers: A structured approach that eliminates guesswork and reduces back-and-forth revisions. For teams: Consistent, high-quality implementations that maintain design system integrity.

By following this workflow, you ensure that every Figma design is implemented with the same level of care and attention to detail.

Figma实现工作流为设计转代码建立了可靠的流程：

对于设计师： 确信实现将与他们的设计保持像素级精准一致。 对于开发者： 结构化方法消除了猜测，减少了反复修订。 对于团队： 一致、高质量的实现，维护设计系统的完整性。

通过遵循此工作流，你可以确保每个Figma设计都得到同等细致的处理和关注。

Additional Resources

额外资源

figcraft tool reference: call

list_toolsets

and

get_creation_guide(topic: "tool-behavior")

Figma Variables and Design Tokens

figcraft工具参考：调用

list_toolsets

和

get_creation_guide(topic: "tool-behavior")

Figma变量与设计令牌