4步掌握Paddy：让Sketch布局效率提升10倍的自动化工具

在UI设计过程中，设计师常面临图层间距调整繁琐、内边距计算耗时、多元素对齐困难等问题，这些重复性工作严重影响设计效率。Paddy作为Sketch的自动化布局插件，通过创新的命名规则系统，实现内边距、间距和对齐的智能管理，让设计师从机械操作中解放，专注创意表达。

核心价值解析：重新定义Sketch布局工作流

Paddy插件的核心价值在于将传统需要手动调整的布局参数转化为可解析的文本指令，通过图层命名即配置的创新方式，实现"一次定义，自动应用"的高效工作模式。这种设计不仅减少了80%的布局调整时间，还确保了设计系统的一致性和可维护性。

功能解析：四大场景化布局解决方案

智能内边距设置：告别像素级手动调整 📐

场景问题：设计按钮、卡片等组件时，需要反复调整内容与边框的距离，修改文本后又需重新计算内边距。

解决方案：在背景图层名称中添加[数值]格式标记，Paddy会自动计算并应用内边距。核心实现逻辑位于Paddy.sketchplugin/Contents/Sketch/padding.js文件，通过解析图层名称中的数值表达式生成布局约束。

使用示例：

• Card BG [16] - 四侧统一16px内边距
• Button BG [12 24] - 上下12px、左右24px内边距
• Input BG [8 16 12 16] - 上8px、右16px、下12px、左16px内边距

批量间距管理：实现元素均匀分布 🚥

场景问题：创建导航栏、标签组等多元素组件时，手动调整每个元素间距不仅耗时，还难以保证一致性。

解决方案：使用[数值v]或[数值h]格式标记实现垂直或水平方向的均匀间距。间距算法在Paddy.sketchplugin/Contents/Sketch/spacing.js中实现，通过计算元素边界框自动分配空间。

使用示例：

• Button Group [10h] - 水平方向元素间距10px
• Option List [8v] - 垂直方向元素间距8px

智能对齐系统：多元素精确定位 🧭

场景问题：复杂布局中需要将多个元素按特定规则对齐，传统方式需要反复调整参考线和坐标。

解决方案：在间距标记后添加对齐指令，支持left(l)、center(c)、right(r)、top(t)、middle(m)等对齐方式。对齐逻辑与间距功能协同工作，实现在保持间距的同时完成精确定位。

使用示例：

• Icon Group [8h c] - 水平间距8px且整体居中对齐
• Control Panel [12v r] - 垂直间距12px且右对齐排列

符号组件适配：响应式设计系统构建 🔄

场景问题：Sketch符号在内容变化时无法自动调整尺寸，需要手动修改约束或重新制作组件。

解决方案：将Paddy规则应用于符号组件，实现内容驱动的自适应尺寸。符号处理逻辑位于Paddy.sketchplugin/Contents/Sketch/symbols.js，支持符号实例在内容变化时自动调整边界。

使用示例：

• 创建带[16]内边距的按钮符号
• 修改符号文本内容时，按钮会自动调整宽度以适应文本

实践指南：从零开始使用Paddy

基础安装步骤

1. 克隆仓库：git clone https://gitcode.com/gh_mirrors/pa/paddy-sketch-plugin
2. 打开Sketch，导航至Plugins > Manage Plugins...
3. 点击Add Plugin，选择克隆目录中的Paddy.sketchplugin文件
4. 重启Sketch完成安装

快速入门三要素

1. 背景图层识别：Paddy仅对包含特定标记的图层生效，通常选择形状图层作为背景容器
2. 标记语法规则：所有布局指令需包含在方括号[]内，多个参数用空格分隔
3. 自动更新机制：修改图层名称或内容后，按esc键或取消选择图层即可触发布局更新

总结提升：进阶技巧与适用场景

高级使用技巧

1. 图层忽略机制：在图层名称前添加-符号（如-辅助线），可使其不参与布局计算，适合装饰性元素
2. 尺寸约束表达式：使用[内边距; 约束条件]格式添加尺寸限制，如[16; width <= 300]确保容器最大宽度不超过300px
3. 组合功能应用：将多种功能组合使用，如[10v m]实现垂直间距10px且垂直居中对齐

适用场景类型

• 组件库构建：适合UI设计师创建一致的按钮、卡片、表单等基础组件
• 响应式设计：配合Sketch的响应式调整，实现多尺寸屏幕的布局适配
• 设计系统维护：确保团队成员使用统一的间距和内边距规范，减少设计差异
• 快速原型迭代：在概念设计阶段快速调整布局，验证设计方案可行性

通过Paddy插件，设计师可以将布局调整时间从占整个设计流程的30%降低至5%以下，同时获得更精确、一致的设计结果。无论是独立设计师还是大型设计团队，都能从中获得显著的效率提升和质量改进。