終于收到 Framer X 的內(nèi)測邀請。
Framer 在發(fā)布之初，是一個基于 CoffeeScript 的交互原型工具，通過編寫代碼來制作交互原型。后來發(fā)布了全新版本，加入了可視化的 design 面板和 collaborate 功能，不過 prototype 部分依然需要借助 code。
而這次正在內(nèi)測的 Framer X，則是再次推倒重來，放棄了 code 的道路，把 prototype 和 design 緊密結(jié)合。下面來簡單說說上手體驗。
基礎(chǔ)元素 Frame 和 Stack
如果用 Sketch 進(jìn)行設(shè)計，我們會創(chuàng)建一個個 Artboard，然后在里面畫出圖形和線條，適當(dāng)用 Group 把元素整理起來。雖然比起 Photoshop，Sketch 放棄了復(fù)雜的照片處理功能，專注于界面設(shè)計，但依然 Sketch 停留在「畫」設(shè)計稿階段。
而得益于對 code 的理解，F(xiàn)ramer X 使用了更為抽象的 Frame 和 Stack 概念。Frame 的性質(zhì)是「框架」，在最外層，它充當(dāng) Artboard 的作用，而在里層則起到 Group 的作用。Frame 里面可以套多層的 Frame。
而 Stack 則是一個個散落的元素，與 Frame 有相對關(guān)系——既可以讓 Stack 的寬高是 Frame 的百分?jǐn)?shù)，又可以讓 Stack 的上下左右四邊相對 Frame 的距離是定值，類似 iOS 中的 AutoLayout。最終實(shí)現(xiàn)，Stack 會隨著 Frame 的變化而變化。
比如 UI 設(shè)計里的 cell 分割線，在 Sketch 里往往會畫一條線，但在真正的 code 實(shí)現(xiàn)里不存在線條，只有 border，這點(diǎn)在 Framer X 里也體現(xiàn)了出來。Framer X 不能畫線條，但可以靈活設(shè)置上下左右四邊的 border，而 padding、align 等 CSS 里常見的屬性也不少。
這些設(shè)定，體現(xiàn)出 Framer X 非常貼合 code 實(shí)現(xiàn)的原理，不是在「畫」設(shè)計，而是在真正地 build 一個設(shè)計。
改頭換面的 Prototype
Framer X 的 slogan——Interactive design for everyone，意味著放棄了用 code 來編寫交互的老路，這樣的門檻實(shí)在太高。
可以看到 Framer X 的工具欄中，暫時只有 Link（頁面跳轉(zhuǎn)）和 Scroll 兩種交互。跟現(xiàn)在主流的做法一樣，在設(shè)計界面直接設(shè)置交互動作、過渡效果、方向等等。
至于之前能用 code 實(shí)現(xiàn)的更復(fù)雜的交互，比如條件判斷（當(dāng)頁面超過的某個高度時候，改變某元素的透明度），則需要導(dǎo)入 code file 來實(shí)現(xiàn)，這次改為了主流的前端框架 React.js。
強(qiáng)大的 Components 和商店
自定義 code 程度被削弱，components 在一定程度上進(jìn)行了彌補(bǔ)。
跟 Sketch 的 symbol 不同，F(xiàn)ramer X 的 components 不是「樣子貨」，而是可以由 code 編寫出來的。好比 Swtich 能切換開關(guān)狀態(tài)，Webview 可以加載出網(wǎng)頁，視頻能夠播放，loader 真的能轉(zhuǎn)起來。
Framer X 在 app 里集成了 components 商店，可以很方便地下載、引用，也可以發(fā)布自己的 components。商店有 iOS 和 Material 的 UI Kit、接入了 Unsplash.com API 的照片庫、借助 Google Translate 實(shí)現(xiàn)的翻譯等等。
