Framer Studio 在昨天（5 月 31 日）發(fā)布了 V90 版本。

以往使用純代碼構(gòu)建界面、純代碼編輯一個可編輯原型的 Framer 強是強矣，但是對于我國大部分沒有 Coding 基礎的設計師來說實在只能說是望碼興嘆，學習成本確實很高。在要合理構(gòu)建界面的同時又能兼顧到交互動畫邏輯能夠順暢的跑起來，這種代碼的組織能力恐怕不是大家把官網(wǎng)上面所有的教程看完就能學會的，這是一種玄學一般的操作意識。不過我認為一款強大的軟件隨之而來的必然是有一定復雜性，既要面面俱到滿足你所有的愿望，又要簡單快捷不花費你太多腦力的東西基本上是不存在的，譬如美圖秀秀之于 Photoshop（沒有貶低任何一方的意思）。我知道很多設計師朋友都想往動效、開發(fā)方面繼續(xù)自己對于設計這個命題更深入的探究，如果你是也是這樣想的話，那么學一些代碼怕是繞不開的，而來到了 V90 版本的 Framer Studio 恐怕是現(xiàn)在市面上最適合設計師學習代碼制作原型、學習代碼來表達自己的動效、學習代碼來試驗自己交互邏輯的一款工具。

說了那么多，下面跟大家簡單分享下 V90 到底更新了啥，變成了什么樣吧。

可以看到最明顯的地方是：上面分成了 Design 和 Code 兩個 Tab。

1.圖形設計的強化（Design Tab）

△ ?Interface design, the way its meant to be.

讓界面設計變回它本該有的樣子。Framer “摒棄”了以往一進來就招呼你寫代碼的左邊編輯器、右邊預覽圖的界面，第一次將界面構(gòu)建跟代碼完全分離，它變得更像 Sketch ，你能直接在里面用鼠標來構(gòu)建你的原型，而且還有了更接近于 Sketch 的那種 artboards 的概念。以往Framer 多被詬病的一點是，不適合做多界面跳轉(zhuǎn)的完整的產(chǎn)品交互，只適合做單頁面的可操作原型，現(xiàn)在加入了 artboards 和智能分組算法，對于多頁面跳轉(zhuǎn)的完整一些的產(chǎn)品原型也能輕松應對，也再也不需要大量的手動去整理圖層結(jié)構(gòu)了。而且還內(nèi)嵌了萬眾期待的 auto-layout（自適應）功能，這肯定會對有自適應需求的設計師們帶來非常大的幫助。

△ ?Spend less time grouping and more time drawing.

少為雜亂無序的分組和圖層結(jié)構(gòu)而擔心。用鼠標來畫界面，以往的Framer 也可以，可是以前的問題是，畫出來的東西會讓你所有的代碼都亂了套，最后你還是要手動去幫它擦屁股，這種操作很暈人。智能分組的出現(xiàn)就是為了解決這個問題，其實說智能也太高級了，大家可以這樣理解，以前 Framer 的圖形編輯是一坨 X，現(xiàn)在不一樣了，它變得更加接近于我們最喜愛的 Sketch，只不過 Framer 會在你一邊畫畫的同時，嚴格按照你要的圖層順序一邊把代碼幫你寫好。畫出來就是自適應的，畫出來就是不用擦屁股的，盡管像用 Sketch 一樣來用它就好。對了，它還增加了一個插入 icon 的小功能，你可以把在 Sketch 里面畫好的小 icon 添加到這里，隨時供你調(diào)用。

界面是不是有點眼熟呢！完全支持你像在 Sketch 里面精確構(gòu)建界面一樣全方位掌控你想要掌控的所有元素了。

將界面的構(gòu)建與代碼編輯器完全分開，多畫板，自適應，智能圖層的引入的讓 Framer 變得像超級無敵簡單版本的 Xcode，我們終于可以很安心地一邊構(gòu)建我們的界面，又一邊用代碼來編輯我們的交互邏輯、動效邏輯了。

2.代碼編輯器（Code Tab）

猜想這回 Framer Studio 主要更新在于圖形設計的強化，代碼編輯這一塊并沒有帶來什么任何新功能，所以貼個官網(wǎng)的截圖，大家感受一下。

3. 總結(jié)

圖形編輯能力的全方位增強大概能夠解決我們以往最發(fā)愁的界面代碼與交互動效代碼混合而導致的種種牽一發(fā)而動全身的 bug 了。設計師能夠更加專注于使用代碼來構(gòu)建原型而不是大部分時間都沉浸于無數(shù)的 bug 之中耗費精力。簡單點說，F(xiàn)ramer 替我們完成了連專業(yè)程序員也會覺得繁雜而無趣的工作。一邊親手寫入秀麗的代碼，一邊看著自己的原型從靜態(tài)的一張張靜態(tài)圖片串聯(lián)起來成為一個完整的可交互原型，是非常享受的一種體驗。在這個過程你用最簡單，最漂亮又最有意義的方式把學習了一些程序思考的方式，又能夠深層次的檢查一遍整個產(chǎn)品的交互流程，最后還能得到一個有說服力的可交互原型，這種一石鳥鳥鳥的學習買賣我認為很值。

假如大家感興趣的話，或許以后我能寫一些 Framer Studio 的小教程分享給大家吧。

最后附上一個網(wǎng)友從 YouTube 上的視頻：Introducing Framer Design — Graphics, Made For Interaction

歡迎關注作者：

• 個人專欄：「DesignCoder」設計是一項工程；
• 我的追波：Zhuyuxuan

「做交互原型的軟件」

1. 工具隨心用！教你用KEYNOTE快速制作高保真交互原型
2. 新晉神器！超厲害的原型設計新玩具Kite Compositor 深度測評

【優(yōu)設網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內(nèi)人氣最高的設計網(wǎng)址導航，設計師必備：http://hao.uisdc.com