figma-ios-vector-vs-code

Figma 矢量图形处理策略

⛔ 红线规则（最高优先级，覆盖所有下文）

含「语义子节点」的容器节点，即使被 figma-ios-preload-data 标记为 is_export_asset=true，也禁止整组用切图替代，必须按子节点逐一生成代码。

判定：什么是「语义子节点」

只要节点的子树（含跨层）中任意一个节点满足以下任一条件，该节点就含语义子节点：

条件	说明	例
type == "TEXT"	含可读文本	"STEP.1"、"找人试音"、"绝地求生"
type == "INSTANCE"	含组件实例（按钮/标签/图标 …）	品类卡片、段位标签、性别 pill
_role.is_iconfont == true	含 iconfont	next/query/check 图标
_role.is_iconfont_library	含 iconfont 集合容器	iconfont_24
_role.is_list_container	含横向 / 纵向列表容器	可滚动、Tag 集合

设计师在 Figma 上勾导出（export）经常是出于"备份给开发"目的，不代表这个组应该当成一张静态图。把"步骤条整组""5 个品类整组"做成切图，会直接导致：① 文字写死、改不了；② 状态切换不可能（选中/未选中）；③ 国际化失败；④ 视觉看似 OK 实则功能完全缺失。这是历史上多次出现的高发陷阱，必须强制规避。

决策伪代码（先于"代码绘制 vs 下载图片"决策）

def can_use_export_asset(node):
    if not (node.get("export") or {}).get("is_export_asset"):
        return False
    # 判定是否含语义子节点
    for child in walk_subtree(node):
        if child["type"] in ("TEXT", "INSTANCE"):
            return False
        role = child.get("_role") or {}
        if role.get("is_iconfont") or role.get("is_iconfont_library"):
            return False
        if role.get("is_list_container"):
            return False
    return True   # 子树纯几何/矢量，整组切图安全

允许整组切图的典型场景（白名单）

• 纯位图节点（fills[].type == "IMAGE"）
• BOOLEAN_OPERATION 美术字 / Logo（无 TEXT 子节点）
• 纯矢量装饰（背景插画、底纹）
• 单个 imageset 的图标（无子节点）

红线违反后的处置

如果你已经写出 UIImageView(image: UIImage(named: "img_xxx")) 来代替一个含 TEXT/INSTANCE 的节点，回退该实现，改为：

1. 把这个 GROUP/FRAME 当作 UIView 容器；
2. 它的子节点逐一生成对应的 UILabel / UIButton / UIView / iconfont UILabel；
3. 不需要切图（因为切图是为了避免重写美术字之类的 BOOLEAN_OPERATION，与文字/图标无关）。

例外：节点确实是「设计师做的截屏占位图」（如设计稿里贴了一张"竞品截图"用作后续修改参考），且团队明确要先按图占位的 → 在代码顶部加 // TODO(阶段2): 拆解 <node_id> <name> 为子节点实现，并在 README 列出，不允许直接当阶段 2 交付。

---

本 Skill 的职责

规定在 Figma → iOS 代码生成时：

• 哪些矢量图形必须下载为图片 Assets
• 哪些矢量图形应该用代码绘制（UIView + CALayer + UIBezierPath）
• 如何判断和决策

---

决策流程图

Figma 矢量节点
    ↓
┌──────────────────────────────────────┐
│ 1. 是否为简单几何形状？               │
│   - 矩形、圆角矩形、圆形、椭圆       │
│   - 纯色填充或简单渐变               │
│   - 无复杂路径或布尔运算             │
└──────────────────────────────────────┘
    ↓ 是                    ↓ 否
 用代码绘制            继续判断
                            ↓
┌──────────────────────────────────────┐
│ 2. 是否为复杂矢量图形？               │
│   - 贝塞尔曲线路径（≥3个）           │
│   - 布尔运算（UNION/SUBTRACT/EXCLUDE）│
│   - 美术字体、Logo、特殊图标         │
└──────────────────────────────────────┘
    ↓ 是                    ↓ 否
 下载为图片             用代码绘制