figma-integration

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Chinese

Bridge design (Figma) and code (this repo) in both directions. The token JSON stays the source of truth; Figma Variables mirror it.

双向连接设计（Figma）和代码（本仓库）。token JSON 是唯一事实来源；Figma Variables 对其镜像。

Read
```
workflows/figma-integration.md
```
(token↔Variable mapping, sync directions, MCP usage, parity).
Map the 3-tier hierarchy → three Figma collections (Primitives → Semantic → Component) with aliasing; dark/brand/density → Figma Modes (
```
tokens/theming.json
```
).
Choose ONE authoritative sync direction (code→Figma publish, or Figma→code extract via Tokens Studio / Variables REST API). The other side is generated — never hand-edit both.
If a Figma MCP server is connected: prefer its tools/skills (load its mandatory prerequisite skill first). Use it to read frames/variables/screenshots into code, build Variables/components from our tokens, or wire Code Connect to
```
components/*
```
.
Check component parity: Figma variants/properties must cover our variants + sizes + the 8 states; flag gaps.

阅读
```
workflows/figma-integration.md
```
（token↔Variable 映射、同步方向、MCP 用法、组件一致性）。
将三层层级映射到三个 Figma collections（Primitives → Semantic → Component），使用别名；dark/brand/density 映射到 Figma Modes（
```
tokens/theming.json
```
）。
选择一个权威同步方向（code→Figma 发布，或通过 Tokens Studio / Variables REST API 从 Figma→code 提取）。另一端是生成出来的——绝不要手动编辑两边。
如果连接了 Figma MCP server： 优先使用其工具/skills（先加载其必需的前置 skill）。用它把 frames/variables/screenshots 读取到代码中，根据我们的 tokens 构建 Variables/components，或将 Code Connect 连接到
```
components/*
```
。
检查组件一致性：Figma variants/properties 必须覆盖我们的 variants + sizes + 8 种状态；标记缺口。

Every Figma Variable resolves to a token in
```
tokens/*.json
```
(no orphan hex in designs).
One authoritative direction; the generated side has zero hand edits.
Variant sets cover all 8 states; Code Connect points to the right
```
components/*
```
file.
After any token import:
```
python3 scripts/validate_tokens.py
```
passes.