Figma ios image assets download
Skill mythkiven/figma-ios-codegen/.cursor/skills/figma-ios-image-assets-download
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-image-assets-downloadAssembled 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
Reference iOS image assets that figma-ios-preload-data pre-downloaded into the data package. Covers two cases: (1) local imagesets (copy + UIImage(named:)), and (2) server-side images (avatars / covers / category icons / any RECTANGLE filled with IMAGE that has no local imageset) — these MUST use the data package's mock.default_image_url via sd_setImage, never fabricated asset names. Use when wiring any UIImage reference or generating mock data for image fields.
SKILL.md
6.2 KB, as published. Nobody here has run it
Figma 图片资源引用规范(消费数据包)
切图下载已由 figma-ios-preload-data 阶段 1 完成,阶段 2 只负责"拷贝 + 引用"。
数据来源
| 文件 | 用途 |
|---|---|
{data_dir}/assets/ios/manifest.json | node_id → asset_name 映射 + 文件路径 |
{data_dir}/assets/ios/img_xxxxx_*.imageset/ | iOS 标准 imageset(Contents.json + @2x.png + @3x.png) |
manifest.json 结构
{
"schema_version": "1.0.0",
"platform": "ios",
"scale": 3,
"download_failed_count": 0,
"items": {
"29:107": {
"node_id": "29:107",
"name": "去除图片文字 (9)",
"asset_name": "img_231f7_background",
"asset_id": "29-107",
"imageset_path": "img_231f7_background.imageset",
"files": [
{"scale": 2.0, "path": "img_231f7_background.imageset/[email protected]"},
{"scale": 3.0, "path": "img_231f7_background.imageset/[email protected]"}
]
}
}
}
imageset_path相对assets/ios/;files[].path也相对该平台目录。若download_failed: true出现在某 item 上,禁止UIImage(named:),改走下方 mock URL,并在 README 记警告。
集成步骤
Step 1:拷贝 imageset 到主工程
# 目标位置:主工程的 Assets.xcassets/<目标分组>/
cp -R {data_dir}/assets/ios/*.imageset <project>/Assets.xcassets/<group>/
Step 2:代码中引用
// Figma node: 29:107
imageView.image = UIImage(named: "img_231f7_background")
UIImage(named:)的字符串 =manifest.items[node_id].asset_name,禁止臆造。
Step 3:在生成的 README 中列出资源清单
## 图片资源
需要将以下 imageset 拷贝到主工程 Assets.xcassets:
- img_231f7_background.imageset ← Figma 节点 29:107 (去除图片文字 9)
- img_0642b_game_pubg.imageset ← Figma 节点 29:108 (PUBG)
- ...
服务器下发图片场景(统一用默认 mock URL)
触发条件
节点表现为图片,但本地没有切图可用——任一即触发:
fills含IMAGE类型,但节点没有export.settings(设计师未点 export)→figma-ios-preload-data不下载本地副本- 节点是
RECTANGLE/ELLIPSE等被填充 image 的占位形状(头像、封面图、品类卡片背景图等业务图) - 任何被识别为"图片表现但无 imageset 文件"的节点
业务上这一类几乎都是后端接口下发的真实图——发版时由业务接口注入,开发期需要 mock 演示。
✅ 统一规则:用数据包中的 mock.default_image_url
读 {data_dir}/manifest.json 的 mock.default_image_url(配置源是 config.json 的 default_mock_image_url,写入包时落在 mock 下):
// manifest.json
{
"mock": {
"default_image_url": "https://picsum.photos/200"
}
}
这是一个真实可访问的 mock 图(不是 Figma 临时 URL,不会过期),跑起来就能看到图。配置在
figma-ios-preload-data/config.json的default_mock_image_url(见config.example.json),需要换图床就改那里,不要在 Swift 代码里写死。
推荐 Swift 写法
// MARK: - 服务器下发图片(Figma 节点 ID: 29:107)
// TODO(阶段3): 接入业务接口后替换为后端返回的真实图片 URL
private static let kMockImageURL = "https://picsum.photos/200"
// 使用:
imageView.sd_setImage(
with: URL(string: Self.kMockImageURL),
placeholderImage: nil
)
mock URL 统一用数据包 manifest.json.mock.default_image_url,不要编造宿主常量名。
⚠️ 严禁直接写 Figma S3 URL
Figma 渲染产生的临时 URL(figma-alpha-api.s3.*)24 小时即失效,写到生产代码就是定时炸弹。任何场景下都不要把 Figma S3 URL 写进 Swift 文件。
⚠️ 同样禁止:example.com / placeholder.com / 仿造的假 URL
旧版 skill 曾建议写 https://example.com/REPLACE_WITH_BUSINESS_API.png 之类的占位字符串。已禁用——这种 URL 跑起来只能看到失败占位,达不到 mock 演示效果。一律用 manifest.mock.default_image_url。
调试期想看设计稿真图
figma-ios-preload-data 在阶段 1 已经把节点导出为 .imageset 放到 {data_dir}/assets/ios/,直接用 UIImage(named: <asset_name>) 即可,不需要也禁止在阶段 2 再手动调 Figma images 接口或下载图片。
如需排查"为什么这张图没生成切图",按下列顺序定位:
- 看
{data_dir}/assets/ios/manifest.json里有没有该node_id的asset_name条目 - 没有则看
{data_dir}/manifest.json.warnings有没有相关导出失败警告 - 仍无解 → 回到
figma-ios-preload-data/仓库提单(导出策略归数据包阶段管),不要在阶段 2 自行兜底
任何
figma-alpha-api.s3.*临时 URL 都禁止出现在最终代码里。
命名规范(参考,由 figma-ios-preload-data 生成)
img_<5位哈希>_<语义>:
- 哈希:保证唯一
- 语义:英文 / 拼音,可追溯到 Figma 原节点名
例:img_231f7_background、img_0642b_game_pubg、img_a11a6_game_lol
自检清单
- 已读
assets/ios/manifest.json - 所有
UIImage(named:)字符串来源于manifest.items[].asset_name - 生成 README 已列出 imageset 拷贝清单
- 服务器下发图片统一用
{data_dir}/manifest.json→mock.default_image_url,配sd_setImage+ TODO 注释 - 无
example.com/placeholder.com/ 任何手编占位 URL - 无
figma-alpha-api.s3.*临时 URL - 没有任何对
download_figma_images.py/get_figma_image_url.py的调用