Figma ios standard components

Skill mythkiven/figma-ios-codegen/.cursor/skills/figma-ios-standard-components

Figma to iOS UIKit codegen: deterministic data package + Agent skills (Cursor/Claude) for baseline Swift UI.

Install

npx -y skills add mythkiven/figma-ios-codegen --skill figma-ios-standard-components

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

25 days oldThe repository was created 25 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
8 stars8 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

从 figma-ios-preload-data 数据包（design.json）识别标准 UI 组件类型（Selector、Stepper、Toggle、Tag Group 等），提取布局模式和通用特征，指导后续状态提取和代码生成。 Use when identifying component type from Figma, or when user mentions Selector、Stepper、Toggle、标准组件、通用组件、组件类型识别。

SKILL.md

5.0 KB, as published. Nobody here has run it

Figma 标准组件类型识别

职责边界

✅ 识别组件是什么类型（Selector / Stepper / Toggle / Tag Group）
✅ 提取布局模式（水平/垂直/Flow）和结构特征（三段式、并列节点等）
❌ 不提取各状态的视觉特征 → 见 figma-ios-component-state-recognition
❌ 不生成 updateAppearance() 代码 → 同上
❌ 不处理业务逻辑

⚡ QUICK_REF

数据来源：design.json[node]（VECTOR/INSTANCE/SYMBOL 已展开，fills/strokes/corner_radius/opacity 已规范化）

多个并列节点 + 样式不同 + 等宽  → Selector
多个并列节点 + 样式不同 + 不等宽 → Tag Group
三段式：[减] [值] [加]          → Stepper
两种状态（开/关）               → Toggle

生成代码前的对比流程（VECTOR 子节点）

1. 从 design.json 取出所有子节点（已含 `fills` / `strokes` / `corner_radius` / `opacity` / `vector_geometry`）
2. 对比同类节点的 `fills[].color`（`rgba` 已含 alpha）、`strokes[].color`（**无** `strokes[].visible`：不可见 stroke 阶段 1 已丢弃）、`corner_radius`
3. 验证对称性（Stepper 的减号/加号 fills 应一致）
4. 再生成代码

阶段 2 不再调 Figma REST API；所有字段都在数据包里。旧名 vector_paths / fills[].opacity / strokes[].visible 不要再读。

组件类型识别

决策树

有多个并列同类节点？
  └─ 是 → 节点宽度是否相等？
          ├─ 是 → 样式有差异？ → Selector（单选 or 多选）
          └─ 否 → 是否可换行？ → Tag Group
有三个子节点，水平排列，左右对称？
  └─ 是 → Stepper
只有两种状态（开/关），有滑块？
  └─ 是 → Toggle / Switch

各类型特征

Selector（选择器）

Figma 特征：

多个并列节点，结构相同，样式不同（主题色 vs 灰色）
通常水平排列，节点等宽

分析步骤：

检测是否有多个并列节点 → 是
节点结构是否相同 → 是
节点样式是否有差异 → 是（颜色/边框/字体不同）
→ 识别为 Selector

变种：

单选 vs 多选：由业务逻辑控制，视觉识别方式一致
图标 + 文字 vs 纯文字：检测节点是否含 IMAGE / VECTOR 子节点
水平 vs 垂直：通过节点 y 坐标关系判断

Stepper（步进器）

Figma 特征：

三段式水平布局：[减少] [值显示] [增加]
左右两侧按钮结构对称（图标或文字）
中间是数字或文字显示区域

分析步骤：

是否有三个子节点 → 是
是否水平排列 → 是
左右两侧是否对称（尺寸/结构相似）→ 是
中间是否包含文本 → 是
→ 识别为 Stepper

变种：

按钮样式：纯色背景 / 图片背景 / 无背景
图标类型：+/-、</>、▲▼、iconfont 自定义
中间内容：纯数字 / 数字+单位 / 图标+数字

关键原则：不要假设固定尺寸，从 design.json[node].frame.absolute 取实际值。

Tag Group（标签组）

Figma 特征：

多个不等宽小按钮
可能换行排列（Flow Layout）
通常可多选

分析步骤：

是否有多个按钮 → 是
按钮宽度是否不等 → 是
是否可能换行 → 是
→ 识别为 Tag Group，使用 UICollectionView + LeftAlignedFlowLayout

Toggle（开关）

Figma 特征：

只有两种状态：开/关
通常有圆形滑块或方形开关
有明显的"开"和"关"视觉区别

实现方式：

简单场景：UISwitch
自定义场景：自定义 UIControl + 动画

通用分析原则

❌ 错误（具体值）	✅ 正确（模式）
按钮宽度 68px	宽度 = 容器宽度 / 按钮数量 - 间距
背景色 `#FFF606` alpha 0.1	已选中背景 = 主题色 + 低透明度
字体 `mk_f13_m()`	已选中字体 = 字号 + Medium 字重

不硬编码具体实现——从 Figma 实际数据提取，保持布局比例和相对关系。

Figma ios standard components

2 things to look at

What its author says it does

SKILL.md

Figma 标准组件类型识别

职责边界

⚡ QUICK_REF

生成代码前的对比流程（VECTOR 子节点）

组件类型识别

决策树

各类型特征

Selector（选择器）

Stepper（步进器）

Tag Group（标签组）

Toggle（开关）

通用分析原则

相关

Keep looking