最近很火的設(shè)計神器 Framer X 剛剛邀請了一部分用戶內(nèi)測，很多設(shè)計師都好奇這個軟件有多好用，今天由3位設(shè)計師（丁一、鐘二信、Ray）共同撰寫的這篇文章，帶你搶先閱讀可能是東半球最詳盡的評測，趕緊來看！

一、Framer X 與 Framer 的區(qū)別以及新變化

1. 沒有內(nèi)置編輯器

可以看到這次新版的 Framer X 更加討好設(shè)計師了，拋棄了原有的代碼編輯模塊，只保留了設(shè)計面板。

2. 徹底拋棄 CoffeeScript

2013年 Framer 剛面世的時候，CoffeeScript 還比較流行，前端的發(fā)展也不像現(xiàn)在這樣繁榮，作者當(dāng)時選用 CoffeeScript 也是考慮到語法比較簡單，對設(shè)計師友好。但到了2018年已經(jīng)沒人再用 CoffeeScript 了，而且隨著前端領(lǐng)域的不斷發(fā)展變化，如今 ES6 可以做到的很多事情用 CoffeeScript 是永遠(yuǎn)也無法做到的。

3. 全面擁抱 React 和 ES6

新版使用 React 和 TypeScript 寫 UI 組件，也可以直接使用 ES6。

4. UI 組件化

組件化是 Framer X 最大的變化也是最核心的理念，你在界面上看到的所有東西背后其實都是一個個 React 組件。

5. 組件商店

Framer X 是第一款擁有內(nèi)置設(shè)計資源商店的設(shè)計軟件，不僅可以下載公開的組件，還可以管理和同步團隊內(nèi)部的組件，想象空間非常大。

二、布局（Layout）

1. Frames

Frames 是最基礎(chǔ)的布局工具，是一種可以包含界面和設(shè)計元素的容器，目前 Framer X 和 Figma 都采用了這種方式。Frame 是一個通用的容器，同時也扮演了 Artboard 的角色，與 Sketch 的 Artboard 不同的是，F(xiàn)rame 支持無限嵌套，而且它的好處是，當(dāng)畫圖標(biāo)等元素的時候，它可以擁有一個 Bounding Box 來固定一個高寬統(tǒng)一的尺寸，這一點上比 Sketch 要更加優(yōu)秀。

2. Stacks

這次對于布局功能最大的調(diào)整，除了可以將長寬設(shè)置為百分比，就是增加了這個 Stacks 功能。它提供了橫向和縱向的線性布局功能，當(dāng)多個圖層被放到同一個 Stack 中時，Stack 會自動對這些子圖層進行布局約束。另外 Stack 也可以像 Frames 一樣支持嵌套，可以把多個 Stack 嵌套在一個 Stack 里面。

從目前的版本看，Stack 可以調(diào)節(jié)的布局功能有：1. 排列的方向 2.選擇子圖層的分布規(guī)則 3. 設(shè)置子圖層之間的間隙和整個容器的 Padding。總的來說是能解決之前在 Sketch Layout 中多個尺寸有差異元素的排列問題，如： Cell 高度不等的列表、Tab 選擇器等。

從 Adobe XD 到 Framer X，可以看到 Stack 這個布局功能逐漸變成了所有設(shè)計軟件的一個標(biāo)配了，F(xiàn)igma 也已經(jīng)在內(nèi)測這個功能中，相信很快就可以使用了。目前如果想在 Sketch 中得到類似的功能則需要用到 Anima 插件中的 Stack Groups 功能。

三、交互（Interactive）

目前 Framer X 可以建立 Link 和 Scroll 兩種頁面交互。

1. Link

Link 與 Sketch 中的 Prototyping 功能如出一轍，其目的都是讓我們在預(yù)覽設(shè)計的時候可以從一個頁面跳轉(zhuǎn)到另一個頁面以體驗 user flow，但它和 Sketch 有一些差異。在頁面的轉(zhuǎn)場動畫上，F(xiàn)ramer X 更勝一籌，Sketch 目前只支持上下左右四個方向的 Push 動畫，而 Framer X 不僅有 Push 轉(zhuǎn)場動畫，還有非常實用的 Overlay、Modal 轉(zhuǎn)場。以往我們在 Sketch 中做設(shè)計的時候，經(jīng)常會遇到需要設(shè)計一些覆蓋于當(dāng)前頁面的菜單或彈窗而復(fù)制這個 Artboard，這是非常不便于修改維護的。在 Framer X 中就只需要單獨設(shè)計這個元素，就可以在預(yù)覽設(shè)計的時候通過這兩種轉(zhuǎn)場來顯示。

2. Scroll

設(shè)計工作中我們會遇到一些很長的滾動頁面，在 Sketch 中我們可以把那些不需要跟隨頁面滾動的元素，例如 Navigation Bar、Tab Bar 等設(shè)置為固定。而在 Framer X 中我們可以在頁面中指定一個滾動區(qū)域然后單獨設(shè)計滾動的內(nèi)容，選項上面還可以設(shè)置橫向或/和縱向滾動方向。

