figma-build

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

figma-build

Turn code or a description into a Figma design that looks like it belongs in the file: reuse the components, variables, and styles that already exist, and only build what's genuinely missing. This is the mirror image of

figma-codegen

— same "reuse beats regenerate / reference tokens not literals" philosophy, pointed at the canvas instead of the codebase. This file is the router; deep detail lives in

references/

— load a reference when its step is in play.

You operate on the connected Figma file (the plugin's current session). There is no fetch-by-URL; the user must have the target file open. Confirm a plugin is connected (

ping

) before building.

将代码或描述转化为与现有文件风格一致的Figma设计：复用已有的组件、变量和样式，仅构建真正缺失的内容。这是

figma-codegen

的镜像功能——秉持相同的「复用优于重生成 / 引用令牌而非字面量」理念，只不过面向设计画布而非代码库。本文件为路由文件；详细内容请见

references/

目录——当执行到对应步骤时加载参考文档。

你将在已关联的Figma文件（插件当前会话）上操作。不支持通过URL获取文件；用户必须打开目标文件。在构建前请确认插件已关联（执行

ping

操作）。

When to use

使用场景

The user wants to create or update something in Figma from code or a description — a screen, view, modal/dialog/drawer/sidebar/panel, a single component, or a design-system asset.
Not for reading a Figma design into code — that's
```
figma-codegen
```
.

用户希望从代码或描述在Figma中创建或更新内容——页面、视图、弹窗/对话框/侧边栏/面板、单个组件或设计系统资源。
不适用于将Figma设计转换为代码——那是
```
figma-codegen
```
的功能。

First, understand the environment, then build (provider-first)

先理解环境，再进行构建（优先适配现有资源）

The write-side mirror of codegen's grounding, and the most important habit: an off-looking build almost always comes from invented values or assumed conventions. So understand this user's actual environment first, then build into it — never apply a generic template. There's no single "right" stack; there's their stack. Look at both ends before creating anything:

The Figma file — its existing design system, which you'll reuse and bind to:
1. get_variable_defs
  → the file's variables (colour / spacing / radius / typography) with names + values +
```
hex
```
  . These are the tokens you bind to.
2. scan_components
  / get_local_components
  → existing components to instance rather than rebuild. Match the source UI pattern (a card, a list row, a nav, a button) to a component.
3. get_styles
  → shared paint / text / effect styles to apply.
The source you were handed — when it's code, which stack and styling system (Tailwind / Chakra / MUI / CSS modules / vanilla …) and whether it has a config / theme / tokens file. That's where its real values live — read them from there, don't assume a default.

Then build, tracing every value to a source in priority order: reuse an existing component / variable / style; else take the exact value from the source's own code — provider-first, resolving whatever styling system it uses to real px / hex (CSS literally; Tailwind / Chakra / UnoCSS / … via their config or scale), never eyeballed; only invent from a consistent scale when neither exists. Full detail + the value-resolution method in

references/write-rules.md

这是代码生成工具在写入端的镜像逻辑，也是最重要的准则：外观不协调的构建结果几乎总是源于凭空生成的值或假设的约定。因此，先理解用户的实际环境，再基于此进行构建——绝不要套用通用模板。不存在单一的「正确」技术栈；只存在用户的技术栈。在创建任何内容前，务必兼顾两端：

Figma文件——其现有设计系统，你将复用并绑定该系统：
1. get_variable_defs
  → 文件中的变量（颜色/间距/圆角/排版），包含名称、值及
```
hex
```
  格式。这些是你要绑定的令牌。
2. scan_components
  / get_local_components
  → 现有组件，应实例化而非重新构建。将源UI模式（卡片、列表行、导航栏、按钮）与对应组件匹配。
3. get_styles
  → 可应用的共享填充/文本/效果样式。
提供的源内容——如果是代码，需明确其技术栈和样式系统（Tailwind / Chakra / MUI / CSS模块 / 原生CSS……），以及是否包含配置/主题/令牌文件。这些是真实值的来源——从这里读取，不要假设默认值。

随后开始构建，按优先级追溯每个值的来源：优先复用现有组件/变量/样式；否则直接获取源代码中的精确值——优先适配现有资源，将所用的任何样式系统解析为真实的px / hex值（CSS直接解析；Tailwind / Chakra / UnoCSS / ……通过其配置或比例解析），绝不要凭目测估算；仅当两者都不存在时，才从统一的比例中生成值。详细内容及值解析方法请见

references/write-rules.md

。

Two jobs — both follow the write rules

两类任务——均遵循写入规则

Every build obeys the same cross-cutting rules — ground values (design system → source code → scale), reference tokens (colour via

bind_variable_to_paint

, scalars via

bind_variable_to_node

, shared looks via

apply_style_to_node

), auto-layout for related children (absolute only for top-level placement), HUG/FILL/FIXED sizing via

set_layout_props

