早在6月份， Framer 官方就在網站上放出了新產品 Framer X 的消息，并表明這是一個「突破規則的產品，能夠更好地融合設計和開發」。同時，這款產品最開始的一條 Slogan 是「React meets design」，React 是 Facebook 2013 年開源的一款組件化構建界面框架，主要特點是用數據維護界面狀態。這一切都給我們很豐富的想象空間。

終于，我在這周收到了 Framer X 的測試版，簡單把玩了一下，試著寫一下我的感受。

先拋出結論：Framer X 更像一個設計工具了，布局、組件、路徑這些功能都很完善；但是對于想要實現高保真可交互原型的人來說，卻更難了，因為要學會使用 React 構建組件；不過它卻更接近一個可以構建設計系統的設計工具了。

一、好用的特性

首先說一下它相比于其它設計工具我覺得更好用的一些特性。

1. Stack

第一個就是 Stack ，Stack 翻譯成中文是「堆、棧」，這里的 Stack 其實就是前端里的彈性布局（Flex Box），有點類似于 Sketch 的 Paddy 插件。有了這個功能，你可以很簡單地進行多個元素的排列。如下圖，先畫出一個 Stack ，再把其他元素拖進去就會自動對齊排列，能大大節省時間。

更方便的是，當你拖動 Stack 中的元素時，他們會自動改變順序。

2. 組件商店

Framer X 支持以兩種方式創建組件：從設計區創建和通過代碼創建。而通過代碼創建的組件更加強大，可以實現各種交互效果（后面詳細介紹）。

Framer X 內置了一個組件商店，支持設計師們將自己通過代碼創建的組件上傳，供其他設計師使用。說到這個我不禁想到了 Sketch 的插件生態，可以說 Sketch 之所以這么受歡迎，其用戶社區貢獻的大量插件功不可沒，但是 Sketch 好像并不特別重視。

Framer X 內置的組件商店，聚集了用戶創建的各種組件，方便其他用戶拿來就用，不用重復造輪子。以后組件會逐漸增多，生態慢慢發展起來，這些即開即用的組件可以大大提升我們的工作效率。何況這些組件都是可以交互的，可以組合起來實現一個極其高保真的設計。

二、我最看好的功能

最后詳細的介紹一下在 Framer X 中我最看好的功能——使用代碼制作組件。

1. 簡介

上文提到 Framer X 組件有兩種，在設計區創建的組件和 Sketch Symbol 類似，而另外一種就是使用代碼創建的組件。

Framer 最開始是沒有設計模式的，所有的界面都要使用代碼實現。后來比較穩定的版本包含了設計模式和代碼模式，通過代碼去操作設計模式下的圖形。而在 Framer X 中，則沒有了代碼模式，但是支持通過其他代碼編輯器來編寫組件，嵌入設計區。

當你要使用代碼創建組件時，Framer X 會使用第三方代碼編輯器（如果沒有安裝 VS Code 則會推薦你安裝）打開一個 React 模板文件，里面寫好了一些基本代碼。我們現在創建一個 Button 試試看，下圖左邊就是這個組件在設計區的樣子，右邊是其代碼。右邊的代碼看起來有些難懂，后面會簡要介紹。

2. React 原理

首先回顧一下前端界面實現的傳統方式：用 HTML 繪制基本結構，用 CSS 添加樣式，用 JS 控制邏輯，即通過 JS 改變 HTML 或者 CSS 來響應用戶的操作，從而改變界面狀態。

在 React 中則是通過數據維護界面狀態的。每個 React 組件內都維護了一些數據，這些數據對應界面中的一些內容，想要改變界面狀態則需要改變這些數據。

拿官方的 StatusBar 組件舉例。這個組件的數據包含了外部屬性（ Props ）和內部狀態（ State ）。所謂外部屬性就是通過外部數據來調節它，StatusBar 有三個外部屬性： Carrier 、Appearance 、Battery，分別對應著界面的運營商、外觀（暗色或亮色）、電量這幾個界面狀態。其內部維護了一個 State ，即顯示時間。而每個組件都有一個生命周期，包含初始化、已經裝載、渲染等等。其中 render（渲染）所做的工作就是隨時觀察 Props 和 State 變化，并跟著重新渲染組件界面。

我們再通過上述最簡單的組件的代碼來對應一下這些概念。

這里只做一個簡要介紹，React 的概念細節繁多，具體的了解入門可以參考文末的文章。

3. 為什么看好它？

最后說一說我為什么很看好這個功能。

從上面的文字中可以看出，雖然用代碼實現組件能做出更加復雜逼真的效果，但對設計師的門檻也更高了（需要很扎實的 JS 基礎，能理解 React 實現方式，還要學會 TypeScript ）。那我為什么會看好它呢？

很多設計師認為，像 Framer 這一類要求設計師具有代碼能力的設計工具的目標就是導出代碼，給工程師復用。在我看來這是錯誤的，要知道「術業有專攻」，不要以為會用 JS 寫幾個動效你的代碼就能夠作為工程代碼了，其實還差得遠。

那設計師學編程的意義何在呢？我認為是為了構建「設計系統」，當然，知道技術邊界，擁有代碼思維是這個過程中額外獲得的。

在開發圈有一句話，「懶出效率是工程師的美德」。我們身邊的程序員經常會寫一些腳本去替代體力工作，但是我們設計師卻一直在做很多重復性勞動。要想提高效率，使用代碼是很好的一種方式。

最近流行的「設計系統」概念，其實就是為了提高設計效率。回想一下我們現在使用的 Sketch Symbol ，想要制作一套組件庫很容易，但是想要做出一套包含豐富可調節屬性的組件庫卻不容易，需要按照命名規范組合，得預先想好各種可能的組合。

但是這件事對于代碼來說卻是非常簡單和自然的。在 Framer X 中通過代碼做出的組件，可以給它設定各種屬性，這些屬性可以和一般圖層屬性一樣調節。如下圖，StatusBar 組件的屬性可以在 Framer X 右側面板中調節，就像調節一個圖層的樣式一樣簡單。

如果你有關注 Airbnb 的設計博客，應該會注意到他們正在使用代碼構建設計系統。

他們曾經在自己的開源工具 React Sketch.app 介紹中說過：在 Sketch 中管理設計系統資源是很復雜的——容易出錯且很耗費時間。而這套工具使用代碼來管理設計系統資源，它具有數據源唯一（改動組件代碼，所有設計圖文件中的組件更新）、可使用真實數據等特點。

而這一切，在 Framer X 中則更簡單了一些。現在的 Framer X 代碼組件，允許我們自定義組件邏輯，可以在設計區直接調節屬性，在預覽時還是真實可交互的。這讓我們距離構建一個真正的設計系統更近了一步。

4. React 入門資料

• React 入門實例教程??阮一峰
• 完全在瀏覽器中開發React應用
• awesome-react 中文版

歡迎關注作者的微信公眾號：「codesigner」

「Framer 好文合集」

• 《超火的設計神器！大概是東半球最詳盡的 Framer X 深度評測》
• 《用Framer的實例，說說設計師學習代碼的那些事》
• 《Framer 大更新！可能是目前最適合設計師學習代碼的一款原型工具》