figma-swiftui

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Figma ↔ SwiftUI

Translation between Figma designs and SwiftUI code, both directions. This file is a router — actual guidance lives in the references below.

Figma设计与SwiftUI代码之间的双向转换。本文件为路由文件——具体指引请参考下方的参考文档。

Pick the direction

选择转换方向

Direction	Trigger	Reference
Design → code	User wants SwiftUI in their iOS project from a Figma file/frame	references/design-to-code.md
Code → design	User wants to push SwiftUI views / screens / tokens into a Figma file	references/code-to-design.md

If the request is ambiguous — a Figma URL and

.swift

files both present, no verb makes it clear — ask the user which direction before loading a reference.

转换方向	触发条件	参考文档
设计 → 代码	用户希望从Figma文件/框架为其iOS项目生成SwiftUI代码	references/design-to-code.md
代码 → 设计	用户希望将SwiftUI视图/屏幕/设计令牌推送至Figma文件	references/code-to-design.md

如果请求不明确——同时提供了Figma URL和.swift文件，但未明确转换方向——请先询问用户转换方向，再加载对应参考文档。

Shared context (applies to both directions)

通用上下文（适用于双向转换）

These points hold regardless of direction; the direction-specific references assume them.

get_design_context
is the read tool for Figma. Pass

clientLanguages: "swift"

and

clientFrameworks: "swiftui"

so the response is framed as Swift. URL → tool args:

figma.com/design/:fileKey/:fileName?node-id=:nodeId

→ use

fileKey

, replace

with

nodeId

. For

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

, use

branchKey

fileKey

The React+Tailwind in
get_design_context
output is a structural reference, not a literal source. It approximates the visual. Never transliterate
```
position: absolute
```
/ pixel frames /
```
mix-blend-mode
```
stacks into SwiftUI or into Figma — the screenshot is the source of truth in both directions.
iOS HIG semantic colors are tokens, not hex.
```
var(--backgrounds/primary, …)
```
,
```
var(--labels/secondary, …)
```
,
```
var(--separators/non-opaque, …)
```
etc. map to
```
Color(.systemBackground)
```
,
```
Color.secondary
```
,
```
Color(.separator)
```
in SwiftUI, and to variables in a semantic collection in Figma. Keep the mapping; drop the literal RGBA.
SF Symbols round-trip by name in both directions — never by codepoint. Design → code:
```
get_design_context
```
substitutes Figma's SF Symbol glyph runs back into
```
<SFSymbol>{Image(systemName: "...")}</SFSymbol>
```
wrappers in the response. Use those names verbatim. Code → design: call
```
figma.util.getSfSymbolCharacter(name)
```
inside
```
use_figma
```
to convert a symbol name to the matching character — never look up codepoints by hand.
Recognize the underlying iOS pattern, not the literal node / view name. The same patterns recur in both directions: large title + back chevron + trailing action =
```
NavigationStack
```
chrome; bottom row of icon+label pairs =
```
TabView
```
; repeating same-height rows with leading/trailing chrome =
```
List
```
. Match those system patterns rather than rebuilding them from primitives.
For code → design,
use_figma
is the API. Always load
```
figma-use
```
before any
```
use_figma
```
call. If the task involves building a full screen, also load
```
figma-generate-design
```
; if it involves building components or a design system, also load
```
figma-generate-library
```
.

以下要点适用于所有转换方向；各方向的参考文档均基于这些要点。

get_design_context
是Figma的读取工具。传入

clientLanguages: "swift"

和

clientFrameworks: "swiftui"

，确保响应内容以Swift为框架。URL转换为工具参数：

figma.com/design/:fileKey/:fileName?node-id=:nodeId

→ 使用

fileKey

，将

nodeId

中的

替换为

。对于

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

，将

branchKey

作为

fileKey

使用。

get_design_context
输出中的React+Tailwind是结构参考，而非字面源码。它仅用于近似视觉效果。切勿将
```
position: absolute
```
/像素框架/
```
mix-blend-mode
```
堆栈直接转换为SwiftUI代码或Figma设计——截图在双向转换中均为唯一可信源。
iOS HIG语义颜色是设计令牌，而非十六进制值。
```
var(--backgrounds/primary, …)
```
、
```
var(--labels/secondary, …)
```
、
```
var(--separators/non-opaque, …)
```
等映射到SwiftUI中的
```
Color(.systemBackground)
```
、
```
Color.secondary
```
、
```
Color(.separator)
```
，以及Figma中语义集合的变量。保留映射关系，丢弃字面RGBA值。
SF Symbols在双向转换中均按名称往返——切勿使用代码点。设计→代码：
```
get_design_context
```
会将Figma中的SF Symbol字形替换为响应中的
```
<SFSymbol>{Image(systemName: "...")}</SFSymbol>
```
包装器。请直接使用这些名称。代码→设计：在
```
use_figma
```
中调用
```
figma.util.getSfSymbolCharacter(name)
```
将符号名称转换为对应字符——切勿手动查找代码点。
识别底层iOS模式，而非字面节点/视图名称。双向转换中会重复出现相同模式：大标题+返回箭头+尾部操作 =
```
NavigationStack
```
导航栏；底部图标+标签行 =
```
TabView
```
；高度一致、带有前后导航栏的重复行 =
```
List
```
。优先匹配这些系统模式，而非从基础组件重新构建。
对于代码→设计，
use_figma
是核心API。在调用任何
```
use_figma
```
之前，请先加载
```
figma-use
```
。如果任务涉及构建完整屏幕，还需加载
```
figma-generate-design
```
；如果涉及构建组件或设计系统，还需加载
```
figma-generate-library
```
。

References

参考文档

Doc	When to load
references/design-to-code.md	Translating a Figma design / frame into SwiftUI
references/code-to-design.md	Pushing SwiftUI views / screens / tokens into Figma

文档	加载时机
references/design-to-code.md	将Figma设计/框架转换为SwiftUI代码时
references/code-to-design.md	将SwiftUI视图/屏幕/设计令牌推送至Figma时