Sketch换了版本号改为年份版本号,带来了一个巨大的更新,就是取消传统的画板,改为“画框”

画框

我们用之前的快捷键A也可以创建画框,画框之间可以互相嵌套。

这个文章就带大家快速上手画框的使用。

创建画框

创建画框和之前创建画板类似。按快捷键A或者F都可以创建画框。

画框

画框左侧的层级关系支持自动更改,你只需要鼠标拖拽进画框或者拖拽出画框即可。

将画框2拖拽到画框中,会自动层级调整

所以我们已经基本用不上“分组”功能了,因为处于包含关系的画框可以视为一个组,这样的层级因为是自动分的层级,所以看起来就条理清晰,无需整理。

选中画框

画框内的元素在不按任何键盘快捷键的情况下只能选到二级画框,再里面的内容只能通过按住cmd+左键选择/不断双击选择下一层级/右键单击选择图层/左侧图层列表选择图层这些方法了。

我觉得最好用的还是cmd+左键来选择画框,这样比较方便。点到哪个选中哪个。

选中画框

智能识别布局方式

画框的所有元素都是绑定布局的,这意味着你的所有元素都需要调整边距参数来保证画框大小被调整时,内部的元素位置大小能够正确的变化。

边距线

我们可以看到选中一个元素时,绑定的边距线已经自动显示。

例如我们在一个手机尺寸上画一个右下角的按钮。我们可以看到自动绑定了顶部和左侧。

错误的绑定

我们需要按下快捷键shift+A,就可以自动的识别到合适的绑定。

自动识别绑定

比较坑的是将原本的F和B快捷关闭填充/边框的快捷键改了,改成shift+F和shift+B了。

以图形来创建画框

比如我们用纯图形来创建元素。

创建元素

这个弹窗这样创建就无法去改变大小,不能随着你的大小去做自适应。我们就需要创建画框。选中所有元素,按cmd+f创建画框。

创建画框

option+shift+A来智能绑定画框内所有元素的布局。

智能绑定

现在我们调整画框的大小,内部的元素也会自适应的变化了。其实就类似于之前的编组,但是比编组更方便。

调整大小

但是现在画框也可以添加填充和边框还有样式等,所以我目前给的建议就是,除非你要绘制图形,否则所有UI元素建议都使用画框完成,所以在sketch2025上,最佳实践应该是:使用画框替代矩形

使用画框替代矩形

层叠

对于重复性的元素,建议使用层叠进行绑定,可以非常方便的调整间距。

重复元素

我们选中这些重复元素,按cmd+L就可以创建一个“层叠”

层叠创建

我们可以设置层叠的间距,类似css中的padding。鼠标放上去我们就可以看到间距了了。

层叠间距

间距

层叠很适合重复元素的调整,也可以作为不同元素纵/横向排布的工具。这个方式可以设置间距可以让我们在设计组件的时候无需关注是否留有间距了,在层叠中可以直接设置,所以我们就不需要留间距。

总结

这个文章带大家快速入门sketch全新的画框,帮助没有使用过其他frame设计工具的小伙伴快速上手。其实我们只需要将画框想象成一种智能矩形即可。文中提到的一些常用操作可以记一下。

A/F:创建画框

cmd+F:创建一个包含选中元素的画框

shift+A:将选中元素智能识别布局方式

shift+option+A:将选中画框内的所有元素智能识别布局方式

cmd+L:选中元素作为层叠