四、組件（Components）

這是 Framer X 最激動人心也是最核心的功能了。有了組件，設(shè)計界面就像是搭積木玩樂高一樣簡單。這也是現(xiàn)代界面設(shè)計中的 Design Systems。

組件分兩種，一種是設(shè)計組件，一種是代碼組件。

1. 設(shè)計組件

設(shè)計組件和 Sketch 里面的 Symbols，F(xiàn)igma 里面的 Components 邏輯基本一致，都是直接在設(shè)計畫布中直接通過設(shè)計好的元素來創(chuàng)建，使用時有 Master 和 Instance 兩部分，顧名思義 Master 就是父組件，而 Instance 則是通過 Master 復(fù)制出來的副本，當(dāng)改變 Master 時，所有 Instance 也會跟著改變。你可以對引用的 Instance 中的圖層進行修改，針對修改后已經(jīng)和 Master 中不同的圖層，用戶可以選擇是將 Master 更新，還是恢復(fù)為和 Master 一致。不過目前版本的這個功能還很簡陋，基本就是一個圖層組，并沒有提供類似 Overrides 的選項，也不能嵌套多個 Component 來進行更豐富的調(diào)整，而在代碼組件中可以實現(xiàn)更智能更復(fù)雜的組件選項。

2. 代碼組件

代碼組件通過代碼創(chuàng)建組件，則真正做到了高度可定制化，你可以用原生的 React 手寫組件，寫邏輯代碼。Framer X 還提供了一個 PropertyControls 的接口，通過它就可以自定義組件的屬性，而這些屬性會變成可視化界面，直接嵌入到右邊的屬性欄，非常方便。

比如 logo 組件，可以直接調(diào)用 Clearbit 的 API，只需要更改公司名稱就會自動替換對應(yīng)公司的 logo 了。

頭像組件，調(diào)用了 uinames.com 的 API，當(dāng)你把國家改成 China 或 Japan 時，不僅頭像會自動更換，連名字也自動換成了中文名和日本名！

Spotify 組件，也是通過官方 API，填寫任意專輯或歌曲的 URL 獲得相應(yīng)的結(jié)果。

Grid 組件， 結(jié)合 Link 功能可以做到更多事情。

3. 創(chuàng)建一個 Code 組件

想要看到別人組件中的代碼會有些繁瑣，需要在插入組件的時候右鍵點擊「Copy Code」，然后粘貼到你自己的代碼編輯器中（這個方式讓我很震驚，難道一個組件只能寫在一個文件里？）。

在參考了 Example Kit 里的代碼后，嘗試寫了一個簡單的組件：Hello world ，它可以完成一些簡單的功能比如：

• 在屬性欄中編輯組件中的文案；
• 在屬性欄中調(diào)整組件的背景顏色；
• 在組件中實時顯示組件的寬度。

通過用 React 來完成這個組件，還是發(fā)現(xiàn)了一些有趣的東西，比如 Framer 為你準(zhǔn)備了一個特有的 Frame 標(biāo)簽來代替我們很熟悉的 div （你仍然可以用 div 等網(wǎng)頁標(biāo)簽），它自帶的屬性就和設(shè)計面板中的 Frame 圖層一樣，可以想象除了 Frame 標(biāo)簽以外，還會有更多類似 Scroll、Draggable、Page 等之前出現(xiàn)在 Framer 中的標(biāo)簽可供使用，這一部分就要期待官方早點發(fā)布文檔了。

另外有一個疑問，如果 Framer X 官方是希望通過組件來實現(xiàn)高保真交互原型的制作，那么就必須提供一種途徑來實現(xiàn)組件之間的通信問題。不然的話我要是寫一個按鈕組件，點擊后按鈕本身倒是變成點擊態(tài)了，可是我期望的點擊按鈕后讓另一個圖片組件切換狀態(tài)卻滿足不了的話，就會顯得有些雞肋。仔細(xì)想想，這個問題還真挺難的，解決了就朝著游戲引擎又邁出了一步。

說到游戲引擎，如果你接觸過 WebGL 或 Unity 就會發(fā)現(xiàn)， 組件的整體邏輯和它們很像：通過編輯器編寫代碼，同時提供了可視化的接口可以直觀地調(diào)整所有屬性參數(shù)。

之后我又嘗試寫了一個小程序頂欄的組件，可以看到右邊加入了很多選項，可以自定義顏色，并根據(jù)背景顏色自動改變文字的顏色。從純設(shè)計師的角度講，如果不增加右邊的那些邏輯，通過設(shè)計的方式制作一個這樣的組件很快就可以完成，但如果是手寫代碼，對于大部分沒接觸過代碼的設(shè)計師來說還是有點困難的。另外由于目前版本通過 Create from Design 創(chuàng)建的組件還不支持 Copy Code，所以沒有辦法先設(shè)計好組件再導(dǎo)出編寫邏輯代碼，也許未來的正式版本會徹底打通設(shè)計和代碼吧。

五、組件庫（Store）

