Paddy
让图层自动填充间距、对齐和分布
有一些类似的插件可完成一些功能,但没有一个以更好的简单方式来完成
- 自动:大多数插件需要键盘快捷键才能应用或重新应用效果,而 Paddy 这一切都是在操作图层时自动完成
- 可见属性:很容易查看在图层列表查看对图层和组应用了哪些填充/间距而不需要单独选择它们,这是因为所有的属性都是通过图层名称设置的
- 没有特殊的数据处理:只是调整和移动图层到最佳位置,它不会把你的组变成一个特殊的 "堆栈组" 或其他东西,所以其他人或程序可完美地读取 Sketch 文件,而无需使用此插件
- 轻量级:它只是做了几件核心事情,没有臃肿与一堆无用的功能
安装
- 下载并解压
Paddy.zip
- 双击
Paddy.sketchplugin
完成安装
使用
图层填充
填充可应用于组的 "背景" 层(形状图层或 Symbol)"背景" 图层将自动调整大小,以便以指定的填充包围该组内的所有图层
在 [
和 ]
之间指定背景图层填充量,如 Background [10 20]
填充值的格式与 CSS 顺序相同
例子:
[20]
所有方向均填充20
[10 5]
顶部和底部填充10
左右填充5
[10 5 15]
顶部填充10
左右填充5
底部填充15
[10 5 15 20]
顶部填充10
右填充5
底部填充15
左填充20
执行 Plugins > Paddy > Enter padding for selection 或使用快捷键 control ⌃ + alt ⌥ + P 在弹出的对话框中输入字段,以将填充属性保存至所选图层
如果不希望输入指定填充,而是希望自动从它已有内容中推断,执行Plugins > Paddy > Imply padding for selection 或使用快捷键 command ⌘ + P
忽略特定图层
在背景层根据填充计算大小时忽略特定图层,只需将要忽略的图层名称加上 -
即可,例如 -new badge
会被忽略
忽略特定边的填充
如果不想将填充应用于顶部、底部、左侧或右侧,只需使用 x
而不是数字
例如:要将填充 60 设置为顶部和底部,但忽略左右两侧,背景图层的名称设置为 [60 x]
即可
更高级的尺寸表达
在填充值旁指定最大和最小值可用 ;
分号分隔,例如 [20 10; width <= 50]
将应用最大宽度 50
对于宽度使用:width
或 w
对于高度使用:height
或 h
可用运算符:>=
>
<
<=
=
例如:[20;h>=250]
将在所有方向上应用 20
的填充,最小高度为 250
自动更新
为了将背景图层调整为指定的填充,只需取消选择所有图层或按 esc
键以自动取消选择图层,这将自动更新先前选定图层的所有填充和间距
Symbol 支持
适用于创建动态调整大小的按钮
少量测试也适用于 Sketch Libraries
这不会操纵 Symbol 内的元素,只是将 Symbol 调整为适合的最佳大小,因此每个 Symbol 不能包含多个带有填充的 "背景层"
为了获得最佳结果,请避免在深度嵌套组中的 Symbol 应用填充
间距和分布
与 Anima 的 Stacked 图层或 Distributer 插件类似,你也可以将 "间距" 应用于任何组,以便自动分配其所有子项
要设置组内层的间距/分布,可添加属性于 [
和 ]
间
属性:[{间距}{方向}]
间距:间距的数量,例如 10
4
方向:h
表示水平 v
表示垂直
式例:[10v]
垂直分布元素且间距为 10 [5h]
水平分布元素且间距为 5
执行 Plugins > Paddy > Apply spacing to selection 或使用快捷键 command ⌘ + control ⌃ + alt ⌥ + P 在弹出的对话框中输入字段为所有选定的组保存间距
自动对齐
还可设置组内所有图层的自动对齐方式,对齐可单独应用于一个组,也可与 "间距" 结合使用,与间距/填充类似,同样将属性添加于 [
和 ]
属性: [{对齐方式}] 或 [{间距}{方向}{对齐方式}]
方式:
l
/ left
左侧对齐
c
/ center
水平居中对齐
r
/ right
右侧对齐
t
/ top
顶部对齐
m
/ middle
垂直居中对齐
b
/ bottom
底部对齐
[left]
左对齐所有图层
[10v c]
以 10 的间距垂直分布所有图层并水平居中
[5h b]
将所有图层水平放置、间距为 5 且底部对齐
甚至可指定多个对齐值,例如:[c m] 将同水平和垂直居中对齐图层 或 [t c] 在顶部水平居中对齐
基本信息
- 收录版本
1.0.7
- 更新时间
6年前