Pixso中为iOS开发提供Swift工程适配标注需四步

在Pixso中完成设计后，如果需要为iOS开发团队提供适配Swift工程的标注信息，可能会遇到几个典型问题：标注单位不匹配、切图命名不规范，或者尺寸没有按@2x/@3x的倍率导出。别担心，按照下面这套流程操作，就能生成开发团队“开箱即用”的标注和资源。

一、设置画布与导出参数为iOS适配模式

第一步，也是至关重要的一步，是从源头做好配置。Pixso默认使用像素（px）单位，但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十进制数组，这才是Swift工程的标准写法。

三、手动导出切图并按iOS命名规范重命名

图标和图片资源处理不好，很容易在开发阶段卡壳。iOS工程通常使用Assets.xcassets来管理图像资源，它对文件名有严格要求，如果命名不规范，UIImage(named:)方法很可能返回nil，导致图片加载失败。

正确的导出姿势是这样的：

1. 在图层列表中，右键选中目标图层组，选择【导出选中图层】。

2. 在弹出的窗口中，将导出路径指向你项目里Assets.xcassets内对应Image Set的子目录（例如 Images/Buttons/）。

3. 对于同一个图标，需要分别导出两份：一份命名为icon_name@2x.png，另一份命名为icon_name@3x.png。注意，文件名中的“icon_name”需要替换成你实际约定的名称。

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类型，从而消除可能产生的编译警告。

《夸克》非常好用的免费AI浏览器

下载APP查看