使用 Sketch 搭建动态布局

如果你在设计交互，你可能会经常遇到一些重复性的元素，比如列表中的行，或者网格化元素。尽管Sketch提供了一些方法，通过使用Symbols将一些样式应用到元素中，但如果你想让布局更有适应性或者动态变化，它恐怕就很难完成了。

在过去的几次重布局项目当中，当我需要快速迭代时（例如重新设计Facebook“关于”页面时），我跳过使用Sketch进行布局，直接使用html/css。虽然你可以这么做，但频繁的在代码和浏览器之间切换，类似这样的事情，会限制了你的速度。

有一天，当我发现我正在设计表格布局，记不清楚实第多少次调整每一个表格元素对齐方式时，我开始憧憬有没有什么我能够让Sketch的WYSIWYG（所见即所得）和html、css相结合。

远在天边近在眼前。Facebook React Native项目有个非常漂亮的CSS布局库，它基本上是使用javascript来实现的CSS FlexBox布局。于是我花了几个晚上做了一个sketch插件的概念版：

一个名为 @stylesheet 的图层，以及插件的快捷键

这样就能够将原先比较麻烦的处理，例如设置内边距，变得很快速了。接下来，我要解决文本框的问题。文本框的问题就不是很好解决了，我的方法也不是很高效，不过插件运行起来倒算是马马虎虎，自适应大小、固定大小、多种行高、文本大小都实现了。

手动的重新布局，设置大小都变得很繁琐

这几个例子都很基础，而现实中的布局是非常复杂的。下面我们来试一下把表格布局混合一些图片、名称、二级文本以及一些附件。

这样的工作流能够使我们快速迭代，如果你要调整一些局部的尺寸、内边距等等，这个工具都能自动为你完成。

如果使用了Symbols，那么还能体验到其他的一些优势：

你可以在图层面板中调整顺序来控制列表中的元素顺序

调增多种屏幕大小的尺寸变得更加容易

不同于Symbols，你可以删掉一些元素，布局会自己调整。

布局并没有局限在视觉上，一些组可以共享布局，并且还可以看起来都有所区别

更进一步 — 原型

Symbols有一个优势，他能可视化的改变事物，而不是一遍遍的修改文本。最重要的是，维护不断增长的样式表将会成为一个痛点。

一种比较自然的办法来解决这个问题的话，我的方案是在Sketch中将样式表可视化。于是乎，我是用了一些平常做标注的方法 — 使用矩形、线段来表示内边距、外边距、宽度、大小尺寸等等。

如果我要制作上一个例子的标注，可能就会是这个样子。

制作成原型只需要简单的命名图层，增加一些很难视觉上表达的样式（这些图层可以随后隐藏起来，以免分散注意力）。

我添加了一个 @size 属性应用到宽度和高度

现在我们使用之前制作的表格来演示一下。在你所看到的现象背后，是原型的属性被翻译成单独的样式，并附加到样式表中。

视频
你可以注意到样式图层没有重新对齐。这是个半成品插件，我还在思考用户是否希望这些元素跟随其父元素

嗯，效果还不错。现在我们可以可视化的修改表格布局了，不用在设计视图和文本视图之间来回切换了。现在这个样式表只是用来渲染这个组，如果需要的话，我们也可以把它变成原型。通常情况下，我都会留着他，因为它作为原型是在太小了。下面这个例子完全使用原型进行构建。

在前面的元素原型之上，我们有一个表原型，他有着内边距和宽度，以及一个Section header原型，这个原型的下边距和其他的原型都不一样。

这么做并不是为了替换掉Symbols的使用，而是使用动态布局引擎来做个补充，这样能使得许多繁琐的任务变得更加容易。Symbols本身是很好的，甚至可以为原型作补充，你可以在symbol当中创建一个@padding图层，然后在原型之间共享它。

接下来需要做的

这个插件正在制作当中，现在进度很慢，而且还有很多的bug。尽管如此，我还是希望大家能试用一下，给我一些反馈，如果能变得更好用，或者贡献你们的力量，让它尽快能够发布。

它已经为我节省了很多的工作时间，我也希望它能帮助到更多的人。如果你想尝试一下，请到Github repo当中下载。

这是我在Facebook工作时的副业。如果你是一名设计师，同时你也喜欢各种工具，请联系我！我们最近启动了一个专门的设计工具项目，并且持续招聘中。

感谢 Jon Lax, Charlie Deets, Eric Eriksson, 以及 George Kedenburg III.

原作者：

欢迎大家到Medium上去关注他。

原文出自：掘金 作者：MrMuscles