最近很火的設計神器 Framer X 剛剛邀請了一部分用戶內測，很多設計師都好奇這個軟件有多好用，今天由3位設計師（丁一、鐘二信、Ray）共同撰寫的這篇文章，帶你搶先閱讀可能是東半球最詳盡的評測，趕緊來看！
一、Framer X 與 Framer 的區別以及新變化
1. 沒有內置編輯器
可以看到這次新版的 Framer X 更加討好設計師了，拋棄了原有的代碼編輯模塊，只保留了設計面板。
2. 徹底拋棄 CoffeeScript
2013年 Framer 剛面世的時候，CoffeeScript 還比較流行，前端的發展也不像現在這樣繁榮，作者當時選用 CoffeeScript 也是考慮到語法比較簡單，對設計師友好。但到了2018年已經沒人再用 CoffeeScript 了，而且隨著前端領域的不斷發展變化，如今 ES6 可以做到的很多事情用 CoffeeScript 是永遠也無法做到的。
3. 全面擁抱 React 和 ES6
新版使用 React 和 TypeScript 寫 UI 組件，也可以直接使用 ES6。
4. UI 組件化
組件化是 Framer X 最大的變化也是最核心的理念，你在界面上看到的所有東西背后其實都是一個個 React 組件。
5. 組件商店
Framer X 是第一款擁有內置設計資源商店的設計軟件，不僅可以下載公開的組件，還可以管理和同步團隊內部的組件，想象空間非常大。
二、布局（Layout）
1. Frames
Frames 是最基礎的布局工具，是一種可以包含界面和設計元素的容器，目前 Framer X 和 Figma 都采用了這種方式。Frame 是一個通用的容器，同時也扮演了 Artboard 的角色，與 Sketch 的 Artboard 不同的是，Frame 支持無限嵌套，而且它的好處是，當畫圖標等元素的時候，它可以擁有一個 Bounding Box 來固定一個高寬統一的尺寸，這一點上比 Sketch 要更加優秀。
2. Stacks
這次對于布局功能最大的調整，除了可以將長寬設置為百分比，就是增加了這個 Stacks 功能。它提供了橫向和縱向的線性布局功能，當多個圖層被放到同一個 Stack 中時，Stack 會自動對這些子圖層進行布局約束。另外 Stack 也可以像 Frames 一樣支持嵌套，可以把多個 Stack 嵌套在一個 Stack 里面。
從目前的版本看，Stack 可以調節的布局功能有：1. 排列的方向 2.選擇子圖層的分布規則 3. 設置子圖層之間的間隙和整個容器的 Padding。總的來說是能解決之前在 Sketch Layout 中多個尺寸有差異元素的排列問題，如： Cell 高度不等的列表、Tab 選擇器等。
從 Adobe XD 到 Framer X，可以看到 Stack 這個布局功能逐漸變成了所有設計軟件的一個標配了，Figma 也已經在內測這個功能中，相信很快就可以使用了。目前如果想在 Sketch 中得到類似的功能則需要用到 Anima 插件中的 Stack Groups 功能。
三、交互（Interactive）
目前 Framer X 可以建立 Link 和 Scroll 兩種頁面交互。
1. Link
Link 與 Sketch 中的 Prototyping 功能如出一轍，其目的都是讓我們在預覽設計的時候可以從一個頁面跳轉到另一個頁面以體驗 user flow，但它和 Sketch 有一些差異。在頁面的轉場動畫上，Framer X 更勝一籌，Sketch 目前只支持上下左右四個方向的 Push 動畫，而 Framer X 不僅有 Push 轉場動畫，還有非常實用的 Overlay、Modal 轉場。以往我們在 Sketch 中做設計的時候，經常會遇到需要設計一些覆蓋于當前頁面的菜單或彈窗而復制這個 Artboard，這是非常不便于修改維護的。在 Framer X 中就只需要單獨設計這個元素，就可以在預覽設計的時候通過這兩種轉場來顯示。
2. Scroll
設計工作中我們會遇到一些很長的滾動頁面，在 Sketch 中我們可以把那些不需要跟隨頁面滾動的元素，例如 Navigation Bar、Tab Bar 等設置為固定。而在 Framer X 中我們可以在頁面中指定一個滾動區域然后單獨設計滾動的內容，選項上面還可以設置橫向或/和縱向滾動方向。
四、組件（Components）
這是 Framer X 最激動人心也是最核心的功能了。有了組件，設計界面就像是搭積木玩樂高一樣簡單。這也是現代界面設計中的 Design Systems。
組件分兩種，一種是設計組件，一種是代碼組件。
1. 設計組件
設計組件和 Sketch 里面的 Symbols，Figma 里面的 Components 邏輯基本一致，都是直接在設計畫布中直接通過設計好的元素來創建，使用時有 Master 和 Instance 兩部分，顧名思義 Master 就是父組件，而 Instance 則是通過 Master 復制出來的副本，當改變 Master 時，所有 Instance 也會跟著改變。你可以對引用的 Instance 中的圖層進行修改，針對修改后已經和 Master 中不同的圖層，用戶可以選擇是將 Master 更新，還是恢復為和 Master 一致。不過目前版本的這個功能還很簡陋，基本就是一個圖層組，并沒有提供類似 Overrides 的選項，也不能嵌套多個 Component 來進行更豐富的調整，而在代碼組件中可以實現更智能更復雜的組件選項。
2. 代碼組件
代碼組件通過代碼創建組件，則真正做到了高度可定制化，你可以用原生的 React 手寫組件，寫邏輯代碼。Framer X 還提供了一個 PropertyControls 的接口，通過它就可以自定義組件的屬性，而這些屬性會變成可視化界面，直接嵌入到右邊的屬性欄，非常方便。
比如 logo 組件，可以直接調用 Clearbit 的 API，只需要更改公司名稱就會自動替換對應公司的 logo 了。
頭像組件，調用了 uinames.com 的 API，當你把國家改成 China 或 Japan 時，不僅頭像會自動更換，連名字也自動換成了中文名和日本名！
Spotify 組件，也是通過官方 API，填寫任意專輯或歌曲的 URL 獲得相應的結果。
Grid 組件， 結合 Link 功能可以做到更多事情。
3. 創建一個 Code 組件
想要看到別人組件中的代碼會有些繁瑣，需要在插入組件的時候右鍵點擊「Copy Code」，然后粘貼到你自己的代碼編輯器中（這個方式讓我很震驚，難道一個組件只能寫在一個文件里？）。
在參考了 Example Kit 里的代碼后，嘗試寫了一個簡單的組件：Hello world ，它可以完成一些簡單的功能比如：
- 在屬性欄中編輯組件中的文案；
- 在屬性欄中調整組件的背景顏色；
- 在組件中實時顯示組件的寬度。
通過用 React 來完成這個組件，還是發現了一些有趣的東西，比如 Framer 為你準備了一個特有的 Frame 標簽來代替我們很熟悉的 div （你仍然可以用 div 等網頁標簽），它自帶的屬性就和設計面板中的 Frame 圖層一樣，可以想象除了 Frame 標簽以外，還會有更多類似 Scroll、Draggable、Page 等之前出現在 Framer 中的標簽可供使用，這一部分就要期待官方早點發布文檔了。
另外有一個疑問，如果 Framer X 官方是希望通過組件來實現高保真交互原型的制作，那么就必須提供一種途徑來實現組件之間的通信問題。不然的話我要是寫一個按鈕組件，點擊后按鈕本身倒是變成點擊態了，可是我期望的點擊按鈕后讓另一個圖片組件切換狀態卻滿足不了的話，就會顯得有些雞肋。仔細想想，這個問題還真挺難的，解決了就朝著游戲引擎又邁出了一步。
說到游戲引擎，如果你接觸過 WebGL 或 Unity 就會發現， 組件的整體邏輯和它們很像：通過編輯器編寫代碼，同時提供了可視化的接口可以直觀地調整所有屬性參數。
之后我又嘗試寫了一個小程序頂欄的組件，可以看到右邊加入了很多選項，可以自定義顏色，并根據背景顏色自動改變文字的顏色。從純設計師的角度講，如果不增加右邊的那些邏輯，通過設計的方式制作一個這樣的組件很快就可以完成，但如果是手寫代碼，對于大部分沒接觸過代碼的設計師來說還是有點困難的。另外由于目前版本通過 Create from Design 創建的組件還不支持 Copy Code，所以沒有辦法先設計好組件再導出編寫邏輯代碼，也許未來的正式版本會徹底打通設計和代碼吧。
五、組件庫（Store）
有了組件，自然想到會有組件庫。這也是 Framer X 非常有想象力的一個功能，之前 Framer 團隊的線下活動已經可以看到，除了官方提供的基礎流行 UI 組件以外，Facebook、Dropbox、Airbnb 等國外知名大公司設計團隊都已經把他們官方的組件庫接入進來了。未來每個公司都可以在上面創建自己的私有設計組件庫，云端共享同步。
有個值得注意的細節是，我之前裝了很多組件，但再打開新文件發現組件都消失了，我一開始以為是 bug，后來發現我理解錯了，我以為像是 App Store 那樣裝好了就永遠存在本地了，但其實不是！每一個項目都是一個包，包含了你下載的組件，官方文檔也提到了 Packages 這個概念，可以通過 File - Show Packages 打開，其實就是打包好的 JavaScript 文件，目錄結構類似 Node 項目。所以每個新項目只需要下載你需要的組件就好了。
所以你可以把 Framer X 想象成一個 React 的可視化編輯器，每一個項目，你自己創建的組件就是 components，通過組件庫安裝的組件就是 node_modules，而組件庫就是 npm 包管理器。
六、總體使用體驗
1. 對視覺設計師沒那么友好
雖然 Framer X 已經從界面上拋棄了代碼，看起來像是一款專注設計的工具了，但仔細用下來發現，如果你想創建高度可定制化的靈活組件，只有手寫 React 代碼一條出路……而更糟的是，之前對于沒接觸過代碼的設計師只需要上手相對簡單的 CoffeeScript 和官方提供的語法就夠了，而現在則是要學原生的 JavaScript ES6，TypeScript，React 和 CSS 等等，恐怕很多人看到這里已經在心里默默放棄了……
2. 對全棧設計師和前端（UI）工程師非常友好
其實很多會寫代碼的設計師通常并不喜歡用傳統的設計軟件畫圖，因為很慢很麻煩，而是喜歡在瀏覽器里面直接用 HTML 和 CSS 配合一些很成熟的框架直接手寫 demo，從這個角度講，Framer X 可以說是非常完美的工具了。而對于前端工程師或 UI 工程師來說，我想未來肯定會有一大波人熱衷于寫 UI 組件發布到 Framer Store，在短短幾天內測期間，已經有很多實用的組件發布了。而且相比 Sketch 的插件生態，畢竟寫 UI 組件肯定比寫插件門檻要低很多，人人都可以寫出很漂亮的 UI 組件。
3. 對交互設計師和產品經理非常友好
可以想象到，未來組件越來越完善的時候，通過 Framer X 可以非常方便的拼出一個高保真、可交互、完全真實數據的原型圖，或者說就是最終設計稿。不僅視覺設計師，交互設計師，對任何角色的人來說都很容易上手。
通過新版 Framer X 的設計和功能上可以感受到，Framer 團隊無非是想表達一個核心理念：設計就是代碼，代碼就是設計。兩者是互通有無并且可以完全打通的。這也是近幾年國外互聯網公司積極推動的事情。但同時這里面也有個很大的坑，就是 Framer X 僅支持 React，如果你的團隊前端技術棧也是 React 還好，如果不是怎么辦？如果你更喜歡用 Vue 呢？難道要寫兩遍前端代碼？顯然是不現實的。
總的來說，Framer X 是一款非常另類且極具顛覆性的設計工具，至于能不能流行甚至普及開來，前景可能并不樂觀。也許很多小而美的團隊會比較愿意接受并嘗試，但對于大部分公司和團隊來說，學習和切換整個工作流的成本都非常高。很多問題如果解決不了，也許未來只會淪為一款快速制作高保真原型的交互設計軟件。
4. 相關資源
視頻教程：https://www.youtube.com/playlist?reload=9&list=PL9p5auxyrweNVMAzsrEd9DmsM25U8ij1M
官方案例：https://framer.com/x/examples
官方文檔：https://framer.gitbook.io/framer/
歡迎關注作者的微信公眾號：「DEX Group」
「值得設計師關注的工具」
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
發評論！每天贏獎品
點擊 登錄 后，在評論區留言，系統會隨機派送獎品
2012年成立至今，是國內備受歡迎的設計師平臺，提供獎品贊助 聯系我們
AI輔助海報設計101例
已累計誕生 737 位幸運星
發表評論 為下方 25 條評論點贊，解鎖好運彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