[自译]code with design -我们怎样构建工具，从Sketch导出React原型

作者分享了自己在团队Demo周中，合作完成的一款原型工具，将sketch文件映射到react框架的原型去，真棒～虽然用不上，但是也可以看看作者实现的思路，以及对现在设计和开发中问题的一些思考，感兴趣去原文阅读也十分不错！

原文链接：Code with Design — How we Built a Tool to Export React Prototypes from Sketch

原文作者：Joel Besada

每年，假期之前，我们都会花一个星期的时间去做一些工作之外的事情。我们把它叫做Demo周，这是一个很好的机会，和共事的人一起探索新想法。可以是一个实验性的产品，公司流程的改进，购物的LED实时地图，或者任何可以改进的东西。不过它必须在这一周里落地。

今年，我和设计师Petter Nilsson决定去探索，建立一个工具来沟通设计和开发的流程。具体而言，我们想构建一个工具，将我们在sketch上的设计导出为可交互的React应用。就像Airbnb React Sketch.app，但是是反向的。

如果要在一周内完成，这看起来十分困难，所以我们决定为工具添加一些限制：

-sketch中的设计只能有预设的symbols组成，这些symbols映射到我们已经实现的React UI组件。

-导出的代码只能作为交互原型来展示应用的布局，不能在页面跳转，类似于framer。代码可以作为起点，但不会包含实际的数据和业务逻辑。

-可以导出一个响应式布局，但是需要通过命名来定义sketch的行列结构。

这是我们一周后的成果：

https://giant.gfycat.com/EllipticalSpiffyEasternnewt.webm

在有限的时间里，我们实现了我们想要完成的目标。在这篇文章里，我会分享我们如何构建这个工具。

读取sketch文件

sketch的文件格式，就是压缩的json文件（包含设计中的位图）。为了能够方便的访问这些信息，并且能自动加载，我创建了一个自定义的webpack加载器。解压单个sketch文件并且读取单个json对象：

{

document: {...},

meta: {...},

user: {...},

pages: {...},

}

最有趣的部分是pages对象，它包含了sketch文档，就像图层树一样。一个图层可以是一个组，文字，组件，symbol，形状等等，每个层也可能会有子层。

加载器还使用了Webpack和emitFile API，使它们在服务器上的路径可以是位图。大多数文本数据是二进制，所以字段压缩后在客户端可读。

Components和Props

现在我们访问了sketch数据，我们可以将它映射到React组件上。因为sketch中的数据结构为一层树，所以它可以清晰的转换为我们想要创建的组件。通过递归遍历，把遇到的每层创建相应的组件。

sketch中的一层大多数是组，或者是定义的symbols。我们对图像和文本也有处理，这些组都同一个命名约定，我们将它们解析为带有间隔的组件。

为了能设置更多的UI组件，我们稍微滥用了sketch的symbol功能，在下面的示例中，我们在sketch文档里可视化了标签字段，这些会映射到react组件中。

这些在下拉中都有预设的选项。我们在sketch创建了许多不同类型和状态，所以可以在主按钮，次按钮和禁用按钮之间选择。

布局

https://giant.gfycat.com/GenerousJadedAsianwaterbuffalo.webm

虽然从sketch文档中读取坐标很容易，而且可以绝对定位所有的东西，但我们认为这个工具的一个重要特性就是，能导出响应式的应用。

我们经常遇到这样的问题，我们有漂亮的标准化设计，但是一旦你的窗口调整了，你可能会出现一些没有预料到的问题，这是因为在实现之前，没有工具可以检查到这点。

为了解决它，我们按照12列栅格布局来构建设计。这个是还原时给开发用的，但是设计中考虑更有意义。

https://giant.gfycat.com/TheseOldfashionedIrishterrier.webm

所有的设计师需要创建一个名为行和列的组，将元素放置其中。行列可以互相嵌套。当代码循环通过这个结构时，它可以自动检测预期大小，通过检测窗口大小，来设置断点。

优势

响应式允许你申明式表达你的UI，这打开了构建工具的可行性。一旦你实现了应用的基本构建，可视化工具处理布局会比编辑器更有意义。在繁复的开发工作中，专注于业务逻辑，让更多的可视化工具来处理重复性的工作。

将设计和开发过程联系更紧密带来的好处：

设计的反馈循环被缩短了，因为他们不需要等待实现，或者通过其他工具构建原型测试。

花在设计上的时间可以帮助构建定义好的组件和布局，节省零碎的开发时间。

通过对设计中的UI元素和React组件一对一的映射，设计师可以更好的理解代码作用，以及需要哪些新的组件。

提供工具来定义一个应用如何响应，这样可以让设计师完成适应的网格，而不是把负担留给开发人员。

继续前行

虽然我们这周构建的工具，允许我们快速预览我们的设计，但是我们从来没有实际的输出，构建工具是一个有趣的学习体验，但最终不是一个有意义的结果。

因为这个工具和我们的UI组件耦合度太高了，我们不能和其他人分享它-但是也有很多有趣的工具出现在这里：

React Studio

It goes far beyond checkboxes. Making a list? Draw one item, and React Studio can repeat it and fill with real data…reactstudio.com

Compositor

Tools for designers, developers, and creativescompositor.io

Meet Alva

Alva is a radically new open source design tool built for cross-functional product teams. You can design with the same…meetalva.io

这些工具的发展也很有趣，我们很期待它们将如何融入我们的工作中。