前Facebook设计师推出一款开源工具Framer，小白用户也能轻松写码编程

2013年， Koen Bok和Jorn van Dijk在Facebook做产品设计师时，他们注意到许多设计仍然在使用传统的幻灯片形式来展映演说。要用静态图像来讲解交互式的设计体验听起来十分费力，而且略显鸡肋。但是在当时来说，这是没办法的事。

四年后就不一样了。如今，几乎所有大型科技公司都要求产品设计师先把设计的产品原型做出来，以便向高管们更准确地传达想法。随着设计领域的焦点持续向科技技能转变，对于设计师来说，学会如何开发原型、如何编码就越来越有必要了。

“我觉得在未来一两年内，在这类公司中，如果不会做交互型设计，那么他就很难做产品设计师这样的工作。”Bok如是说道。

这就是在离开Facebook不久Bok和van Dijk联合创立了Framer的原因。Framer旨在开发出好用的设计工具，能让任何设计师或团队轻松建立关于软件应用，软件特效和用户界面的产品原型。第一代Framer于2015年发布，现在已被一些科技巨头使用，其中就有谷歌，Uber，Facebook，Dropbox等等。

上周，他们发布了新一代功能更强劲，更容易操作的Framer。这一次，对操作者编码知识的门槛可以说是降到了最低。

新版本的不同之处在于，它是一个端对端的设计工具，无需其他工具介入，也不用插入其他软件创建的文件，就能够让设计者进行开发并将想法打造成产品雏形。相比之下，最初的版本仅能通过快速插入代码来创建动画或者交互效果，这就意味着你不能单单使用这一个软件。比如，用户会用Sketch或是Figma之类的矢量图软件来设计界面，然后将这些文档导入Framer，加入一些交互性的元素。

Framer并非是第一款此类型的设计软件。相类似的还有Figma，自称“界面设计上的Github”；去年推出的Adobe XD也在创建设计模型上有很强大的功能性。但是，Framer不仅仅将图像转换成代码或是简单的建模，它采用简单的脚本语言来代表互动性功能和动画。比如，如果用户想要将设计的一个元素转换成动画，他可以创建一个新图层，切换到代码，选择“制作动画”按钮，Framer就可以自动生成那一串代码。Framer是拥有这类功能的第一款软件。

Framer的另一个关键特性是它有一套算法，基于设计者将初始对象摆放的位置可以推测出界面布置的规律。通过预测原始布局设计的规模，软件内置工具会重塑并改变界面布局以适应不同的设备。

对于Bok和van Dijk来说，现在的首要任务是开发那些与交互性关联更大的功能，因为他们认为软件设计界的大方向就是对交互性的重视。Bok说道：“当时（刚开始研发Framer时）市面上的工具输出的东西都不是设计师该做的东西。矢量图软件适合设计平面图形或图标，但并不适合设计包含声音，动画和其他有反馈元素的内容。我们把这个视作我们的市场切入点，我们觉得我们现在干得不错。”

Bok认为Framer甚至对于设计公司都很有帮助。“设计公司所面临的挑战很有意思，那就是现在有更多客户都想要的是那种能够方便交付的样本。他们想要一种以交互形式展现的作品，而不是一堆幻灯片或是混杂的一堆文件。他们用不着真正的产品，也不喜欢幻灯片，而是一个介于这两者之间的东西。”Bok解释道。