终于收到 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 的变化而变化。
比如 UI 设计里的 cell 分割线,在 Sketch 里往往会画一条线,但在真正的 code 实现里不存在线条,只有 border,这点在 Framer X 里也体现了出来。Framer X 不能画线条,但可以灵活设置上下左右四边的 border,而 padding、align 等 CSS 里常见的属性也不少。
这些设定,体现出 Framer X 非常贴合 code 实现的原理,不是在「画」设计,而是在真正地 build 一个设计。
改头换面的 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 实现的翻译等等。