告别手工对齐：Paddy插件让Sketch图层自动填充与排布（实战指南）

告别手工对齐：Paddy插件让Sketch图层自动填充与排布（实战指南）

【免费下载链接】paddy-sketch-pluginAutomated padding, spacing and alignment for your Sketch layers项目地址: https://gitcode.com/gh_mirrors/pa/paddy-sketch-plugin

Paddy是一款开源的Sketch自动布局插件，你只需给图层取个合适的名字，就能让背景填充、间距分布、对齐方式全部自动完成。本文用三个实战场景加一份速查清单，带你零基础跑通"改文字、布局自己跟上"的完整流程，特别适合正在搭建组件库、反复调整 UI 的设计师。

从一次深夜改稿说起

凌晨一点，你刚把按钮文字从"立即购买"改成"立即购买并查看详情"。接下来等待你的是：手动拉大背景框、重新计算上下左右留白、再挨个微调图标和文字的位置。改完一看，旁边还有一个同样要改的卡片，以及一份需要同步的列表——这一晚注定又要熬到三点。

这种"改一处、跟一串"的苦差事，几乎每个做 UI 的人都经历过。而本文的主角——Paddy，正是为了解决这类重复劳动而生的：它把布局规则写进图层名称里，你负责取名字，它负责执行，全程不需要手工拖拽。

它是什么：一句话就能说清

Paddy 是一个通过图层命名来驱动自动填充、间距与对齐的 Sketch 插件。它的核心思路非常朴素：

• 把"背景要留多少内边距"写进图层名，例如Background [20]；
• 把"组内元素之间隔多少"写进组名，例如[10v]；
• 把"元素怎么对齐"也写进组名，例如[10v center]。

它不会把图层改造成某种特殊组件，也不改变原始图层结构——只是在你编辑内容后，自动帮你调整位置和尺寸。适合正在做按钮、卡片、列表等重复组件的设计师，也适合想给团队沉淀一套可复用组件的组件库维护者。

三步跑通第一次使用

不用读说明书，跟着下面三步，五分钟内就能看到第一个自动布局效果。

第一步：安装插件

在终端克隆仓库并解压，双击Paddy.sketchplugin文件即可完成安装：

git clone https://gitcode.com/gh_mirrors/pa/paddy-sketch-plugin

安装后，插件会出现在 Sketch 的"插件"菜单里，其中包含"Enter padding""Imply padding""Spacing"等几个命令。

第二步：用命名声明填充规则

在画布上创建一个分组，往里面放一个文本图层和一个矩形背景，然后把背景矩形改名为：

Background [20]

这个命名表示：背景四周预留 20px 的填充。

第三步：取消选择，见证魔法

按一下键盘上的Esc键取消所有选择，背景矩形会立刻自动吸附到内容的四周。之后再修改文字内容，只要重新取消选择，背景就会再次跟随变化。

小提示：如果填充没有生效，先确认三点——背景层是不是组的直接子层、命名中的方括号是否完整、是否已取消选择。多数"不生效"都出在这三处。

实战场景拆解：三个常见需求的完整解法

场景一：做一个文字变了也能自动伸缩的按钮

做组件库时，最烦的就是按钮：文案短则背景过长，文案长则背景包不住。用 Paddy 解决它只需两步。

1. 把按钮的背景矩形命名成Background [12 20]（上下 12px、左右 20px）；
2. 把按钮打包成一个 Symbol 符号。

之后无论你把这个符号拖出来多少份、改成什么文案，背景都会自动贴合文字；因为符号内部只允许有一个带填充的背景层，所以替换图标、调整文案都不会互相干扰。

场景二：给聊天气泡加上一个"不参与布局"的箭头

做消息气泡时，箭头要固定在气泡某一侧，但它不应该参与背景的尺寸计算。Paddy 为此准备了一个特殊标记：在图层名前加一个-前缀，该图层就会被完全忽略。

把箭头图层命名为：

-arrow

再看背景层Background [20]的计算范围——它只会围绕正文内容撑开，箭头被自动排除在外。无论正文怎么变，气泡都能保持完整的形状，且箭头永不掉队。

配套的还有"忽略边缘"玩法：把填充值写成x表示该侧不填充。比如[60 x]表示上下各留 60px、左右不设填充，适合做横跨全宽的分隔条或通栏卡片。

场景三：一行命名让列表自动均分并居中

做导航栏或图标列表时，想让元素均匀分布还要逐一对齐？Paddy 的间距与对齐可以一次搞定。

把组的名字改成：

[10h]

10h表示"水平方向、间距 10px"，组内所有子层会自动等距排开；改为[10v]则是垂直方向。如果想在分布的同时统一对齐，把对齐关键字追加在后面即可：

[10h c]

这表示水平分布、间距 10px，同时所有元素水平居中。对齐关键字支持left / center / right / top / middle / bottom，并可使用单字母缩写l / c / r / t / m / b，甚至组合使用，例如[c m]同时居中又垂直居中。

进阶技巧速查卡

把下面这些内容存下来，随时翻阅。

快捷键一览

命名语法备忘

• 填充顺序遵循 CSS 规则：[20]、[10 20]、[10 15 20]、[5 10 15 20]，依次对应上、右、下、左；
• x表示忽略某一侧：[60 x]；
• -前缀表示忽略该图层：-badge；
• 分号后可追加尺寸约束，如[20; h>=250]表示四侧填充 20px 且最小高度 250px，支持w/h与>=、<=、>、<、=等运算符。

三个常见坑

• 漏了方括号：Background 20不会被识别，命名必须带[ ]；
• 拼写不匹配：对齐关键字必须与文档一致，写错会被静默忽略；
• 符号里塞了多个背景层：每个符号最多只能有一个带填充的背景层，多了行为不可预期。

生态与避坑指南

• 版本兼容：项目已不再积极维护，但核心功能在 Sketch v53 及更早版本上仍可正常工作；如果你正使用更高版本，建议先在测试文件里验证一遍再接入工作流。
• 符号内间距的局限：在符号主模板里可以用间距规则排布元素，但覆盖符号实例后间距不会保留，这是为了避免破坏图层结构而做出的取舍。
• 兼容 Zeplin 等协作工具：因为 Paddy 只移动和缩放图层，不写入特殊数据，交付给 Zeplin 或同事的源文件无需插件也能正常阅读。
• 与其他插件配合：若符号内部需要更强的间距能力，可以搭配 Anima 的 AutoLayout（Stack groups）使用，Paddy 在缩放符号时会参考 Stack 组的结果，二者并不冲突。

写在最后：去试试你的第一个自动布局

下一次当你面对"改一行文字、动一堆图层"的重复劳动时，不妨停下来想一想：能不能把它写进图层名字里，交给 Paddy 自动完成？试着打开任意一个正在做的页面，把最常用的按钮或卡片改造成"取个名就自动排布"的组件，感受一下改完文字按一下Esc的畅快。

如果你在实践过程中发现了新的用法，或踩到了文档没提到的坑，欢迎在评论区分享你的经验——好东西，值得让更多人知道。

【免费下载链接】paddy-sketch-pluginAutomated padding, spacing and alignment for your Sketch layers项目地址: https://gitcode.com/gh_mirrors/pa/paddy-sketch-plugin