(so the layout computes sizes — don't hardcode width/height), and real fonts (a new TEXT node defaults to Inter). → references/write-rules.md
.

Assemble a screen / component from what exists (the common case): recognise the UI pattern,
```
create_instance
```
matching components, bind tokens, build incrementally, screenshot-verify each step. → references/assemble-screens.md
.
Author a new design-system asset (only when grounding found no equivalent): create variables/collections, paint/text styles, or components + variant sets, then switch back to the reuse path. → references/author-design-system.md
.

所有构建操作均遵循相同的通用规则：确定值的来源（设计系统→源代码→比例），引用令牌（通过

bind_variable_to_paint

绑定颜色，通过

bind_variable_to_node

绑定标量，通过

apply_style_to_node

应用共享样式），为关联子元素使用自动布局（仅顶级元素使用绝对定位），通过

set_layout_props

设置HUG/FILL/FIXED尺寸（让布局自动计算尺寸——不要硬编码宽高），使用真实字体（新TEXT节点默认使用Inter字体）。→ references/write-rules.md
。

从现有资源组装页面/组件（常见场景）：识别UI模式，
```
create_instance
```
匹配的组件，绑定令牌，逐步构建，每一步都通过截图验证。→ references/assemble-screens.md
。
创建新的设计系统资源（仅当未找到等效资源时）：创建变量/集合、填充/文本样式或组件+变体集，然后切换回复用流程。→ references/author-design-system.md
。

Motion (animation)

动效（动画）

When the source carries animation — CSS

@keyframes

transition

, Framer Motion, GSAP, a Vue/Svelte transition — author it as Figma Motion (beta) on the frame you built rather than dropping it:

apply_animation_style

(presets from

get_motion_styles

) or

apply_manual_keyframe_track

per property,

set_timeline_duration

for length. A staggered row is one atomic
batch
of

apply_animation_style

ops with increasing

config.timelineOffset

— not N calls. Motion is Figma-Design-only and keyframes attach to a top-level frame's layers, so build the frame first. → references/motion.md
.

当源内容包含动画时——CSS

@keyframes

transition

、Framer Motion、GSAP、Vue/Svelte过渡效果——将其作为Figma Motion（测试版）添加到你构建的框架中，而非忽略：使用
apply_animation_style
（从
get_motion_styles
获取预设）或针对每个属性使用
apply_manual_keyframe_track
，通过
set_timeline_duration
设置时长。交错排列的行需通过一次原子性
batch
操作执行

apply_animation_style

，并设置递增的

config.timelineOffset

——而非调用N次。动效仅适用于Figma设计，且关键帧附加到顶级框架的图层上，因此需先构建框架。→ references/motion.md
。

Verify visually (close the loop)

视觉验证（闭环检查）

get_screenshot

the built node, fix discrepancies, and re-screenshot — the same render-and-diff discipline codegen uses, in reverse. Check it against the source intent and against objective design health (this catches problems even when you built from a vague description with no source to compare): nothing clipped or overflowing, edges aligned, spacing consistent (one scale), a clear type hierarchy. An

empty: true

export means the node rendered nothing (hidden / off-canvas).

对构建的节点执行

get_screenshot

，修正差异后重新截图——这与代码生成工具使用的渲染对比流程一致，只是方向相反。将结果与源内容的意图以及客观的设计健康标准进行检查（即使你基于模糊描述构建且无参考源，这也能发现问题）：无内容被裁剪或溢出，边缘对齐，间距一致（统一比例），层级清晰的排版。

empty: true

的导出结果表示节点未渲染任何内容（隐藏/在画布外）。

Rules

规则

Understand the environment, then build. Read both the file's design system and the source's stack / styling system before creating anything — there's no single right stack, only theirs. Ground every value (design system → the code's own values → a sensible scale); never invent.
Reuse beats regenerate. Instance existing components; bind existing variables/styles. Build new only what the system lacks, and name/structure it to fit.
Reference tokens, not literals. Colour via
```
bind_variable_to_paint
```
, scalars via
```
bind_variable_to_node
```
, shared looks via
```
apply_style_to_node
```
— never hardcode hex/px when a token exists (
```
get_variable_defs
```
tells you what does).
Auto-layout for related children, absolute coordinates only for top-level placement.
Build incrementally and validate (screenshot) — recognise the UI pattern and assemble it from the matching components, don't reproduce it from primitives.
Match the file's conventions — naming, structure, and the design system's own patterns, the way codegen mirrors the project's existing code style.

先理解环境，再进行构建。在创建任何内容前，务必读取文件的设计系统以及源内容的技术栈/样式系统——不存在单一的正确技术栈，只存在用户的技术栈。确定每个值的来源（设计系统→代码自身的值→合理比例）；绝不凭空生成。
复用优于重生成。实例化现有组件；绑定现有变量/样式。仅构建系统缺失的内容，并使其命名/结构与现有系统适配。
引用令牌，而非字面量。通过
```
bind_variable_to_paint
```
绑定颜色，通过
```
bind_variable_to_node
```
绑定标量，通过
```
apply_style_to_node
```
应用共享样式——当存在令牌时，绝不要硬编码hex/px值（
```
get_variable_defs
```
会告诉你可用的令牌）。
关联子元素使用自动布局，仅顶级元素使用绝对坐标。
逐步构建并验证（截图）——识别UI模式并从匹配的组件组装，不要从基础元素重新绘制。
匹配文件的约定——命名、结构以及设计系统自身的模式，就像代码生成工具会匹配项目现有代码风格一样。