source
cover

使用 Smart Selection 玩转图层网格

继上次使用图层功能对豆瓣电影首页进行模块划分后,又处理好本地字体的使用。然后我导入了几张电影海报,框选它们时发现了一个好玩的功能。查了一下官方文档,发现这个功能叫做 Smart Selection,用于高效操作设计稿中的图层网格。Sketch 在 55 版本中也偷偷放上了半个这个功能,离 Smart Selection 还是有一些差距,不过我猜很多同学并没有发现这个小秘密。

Sketch 55的小秘密

教程相关


第一步,整理图层

使用「图层插入 - 图像」功能将几张海报上传至设计稿中。使用鼠标拖动将这些海报全部框选,此时会发现整体选中框的右下角有一个「蓝色的按钮」。点击该按钮会自动将杂乱无序的海报图层整理成有序的网格。

第二步,调整间距

此时再一次使用鼠标拖动框选住整个海报网格,鼠标 Hover 时可以发现整体选框中多了很多操作功能提示。拖动行元素之间的「水平横线」可以调整水平间距,垂直亦然。这个间距调整会影响所有行元素的间距,不仅当前两行的间距。

第三步,调整布局

鼠标 Hover 选框时,里面的每个图层中心都会有个小圆点,Hover 海报图层时小圆点会放大成为描边圆圈⭕️。进一步 Hover 该圆圈时可以拖动这个图层。此时你可以拖动这个图层跟别的图层调换位置,也可以把这个图层放置到别的行中。