Layout布局助手-Adobe XD插件 排版布局辅助工具

对同一个组内的多个元素按指定的方向和间距进行排序,支持从左至右、水平居中、从右到左、从上到下、垂直居中和从下到上 6 种方式。

反正过年也出不了门,不如在家撸代码,临时开发了一个插件(其实从 Sketch 官方抄的),大年三十晚上吃完年夜饭开始开发,初一完成,初二优化了一下,会存在一些不足之处。这也是 XD 中文网开发的第 5 个 Adobe XD 插件,前 4 个分别为:《所有画板一键导出整张大图》《文本数据填充》《使用高德/腾讯/百度地图《取消默认描边

插件的功能大致是这样的:可以对同一个组内的多个元素按指定的方向进行排序,并且保存排序规则,当组内的一个或多个元素宽高发生变化之后可以按之前的规则再次进行排序,支持从左至右、水平居中、从右到左、从上到下、垂直居中和从下到上 6 种方式。

QQ20200126-185312-HD.gif

该插件的命名跟以往一样,非常随意,而且 Adobe XD 官方插件平台必须要英文,所以暂定为“Layout布局助手”。事实上,该插件对 Sketch 中的智能布局功能进行了非常多的借鉴,说抄袭也不为过,而且没抄好的那种,因为在 Sketch 中设定好之后,这一切都是自动的。开发 Layout 布局助手插件之初,也是希望这一切可以自动,比如当组内单个元素宽高发生变化根据设定的规则自动进行布局,但是在查阅 Adobe XD 插件的全部 API 之后发现想要修改 Adobe XD 文档中的内容必须是在插件面板中进行了点击或input值发生变更之后才可以,所以目前只能这样。

image.png

Layout 布局助手插件只能对组中的元素进行排序,所以你必须对需要进行排序的元素进行打组,可以同时选择这些元素之后使用快捷键 Ctrl+G(windows) 或者 Command+G(macOS) 或单击鼠标右键选择组。

“间距”用来设置任意两组元素之间的间距,当勾选“是否对齐”时在水平方向进行布局则排序时所有元素都将移动到同一水平位置、在垂直方向进行布局则排序时所有元素都将移动到同一垂直位置。

image.png

同时,设置过的“间距”和“布局方式”参数将保存在所在组的图层名称上,以“

QQ20200126-200250-HD.gif

在 Adobe XD 即将发布的 v26.0 版本中将增加自动填充功能,也可以与 Layout 布局助手插件一起配合使用。

image.png

人在湖北,离疫情重灾区不远也不近,封城了,不能出门,不如在家撸代码,最近可能还会有其它 Adobe XD 相关的产出,相信党和国家,嗯,武汉加油~大家新年快乐,身体健康~

使用 XDpacks 快速安装 300+ 款 XD 插件

Layout布局助手-Adobe XD插件 Adob XD 插件,Layout布局助手-Adobe XD插件 是什么,Layout布局助手-Adobe XD插件 安装,Layout布局助手-Adobe XD插件 使用方法,Adob XD 插件下载,Adob XD 插件安装,Adob XD 插件教程,Adob XD 插件使用方法,Adob XD 扩展,Adob XD 第三方集成