视觉设计师经常会遇到需求更改，需要添加或删减导航栏等需求，那么如何能让我们更快捷处理这类需求呢？在这里我们介绍给大家一款sketch智能排版小插件--kitchen。

 

kitchen是什么呢？这是一款阿里团队推出的为设计者提升工作效率的sketch工具集，特色功能如下：

下面我们主要从智能排版展开介绍，kitchen的智能排版主要包含间距和边距两个功能，也就是网页前端术语的margin和padding，在智能排版使用过程中主要包含以下几种情景：

 

1.制作弹性按钮

一般按钮控件包含弹性按钮和固定按钮。弹性按钮两端留白不会随文字数量改变而改变，留白始终保持固定。设计师在处理这类控件调整时往往手动调整按钮宽度，繁琐并且耗时；固定按钮两边留白不固定，当文字数量较多则两边留白少，反之亦然，设计师一般处理这类按钮最省力，但这类按钮普适性较差，当文字过多时不适用。

而kitchen能帮助我们自动调整间距，当我们选中这个按钮组，打开智能排版面板，在左边距和右边距都写上固定数值，键盘回车，然后当我们调整文字数量，左右留白不变，按钮整体宽度自动调整，是不是很智能呢？

上下边距也是同样操作，左下角的自动排版需要勾上，否则按钮组会被打散，失去自动排版功能。

 

下面是一个示意图，可以看到Kitchen给我们的按钮组重新命名了，多了尖括号和数值，名称中的x代表空，下边距没有填写。顺序是按照“上-右-下-左”顺时针的方向，和前端的四数值简写方法是一样的。需要注意的是，新增的尖括号及内容不能删除，否则智能排版会失效。

2．让元素自动调整间距

一个横向的文字导航，每项间距是40，其中第二项字数发生了改变，为了保持间距统一，后面的元素位置需要手动调整。那么利用智能排版的间距功能，我们就会给每个文字赋予生命力，让它们之间实现自动排版。在水平间距填写40看看效果。

搞定，从此以后面对任何导航再也不怕修改文字了。垂直间距也是同样的道理。在间距操作中，导航所在的组，名字被Kitchen改为h40，h即horizontal，同样，如果是垂直间距会加上v，即vertical。

3.制作一个弹性按钮组

我们已经掌握了智能排版的两个核心间距和边距，在实际工作中还有很多需要两个功能结合起来的操作，比如做一个弹性按钮组：按钮内部两端的边距固定，按钮之间的间距也保持固定。

 

在没有Kitchen之前，这样的操作非常耗时，先要更改按钮宽度，接下来再改变按钮间距。而在智能排版的帮助下，复杂的操作也能很快完成。

4.智能缩放应用到symbol

在上面的例子中，我们用了不同宽度的按钮，但是像文字、颜色、描边等样式都是一样的。对于Sketch来说，这些按钮统一可以使用Symbol来代替，实际工作中我们肯定也是这样操作的。那么如果每个按钮都调用了同一个Symbol，上面讲到的弹性按钮组可以实现吗？当然可以。

 

我们先把按钮转换为Symbol，复制四个分别再命名，然后把整个组用智能排版的间距功能设置为h20。不过出现了问题，按钮高度塌陷了，一个bug。

我们需要进入到Symbol中，把按钮的圆角矩形底的Resizing给设置下，顶部固定，高度禁止拉伸。

设置之后再看下效果，已经可以了。不过还有个小问题就是，按钮之间的间距无法自动完成，需要我们手动选择按钮组，再使用下智能排版的间距功能，设置为h20，确定回车就可以了。这个应该还算是一个bug。

5.总结

通过利用Kitchen的智能排版功能，我们已经实现了想要的效果，提高了设计效率。kitchen还有许多其他功能待我们探索，小伙伴们也可以自行研究一下数据填充、iconfont等～