Framer Studio 在前段時間（5 月 31 日）釋出了 V90 版本。

以往使用純程式碼構建介面、純程式碼編輯一個可編輯原型的 Framer 強是強矣，但是對於我國大部分沒有 Coding 基礎的設計師來說實在只能說是望碼興嘆，學習成本確實很高。在要合理構建介面的同時又能兼顧到互動動畫邏輯能夠順暢的跑起來，這種

程式碼的組織能力

恐怕不是大家把官網上面所有的教程看完就能學會的，這是一種玄學一般的操作意識。

不過一款強大的軟體伴隨之而來的必然是有一定複雜性，既要面面俱到滿足你所有的願望，又要簡單快捷不花費你太多腦力的東西基本上是不存在的，譬如美圖秀秀之於 Photoshop（沒有貶低任何一方的意思）。

我知道很多設計師朋友都向往

動效、開發

方面繼續自己對於設計這個命題更深入的探索，如果你是也是這樣想的話，那麼學一些程式碼怕是繞不開的，而來到了 V90 版本的 Framer Studio 恐怕是現在市面上最適合設計師

學習程式碼製作原型、學習程式碼來表達自己的動效、學習程式碼來試驗自己互動邏輯的一款工具。

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

先祭出現在介面，可以看到最明顯的地方是，上面出現了 Design 和 Code 兩個 Tab。

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

Interface design， the way its meant to be。

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

Spend less time grouping and more time drawing。

少為雜亂無序的分組很圖層結構而擔心。用滑鼠來畫介面，以往的Framer 也可以，可是以前的問題是，畫出來的東西會讓你所有的程式碼都亂了套，最後你還是要手動去幫它擦屁股，這種操作很暈人。智慧分組的出現就是為了解決這個問題，其實說智慧也太高階了，大家可以這樣理解，以前 Framer 的圖形編輯是一坨 X，現在不一樣了，它變得更加接近於我們最喜愛的 Sketch，只不過 Framer 會在你一邊畫畫的同時，

嚴格按照你要的圖層順序

一邊把程式碼幫你寫好。

畫出來就是自適應的，畫出來就是不用擦屁股的，儘管像用 Sketch 一樣來用它就好。

對了，它還增加了一個插入 icon 的小功能，你可以把在 Sketch 裡面畫好的小 icon 新增到這裡，隨時供你呼叫。

瞧瞧，介面是不是有點眼熟呢！完全支援你像在 Sketch 裡面精確構建介面一樣全方位掌控你想要掌控的所有元素了。

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

2.程式碼編輯器（Code Tab）

猜想這回 Framer Studio 主要更新在於圖形設計的強化，程式碼編輯這一塊並沒有帶來什麼任何新功能，所以貼個官網的截圖，大家感受一下（Framer 官網的設計一向都維持比較高的水準，沒事我都愛逛逛。）

3.最後想說

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

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

最後的最後附上一個網友從 YouTube 上面扒下來的影片。

Introducing Framer Design — Graphics， Made For Interaction

相關閱讀：

「寫給設計師」：技術要懂多少才算懂？

Framer Studio 教程——Design Tab 的使用

Framer Studio 教程——可怕的 Code Tab

歡迎關注

個人專欄：「DesignCoder」設計是一項工程；

我的追波：Zhuyuxuan