Figma ios design token mapping
Skill mythkiven/figma-ios-codegen/.cursor/skills/figma-ios-design-token-mapping
Figma to iOS UIKit codegen: deterministic data package + Agent skills (Cursor/Claude) for baseline Swift UI.
npx -y skills add mythkiven/figma-ios-codegen --skill figma-ios-design-token-mappingAssembled 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
Map Figma colors and fonts from the data package into Swift via configurable JSON maps under .cursor/bindings/. Hit → emit mapped code snippet; miss → UIKit fallback. Use when generating color or font code from design.json.
SKILL.md
4.3 KB, as published. Nobody here has run it
颜色 / 字体:映射表优先,未命中走标准 UIKit
权威配置:
.cursor/bindings/color_map.json、.cursor/bindings/font_map.json
示例包(MK):.cursor/bindings/examples/mk/
说明:.cursor/bindings/README.md
本 skill 不写死任何设计系统类名;宿主 token 只活在映射 JSON 的 value 里。
核心规则(强制)
Figma 颜色/字体
→ 查 bindings 对应 map
→ 命中:原样输出 map 里的代码片段
→ 未命中:用同文件 fallback 模板(标准 UIKit)
禁止:
- ❌ 无视映射表手写未在 map 中的宿主 API / 臆造 token
- ❌ 映射未命中时编造不存在的设计系统 API
- ❌ 把映射 value 再「翻译」一遍(value 已是最终代码)
1. 颜色
数据来源
design.json[node_id].fills[].color(已是 rgba(r,g,b,a) 字符串)。
TEXT 文字色也在 fills[].color(text 字段只是文案字符串,没有 text.color)。
评论色变更:comments.json 中 confidence>=medium 且含 color / color_correction 的评论优先于节点 fills(阶段 1 不把颜色写进 design.json,与 iconfont 回写不同)。
查表步骤
- 读
.cursor/bindings/color_map.json - 用节点颜色按以下 key 依次尝试(命中即停):
- 数据包原文,如
rgba(255,255,255,0.9) - 规范化:
rgba(r,g,b,1)/rgba(r,g,b,0.9)(alpha=1 不写.0) - hex:
#FFFFFF或带 alpha#FFFFFFE6 - 旧式元组:
255,255,255,0.9
- 数据包原文,如
- 命中 → 输出
map[key](本仓示例如MKUIStyle.mk_c12()) - 未命中 → 用
fallback,替换占位符:
| 占位符 | 含义 |
|---|---|
{r} {g} {b} | 0–255 整数 |
{a} | 0–1 透明度 |
默认 fallback:
UIColor(red: {r}/255.0, green: {g}/255.0, blue: {b}/255.0, alpha: {a})
映射文件形状
{
"schema_version": "1.0.0",
"fallback": "UIColor(red: {r}/255.0, green: {g}/255.0, blue: {b}/255.0, alpha: {a})",
"map": {
"#FFFFFF": "MKUIStyle.mk_c12()",
"rgba(255,255,255,0.9)": "MKUIStyle.mk_c12_90()"
}
}
map 为空 = 全部走 UIKit(适合个人开发者)。
接入宿主色板:把「色值 → 一段 Swift 代码」写入 map,或从 examples/mk/ 复制后按需改。详见 bindings/README。
2. 字体
数据来源
design.json[node_id].font(含 family / style 或 weight / size)与 text。
查表步骤
- 读
.cursor/bindings/font_map.json - 构造 key(与
examples/mk的 font_map 一致):{family},{Weight},{size}
例:PingFang SC,Medium,14
亦尝试:{family}|{Weight}|{size} - 命中 → 输出
map[key](本仓示例如MKUIStyle.mk_f14_m()) - 未命中 → 用
fallback:
| 占位符 | 含义 |
|---|---|
{font_name} | PostScript 名(如 PingFangSC-Medium),无则用 family |
{size} | 字号 |
{family} {weight} | 原始字段 |
默认 fallback:
UIFont(name: "{font_name}", size: {size}) ?? UIFont.systemFont(ofSize: {size})
映射文件形状
{
"schema_version": "1.0.0",
"fallback": "UIFont(name: \"{font_name}\", size: {size}) ?? UIFont.systemFont(ofSize: {size})",
"map": {
"PingFang SC,Medium,14": "MKUIStyle.mk_f14_m()"
}
}
3. 自定义
| 场景 | 做法 |
|---|---|
| 个人 / 无设计系统 | 保持 map: {},只用 fallback |
| 使用示例包 | cp .cursor/bindings/examples/mk/*.json .cursor/bindings/ 后按需改 |
| 自建设计系统 | 按「一个色值/字体 → 一段代码」填自己的 map |
旧路径 skills/figma-ios-design-token-mapping/legacy_*.json 仅作历史备份;阶段 2 只认 .cursor/bindings/。
自检
- 颜色/字体都先查了 bindings map
- 命中项与 map value 逐字一致(未再包装)
- 未命中走 fallback,未编造宿主 API
- 未在 skill 或代码里写死另一套色表