Framer X 上手体验

终于收到 Framer X 的内测邀请。

Framer 在发布之初，是一个基于 CoffeeScript 的交互原型工具，通过编写代码来制作交互原型。后来发布了全新版本，加入了可视化的 design 面板和 collaborate 功能，不过 prototype 部分依然需要借助 code。

而这次正在内测的 Framer X，则是再次推倒重来，放弃了 code 的道路，把 prototype 和 design 紧密结合。下面来简单说说上手体验。

基础元素 Frame 和 Stack

如果用 Sketch 进行设计，我们会创建一个个 Artboard，然后在里面画出图形和线条，适当用 Group 把元素整理起来。虽然比起 Photoshop，Sketch 放弃了复杂的照片处理功能，专注于界面设计，但依然 Sketch 停留在「画」设计稿阶段。

而得益于对 code 的理解，Framer X 使用了更为抽象的 Frame 和 Stack 概念。Frame 的性质是「框架」，在最外层，它充当 Artboard 的作用，而在里层则起到 Group 的作用。Frame 里面可以套多层的 Frame。

而 Stack 则是一个个散落的元素，与 Frame 有相对关系——既可以让 Stack 的宽高是 Frame 的百分数，又可以让 Stack 的上下左右四边相对 Frame 的距离是定值，类似 iOS 中的 AutoLayout。最终实现，Stack 会随着 Frame 的变化而变化。

Framer X 主界面

比如 UI 设计里的 cell 分割线，在 Sketch 里往往会画一条线，但在真正的 code 实现里不存在线条，只有 border，这点在 Framer X 里也体现了出来。Framer X 不能画线条，但可以灵活设置上下左右四边的 border，而 padding、align 等 CSS 里常见的属性也不少。

这些设定，体现出 Framer X 非常贴合 code 实现的原理，不是在「画」设计，而是在真正地 build 一个设计。

Framer X 工具栏

改头换面的 Prototype

Framer X 的 slogan——Interactive design for everyone，意味着放弃了用 code 来编写交互的老路，这样的门槛实在太高。

可以看到 Framer X 的工具栏中，暂时只有 Link（页面跳转）和 Scroll 两种交互。跟现在主流的做法一样，在设计界面直接设置交互动作、过渡效果、方向等等。

至于之前能用 code 实现的更复杂的交互，比如条件判断（当页面超过的某个高度时候，改变某元素的透明度），则需要导入 code file 来实现，这次改为了主流的前端框架 React.js。

强大的 Components 和商店

自定义 code 程度被削弱，components 在一定程度上进行了弥补。

跟 Sketch 的 symbol 不同，Framer X 的 components 不是「样子货」，而是可以由 code 编写出来的。好比 Swtich 能切换开关状态，Webview 可以加载出网页，视频能够播放，loader 真的能转起来。

Framer X 在 app 里集成了 components 商店，可以很方便地下载、引用，也可以发布自己的 components。商店有 iOS 和 Material 的 UI Kit、接入了 Unsplash.com API 的照片库、借助 Google Translate 实现的翻译等等。