一文搞定Sketch图层自动填充与间距对齐：Paddy插件快速上手

一文搞定Sketch图层自动填充与间距对齐Paddy插件快速上手【免费下载链接】paddy-sketch-pluginAutomated padding, spacing and alignment for your Sketch layers项目地址: https://gitcode.com/gh_mirrors/pa/paddy-sketch-plugin做设计稿时最磨人的往往不是创意而是改稿文案从提交改成立即提交按钮就得手动拉大一圈列表里多加一项下面整排元素的位置全都得重排一遍。要是Sketch里的图层能像网页CSS那样——内容一变、四周自动留白、同伴自动让位那该省下多少反复微调的功夫Paddy插件正是为这个场景而生的。它是一款面向Sketch图层的开源小工具专注做三件事自动填充padding、间距spacing和对齐alignment。它的玩法很特别不依赖菜单里的各种命令而是靠图层名字里的一串字符发号施令让背景层、按钮、列表在你改完内容之后自动重新排布。对常做卡片、按钮、气泡这类组件的界面设计师来说这套命名即排版的思路几乎零学习成本。先看一张总览动图感受一下它工作时全程不需要手动触发命令的流畅感一次改稿十分钟、重排半小时的经历前几天我帮朋友做一个小程序的界面其中有个按钮文字、圆角、高度都定了唯独内边距怎么拉都不对劲字短的时候按钮显得空字一长又差点溢出。最崩溃的是我每次改完文案都得重新选中背景、手动拖拽调整再逐个检查四个方向留白是否均匀。后来同事丢给我一句给它起个带方括号的名字试试我半信半疑地装上了Paddy从此按钮的尺寸再也没手动拖过。安装克隆仓库后双击即可安装过程几乎可以忽略不计先在终端里克隆仓库然后双击下载好的Paddy.sketchplugin文件插件会自动装进Sketch的插件菜单随开随用。git clone https://gitcode.com/gh_mirrors/pa/paddy-sketch-plugin整个过程不到一分钟接下来要做的就是学会给图层起名字。第一步在图层名里写填充值Paddy的填充规则写在背景层的名字里。所谓背景层就是组里负责兜底的那个形状或符号它会自动改变大小把自己组的其他成员严严实实地包在中间。写法是在名字中加上一对中括号数值顺序和CSS的padding完全一致上、右、下、左。[20]四边都留20px[10 20]上下10px左右20px[10 15 20]上10px、左右15px、下20px[5 10 15 20]上5px、右10px、下15px、左20px比如把背景层命名为Background [10 20]它就自动成为上下10、左右20的衬底。下面动图演示了填充值被实时计算、背景跟随文字伸缩的过程如果不想手打数值也有偷懒的办法选中图层后按Control Alt P会弹出输入框直接填数字即可按Command Shift P则能推算出当前已有的填充一键把现状固化到图层名里。改完内容按一下Esc就自动刷新很多第一次用Paddy的人会问我改了文字为什么没变化关键一步是取消选择——Paddy的所有计算都发生在你取消选中图层的那一刻。改完内容后按一下Esc所有填充、间距、对齐就会一次性重新计算到位。这个取消即刷新的机制配合属性写进图层名的设计带来两个额外好处一是扫一眼图层面板就能知道每个组的留白和间距不用逐个点开属性检查器二是它从不改动你的图层结构不会把组改造成什么特殊形态别人或者Zeplin这类协作工具读你的文件时一切照常。某些图层不想参与计算名字前加一个-做按钮的时候我常会挂一个NEW角标之类的小元素它贴着边缘、故意溢出一部分。这种图层如果参与填充计算背景就会被撑大。解决办法很简单在图层名前加一个短横线比如-new badgePaddy计算时就自动把它排除在外。只想留上下、不想留左右用x占位四边留白均匀的情况毕竟少数更多时候是左右想贴边、只留上下。Paddy支持用字母x代替数字表示这一边不填充。比如[60 x]就是上下60px、左右0px适合做那种横贯全宽的分隔条或标题块让填充顺便满足最小/最大尺寸有时候光靠留白还不够。比如标题只有两个字时背景塌成一小条会很难看我们希望它无论如何都保持最低高度。这时可以用分号在填充值后面追加尺寸约束格式为[填充; 约束][20; h 250]四边填充20px且高度不小于250px[15; width 300]四边填充15px且宽度不超过300px宽度用width或w表示高度用height或h支持的比较符有、、、和。下面的动图里背景层顶着最小高度的约束文字再多也不至于撑破一排按钮排不齐间距写在组名里填充解决的是组内留白间距解决的则是多个图层之间的均匀分布。做法还是在组名里加中括号格式为[数值方向]方向用h表示水平、v表示垂直[10v]子元素垂直排列彼此间隔10px[8h]子元素水平排列彼此间隔8px选中组之后按Control Alt Command P可以弹出间距输入框批量写入更加省事。效果见动图几行选项瞬间被排得整整齐齐间距和排布方向一起指定更妙的是间距还能和对齐方式组合使用格式为[间距方向 对齐]对齐缩写分别是l/left左、c/center水平居中、r/right右、t/top顶部、m/middle垂直居中、b/bottom底部[10v c]垂直间距10px所有子元素水平居中[5h b]水平间距5px所有子元素底部对齐[c m]整体居中对齐类似垂直水平居中先看单独的对齐效果再看间距与对齐叠加后一组标签自动排布的过程符号也能自动伸缩组件库的救星Paddy对Sketch符号的支持相当用心。只要在符号内部的背景层上写好填充规则所有该符号的实例都会随内容自动伸缩这在做聊天气泡、动态按钮时简直是神器。我常用它搭一套按钮库背景层带填充图标和文字随便换按钮尺寸永远严丝合缝。气泡的箭头用小元素忽略掉尾巴就能自然贴住气泡本体按钮场景更直观——同样是那个符号文字长一点、图标换一个背景自动跟着扩再也不用为每个变体单独调尺寸需要注意Paddy调整的是整个符号实例的尺寸不会动符号内部的图层所以一个符号里最好只有一个带填充的背景层如果要给符号排内部布局别把填充嵌进太深的嵌套组里。绕开三个小坑使用中我踩过的坑基本集中在三处提前知道能省不少时间改完内容没变化先检查有没有取消选择按一下Esc是触发刷新的关键一步。想让某个元素不参与计算却忘了加-前缀背景会被悄悄撑大排查时优先看图层名。想在符号内部用间距规则符号被覆盖后间距不会自动保持想要栈式布局这类效果可以配合Anima的AutoLayout使用Paddy会在缩放符号时把它的Stack组一并考虑进去两者并不冲突。另外提醒一句这个项目目前已停止积极维护核心功能在Sketch v53及更早版本上仍能正常使用Sketch官方也已在酝酿把类似能力原生内置。从一个小按钮开始尝试与其记一堆规则不如现在就动手新建一个组放一段文字和一个背景层把背景层命名为Background [16 24]改几遍文字再按Esc你会看到它第一次自己长大。Paddy插件让Sketch图层自动填充、间距与对齐不再是反复的手工劳动而是一套随时能带走的命名习惯。今天就从这个小按钮开始把这份自动化带进你的下一个组件吧。【免费下载链接】paddy-sketch-pluginAutomated padding, spacing and alignment for your Sketch layers项目地址: https://gitcode.com/gh_mirrors/pa/paddy-sketch-plugin创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考