pixso中为ios开发提供swift工程适配标注需四步:一、画布单位设为pt并配置@2x/@3x导出;二、用ios标注插件生成uicolor/uifont等swift代码;三、按命名规范导出切图并拖入assets.xcassets;四、用design token exporter导出json供swiftgen生成类型安全代码。

如果您在Pixso中完成设计后需要为iOS开发团队提供适配Swift工程的标注信息,则可能面临标注单位不匹配、切图命名不规范或尺寸未按@2x/@3x导出等问题。以下是解决此问题的步骤:
一、设置画布与导出参数为iOS适配模式
Pixso默认使用像素单位,但iOS开发需明确区分逻辑像素(pt)与物理像素(px),且资源需按@2x和@3x倍率分别导出。正确配置可避免开发人员手动换算。
1、点击顶部菜单栏【文件】→【文档设置】→【画布设置】。
2、将“单位”设为pt(点),并勾选“启用iOS/Android设备预设”。
3、在右侧属性面板中,选中画布根节点,于“导出设置”区域点击“+”号添加导出规格。
4、分别添加两项:名称填“@2x”,缩放设为200%;名称填“@3x”,缩放设为300%。
5、确保两项的格式均为PNG,勾选“保留透明度”和“导出时自动裁剪空白”。
二、使用标注插件生成Swift兼容的样式代码片段
Pixso内置的“iOS标注”插件可直接输出符合Swift语法的常量定义,包括颜色值(UIColor)、字体(UIFont)、间距(CGFloat)等,无需人工转换。
1、在画布空白处右键 → 选择【插件】→【iOS标注】→【启动】。
2、用鼠标框选需标注的组件(如按钮、标签、卡片),插件将自动识别其背景色、文字色、字体大小、行高、圆角、边框等属性。
3、点击插件面板右上角的“Swift”切换按钮,确保当前输出语言为Swift。
4、点击【复制代码】,粘贴至Xcode中即可直接使用,例如:
static let primaryButtonBackgroundColor = UIColor(red: 0.0, green: 0.478, blue: 1.0, alpha: 1.0)
5、检查生成代码中所有颜色值是否为UIColor初始化形式,而非十六进制字符串或RGB十进制数组。
三、手动导出切图并按iOS命名规范重命名
iOS工程依赖Assets.xcassets管理图像资源,要求切图文件名严格匹配Asset Catalog中的指定名称及后缀规则,否则UIImage(named:)将返回nil。
1、在图层列表中右键目标图层组 → 选择【导出选中图层】。
2、在弹出窗口中,将导出路径设为项目Assets.xcassets内对应Image Set的子目录(如Images/Buttons/)。
3、对同一图标,分别导出两份:一份命名为icon_name@2x.png,另一份为icon_name@3x.png。
4、确认两个文件的宽度/高度像素值满足整除关系(如@2x为60×60,则@3x必须为90×90)。
5、将两文件拖入Xcode的Assets.xcassets对应Image Set中,Xcode会自动识别并归类至2x/3x槽位。
四、导出JSON标注数据供Swift解析工具链消费
部分团队采用自动化脚本将设计标注转为Swift枚举或结构体,此时需Pixso输出结构化JSON,而非可视化标注界面。
1、安装社区插件【Pixso Design Token Exporter】(需从Pixso插件市场搜索并启用)。
2、在插件面板中点击【扫描文档】,插件将提取全部文本样式、颜色变量、间距变量及组件尺寸。
3、点击【导出为JSON】,保存为design_tokens.json文件。
4、将该JSON文件放入Swift工程构建流程中,由自定义build script调用SwiftGen或类似工具生成Colors.swift、Typography.swift、Spacing.swift等文件。
5、验证生成文件中所有数值类型是否为CGFloat或String,避免出现Int或Double导致编译警告。