有了組件，自然想到會有組件庫。這也是 Framer X 非常有想象力的一個功能，之前 Framer 團隊的線下活動已經(jīng)可以看到，除了官方提供的基礎(chǔ)流行 UI 組件以外，F(xiàn)acebook、Dropbox、Airbnb 等國外知名大公司設(shè)計團隊都已經(jīng)把他們官方的組件庫接入進來了。未來每個公司都可以在上面創(chuàng)建自己的私有設(shè)計組件庫，云端共享同步。

有個值得注意的細(xì)節(jié)是，我之前裝了很多組件，但再打開新文件發(fā)現(xiàn)組件都消失了，我一開始以為是 bug，后來發(fā)現(xiàn)我理解錯了，我以為像是 App Store 那樣裝好了就永遠(yuǎn)存在本地了，但其實不是！每一個項目都是一個包，包含了你下載的組件，官方文檔也提到了 Packages 這個概念，可以通過 File - Show Packages 打開，其實就是打包好的 JavaScript 文件，目錄結(jié)構(gòu)類似 Node 項目。所以每個新項目只需要下載你需要的組件就好了。

所以你可以把 Framer X 想象成一個 React 的可視化編輯器，每一個項目，你自己創(chuàng)建的組件就是 components，通過組件庫安裝的組件就是 node_modules，而組件庫就是 npm 包管理器。

六、總體使用體驗

1. 對視覺設(shè)計師沒那么友好

雖然 Framer X 已經(jīng)從界面上拋棄了代碼，看起來像是一款專注設(shè)計的工具了，但仔細(xì)用下來發(fā)現(xiàn)，如果你想創(chuàng)建高度可定制化的靈活組件，只有手寫 React 代碼一條出路……而更糟的是，之前對于沒接觸過代碼的設(shè)計師只需要上手相對簡單的 CoffeeScript 和官方提供的語法就夠了，而現(xiàn)在則是要學(xué)原生的 JavaScript ES6，TypeScript，React 和 CSS 等等，恐怕很多人看到這里已經(jīng)在心里默默放棄了……

2. 對全棧設(shè)計師和前端（UI）工程師非常友好

其實很多會寫代碼的設(shè)計師通常并不喜歡用傳統(tǒng)的設(shè)計軟件畫圖，因為很慢很麻煩，而是喜歡在瀏覽器里面直接用 HTML 和 CSS 配合一些很成熟的框架直接手寫 demo，從這個角度講，F(xiàn)ramer X 可以說是非常完美的工具了。而對于前端工程師或 UI 工程師來說，我想未來肯定會有一大波人熱衷于寫 UI 組件發(fā)布到 Framer Store，在短短幾天內(nèi)測期間，已經(jīng)有很多實用的組件發(fā)布了。而且相比 Sketch 的插件生態(tài)，畢竟寫 UI 組件肯定比寫插件門檻要低很多，人人都可以寫出很漂亮的 UI 組件。

3. 對交互設(shè)計師和產(chǎn)品經(jīng)理非常友好

可以想象到，未來組件越來越完善的時候，通過 Framer X 可以非常方便的拼出一個高保真、可交互、完全真實數(shù)據(jù)的原型圖，或者說就是最終設(shè)計稿。不僅視覺設(shè)計師，交互設(shè)計師，對任何角色的人來說都很容易上手。

通過新版 Framer X 的設(shè)計和功能上可以感受到，F(xiàn)ramer 團隊無非是想表達一個核心理念：設(shè)計就是代碼，代碼就是設(shè)計。兩者是互通有無并且可以完全打通的。這也是近幾年國外互聯(lián)網(wǎng)公司積極推動的事情。但同時這里面也有個很大的坑，就是 Framer X 僅支持 React，如果你的團隊前端技術(shù)棧也是 React 還好，如果不是怎么辦？如果你更喜歡用 Vue 呢？難道要寫兩遍前端代碼？顯然是不現(xiàn)實的。

總的來說，F(xiàn)ramer X 是一款非常另類且極具顛覆性的設(shè)計工具，至于能不能流行甚至普及開來，前景可能并不樂觀。也許很多小而美的團隊會比較愿意接受并嘗試，但對于大部分公司和團隊來說，學(xué)習(xí)和切換整個工作流的成本都非常高。很多問題如果解決不了，也許未來只會淪為一款快速制作高保真原型的交互設(shè)計軟件。

4. 相關(guān)資源

視頻教程：https://www.youtube.com/playlist?reload=9&list=PL9p5auxyrweNVMAzsrEd9DmsM25U8ij1M

官方案例：https://framer.com/x/examples

官方文檔：https://framer.gitbook.io/framer/

歡迎關(guān)注作者的微信公眾號：「DEX Group」

「值得設(shè)計師關(guān)注的工具」

• 《用Framer的實例，說說設(shè)計師學(xué)習(xí)代碼的那些事》
• 《Framer 大更新！可能是目前最適合設(shè)計師學(xué)習(xí)代碼的一款原型工具》
• 《這7個UI/UX應(yīng)用，是2018年最值得關(guān)注的設(shè)計師工具》