Paddy 插件快速上手如何用图层命名自动完成 Sketch 填充、间距与对齐【免费下载链接】paddy-sketch-pluginAutomated padding, spacing and alignment for your Sketch layers项目地址: https://gitcode.com/gh_mirrors/pa/paddy-sketch-plugin你有过这样的经历吗改一个按钮的文案就得跟着手动拉背景层、调间距、重新对齐一晚上时间全耗在机械拖拽上。文案短了按钮松垮文案长了卡片爆边稍不留神整张画板就乱成一团。Paddy 就是为这个痛点而生的开源插件——它通过简单的图层命名规则自动计算 Sketch 图层的填充padding、间距spacing和对齐alignment把时间还给你。项目速览Paddy 是什么适合谁用一句话介绍Paddy 是一款用图层名字驱动布局的 Sketch 插件。你不必研究复杂的面板只要按约定给背景层或编组命名剩下的尺寸计算与位置调整全部自动完成。全自动不用手动触发取消选择即更新看得见参数直接写进图层名扫一眼图层列表就知道留白多少不破坏结构只做移动和缩放不生成特殊容器Zeplin 等工具照常读取轻量专注只做填充、间距、对齐三件事没有冗余功能它最适合经常做按钮、卡片、列表、气泡等重复组件的 UI 设计师以及正在搭建设计系统、需要批量维护组件样式的人。三分钟安装并跑通第一个示例安装步骤非常简单克隆仓库git clone https://gitcode.com/gh_mirrors/pa/paddy-sketch-plugin双击下载到的Paddy.sketchplugin插件会自动注册进 Sketch 的插件菜单新建一个编组把组里的背景矩形重命名为背景 [24]在它上方叠一行文字按 Esc 取消选择——背景矩形自动贴合文字四周均匀留出 24px从安装到看见效果三分钟绰绰有余。接下来我们逐个拆解它的核心能力。核心功能一填充——给背景层命名就自动留白使用场景按钮、标签、卡片、消息气泡这类背景要包住内容的组件且文案长度随时会变。操作步骤找到组里的背景图层形状层或符号均可把填充数值写进它的名字。格式是方括号加数字顺序与 CSS 一致上、右、下、左[24]四个方向都留 24px[16 24]上下 16px左右 24px[12 20 16]上 12px左右 20px下 16px[8 12 16 20]分别对应上、右、下、左最终效果改动任何内容或增删子层后取消选择背景层会自动缩放把全部子层严丝合缝地包住留白始终保持一致。下图里无论文字怎么变化按钮的呼吸感都不变。想让某个图层不参与计算加个减号前缀有些元素不该计入填充范围比如贴在右上角的NEW角标。把它重命名为-new badge开头加-Paddy 计算背景大小时就会自动跳过它角标想贴多近就贴多近。只想留部分边缘用 x 占位用x代替数值就能跳过某条边。比如[40 x]表示上下各留 40px、左右不留白——非常适合做通栏列表项这类窄边组件。想加尺寸下限分号写约束在填充值后面用分号追加宽高约束例如[12; h 48]四周留 12px同时保证高度不低于 48px。宽高用w/h表示支持、、、、五种比较符。做最小点击区域这类硬性要求时特别好用。核心功能二间距——一个 [12v] 让整组自动分布使用场景一列列表项、一排导航按钮、一组卡片需要统一间隔又不想逐个拖拽。操作步骤把间距写进编组的名字格式为[数值方向]。v表示垂直分布h表示水平分布。比如[12v]让子层垂直排列且间距 12px[6h]让子层水平排开、间距 6px。最终效果增删子层或修改子层高度后整组间距自动重算始终保持均匀。想批量设置时用Control Alt Command P调出间距输入框选中编组直接填数值即可。核心功能三对齐——一句话同时搞定对齐与间距使用场景图标加文字的组合按钮图标永远垂直居中、一排标签统一左对齐。操作步骤把对齐关键词和间距一起写进组名例如[12v center]子层垂直分布、间距 12px、水平居中。关键词都很直观left/l、center/c、right/r、top/t、middle/m、bottom/b。不想要间距也行直接写[center]就能让整组内容水平居中[c m]则同时实现水平居中加垂直居中。最终效果图标与文字的相对位置永远正确改多长的文案都不会跑偏也无需手动微调。核心功能四符号——让按钮和气泡智能伸缩使用场景设计系统里最常见的动态按钮和聊天气泡——同一个符号实例里的文案可长可短形状必须跟着变。操作步骤进入符号母版给背景层按前面的方式设置填充例如BG [20 24]保存为符号即可。最终效果拖出符号实例、替换任意文案实例会自动缩放到刚好包住内容。气泡会带着箭头整体适配按钮也能在仅图标和图标加文字之间自由切换。避坑指南五个高频问题与解决办法Q1取消选择后填充为什么没更新先检查插件菜单里的自动更新开关Enable / disable automatic updating是否被关掉了再确认命名格式——填充值必须写在方括号内且背景层必须是形状层或符号实例普通文字层无法承载填充。Q2一个符号里能用几个带填充的背景层只能有一个。Paddy 只是把符号缩放到最合适的尺寸不会改动符号内部元素多个背景层会互相冲突。另外尽量别把填充设在符号内部嵌套很深的组里这样效果最稳定。Q3在哪些 Sketch 版本上可用项目已停止积极维护核心功能在 Sketch v53 及以下版本仍能正常工作。好消息是 Sketch 官方团队已在计划把类似能力原生集成未来也许连插件都不需要了。Q4会不会破坏图层结构影响 Zeplin 协作吗不会。Paddy 只做移动和缩放不会把编组改造成特殊的堆叠容器文件交给 Zeplin 等协作工具时依旧可以被正常解析。Q5符号实例被 override 后内部间距为什么不保留了符号内部的间距布局在 override 后无法继续维持。如果确实需要堆叠布局可以配合 Anima 的 AutoLayout 使用 Stack groupsPaddy 在缩放符号时会把这些堆叠组一并考虑进去。进阶技巧三个让效率翻倍的小窍门1. 让 Paddy 替你反推填充值选中图层后执行 Imply padding for selection快捷键Command Shift P插件会根据背景层与内容的当前距离自动推算填充值并写入图层名不用自己口算。2. 一次给多个图层批量写填充选中所有目标背景层执行 Enter padding for selection快捷键Control Alt P在弹出的输入框里填一次数值所有选中图层一次性完成命名批量维护组件时省时省力。3. 复杂文档先关自动更新在超大文件里高频操作时可以先通过菜单关闭自动更新整理完再打开避免每动一下都整页重算。重新打开开关后 Paddy 会立即补算一次结果一样准确。结尾把机械操作留给插件回到开头的场景改文案、拖背景、调间距、反复对齐。有了 Paddy你只需要给图层起对名字剩下的交给插件。安装只要两分钟第一次体验到取消选择即自动布局的爽快感大概也就一顿饭的功夫。现在就打开 Sketch从把一个按钮的背景层命名为背景 [24]开始吧。【免费下载链接】paddy-sketch-pluginAutomated padding, spacing and alignment for your Sketch layers项目地址: https://gitcode.com/gh_mirrors/pa/paddy-sketch-plugin创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考