Figma iOS 资源导出
将以下提示词粘贴到你的 AI 对话框中:
请根据 https://skillhub.cn/install/skillhub.md,安装 @user_104630ff/figma-ios-asset-export。
技能介绍
问题
iOS 还原 Figma 设计时,容易把自定义图标、空状态、徽章、渐变、模糊背景直接写成 SwiftUI、UIKit 或 CALayer 近似实现。结果像素、圆角、阴影、渐变细节和原稿不一致,排查成本也很高。
工作方式
该技能把 Figma 链接当作自定义图像的真源。它会先解析 URL 中的 file key 和 node id,再按节点建立 JSON 映射;默认导出 PNG @2x 与 PNG @3x,仅在明确要求矢量时使用 PDF。当项目存在 .xcassets 时,可写入 .imageset 并更新 Contents.json,随后在代码里引用生成的资源名。简单文本、分隔线、标准控件、纯色和布局结构仍建议用原生实现。
边界
该技能依赖可读 Figma 文件的 token 和 Node.js fetch。如果缺少 token、node id、权限或 API 失败,需要报告阻塞,而不是静默替换 SF Symbols。它处理的是可重复资源导出,不负责完整视觉验收,也不替代 Xcode 构建验证。
使用场景
- 接到 Figma 首页视觉稿,要把自定义图标、空状态和背景图导出成 iOS 可引用的图片资源。
- 重构旧页面时,需要从 Figma 节点批量生成 @2x 和 @3x PNG,并写入 .xcassets。
- 实现个人资料页时,要区分哪些图标用原生绘制、哪些复杂渐变必须从 Figma 导出。
- 拿到设计链接后,要建立 node id 到资源名的映射,方便后续重复导出和代码引用。
适合人员
- 负责 iOS 界面还原的工程师,需要把 Figma 自定义图像稳定导出为 Xcode 资源。
- 同时维护多个 App 屏幕的前端工程师,需要按 node 映射重复导出图标和空状态。
- 接手遗留 iOS 项目的开发者,需要判断视觉节点应导出还是用 SwiftUI/UIKit 原生实现。
- 与设计协作的 iOS 工程师,需要在资源命名、@2x/@3x 和 .imageset 元数据上保持一致。