早在 6 月份， Framer 官方就在網站上放出了新產品 Framer X 的訊息，並表明這是一個“突破規則的產品，
能夠更好地融合設計和開發
”。同時，這款產品最開始的一條 Slogan 是 “React meets design” ，React 是 Facebook 2013 年開源的一款元件化構建介面框架，主要特點是用資料維護介面狀態。這一切都給我們很豐富的想象空間。
終於，我在這周收到了 Framer X 的測試版，簡單把玩了一下，試著寫一下我的感受。
先丟擲結論：
Framer X 更像一個設計工具了，佈局、元件、路徑這些功能都很完善；但是對於想要實現高保真可互動原型的人來說，卻更難了，因為要學會使用 React 構建元件；不過它卻更接近一個可以構建設計系統的設計工具了。
好用的特性
首先說一下它相比於其它設計工具我覺得更好用的一些特性。
Stack
第一個就是 Stack ，Stack 翻譯成中文是“堆、棧”，這裡的 Stack 其實就是前端裡的彈性佈局（ Flex Box ），有點類似於 Sketch 的 Paddy 外掛。有了這個功能，你可以很簡單地進行多個元素的排列。如下圖，先畫出一個 Stack ，再把其他元素拖進去就會自動對齊排列，能大大節省時間。
更方便的是，當你拖動 Stack 中的元素時，他們會自動改變順序。
元件商店
Framer X 支援以兩種方式建立元件：從設計區建立和透過程式碼建立。而透過程式碼建立的元件更加強大，可以實現各種互動效果（後面詳細介紹）。
Framer X 內建了一個元件商店，支援設計師們將自己透過程式碼建立的元件上傳，供其他設計師使用。說到這個我不禁想到了 Sketch 的外掛生態，可以說 Sketch 之所以這麼受歡迎，其使用者社群貢獻的大量外掛功不可沒，但是 Sketch 好像並不特別重視。
Framer X 內建的元件商店，聚集了使用者建立的各種元件，方便其他使用者拿來就用，不用重複造輪子。以後元件會逐漸增多，生態慢慢發展起來，這些即開即用的元件可以大大提升我們的工作效率。何況這些元件都是可以互動的，可以組合起來實現一個極其高保真的設計。
我最看好的功能
最後詳細的介紹一下在 Framer X 中我最看好的功能——使用程式碼製作元件。
簡介
上文提到 Framer X 元件有兩種，在設計區建立的元件和 Sketch Symbol 類似，而另外一種就是使用程式碼建立的元件。
Framer 最開始是沒有設計模式的，所有的介面都要使用程式碼實現。後來比較穩定的版本包含了設計模式和程式碼模式，透過程式碼去操作設計模式下的圖形。而在 Framer X 中，則沒有了程式碼模式，但是支援透過其他程式碼編輯器來編寫元件，嵌入設計區。
當你要使用程式碼建立元件時，Framer X 會使用第三方程式碼編輯器（如果沒有安裝 VS Code 則會推薦你安裝）開啟一個 React 模板檔案，裡面寫好了一些基本程式碼。我們現在建立一個 Button 試試看，下圖左邊就是這個元件在設計區的樣子，右邊是其程式碼。右邊的程式碼看起來有些難懂，後面會簡要介紹。
React 原理
首先回顧一下前端介面實現的傳統方式：用 HTML 繪製基本結構，用 CSS 新增樣式，用 JS 控制邏輯，即透過 JS 改變 HTML 或者 CSS 來響應使用者的操作，從而改變介面狀態。
在 React 中則是透過資料維護介面狀態的。每個 React 元件內都維護了一些資料，這些資料對應介面中的一些內容，想要改變介面狀態則需要改變這些資料。
拿官方的 StatusBar 元件舉例。這個元件的資料包含了外部屬性（ Props ）和內部狀態（ State ）。所謂外部屬性就是透過外部資料來調節它，StatusBar 有三個外部屬性： Carrier 、Appearance 、Battery ，分別對應著介面的運營商、外觀（暗色或亮色）、電量這幾個介面狀態。其內部維護了一個 State ，即顯示時間。而每個元件都有一個生命週期，包含初始化、已經裝載、渲染等等。其中 render （渲染）所做的工作就是隨時觀察 Props 和 State 變化，並跟著重新渲染元件介面。
我們再透過上述最簡單的元件的程式碼來對應一下這些概念。
這裡只做一個簡要介紹，React 的概念細節繁多，具體的瞭解入門可以參考文末的文章。
為什麼看好它？
最後說一說我為什麼很看好這個功能。
從上面的文字中可以看出，雖然用程式碼實現元件能做出更加複雜逼真的效果，但對設計師的門檻也更高了（需要很紮實的 JS 基礎，能理解 React 實現方式，還要學會 TypeScript ）。那我為什麼會看好它呢？
很多設計師認為，像 Framer 這一類要求設計師具有程式碼能力的設計工具的目標就是匯出程式碼，給工程師複用。在我看來這是錯誤的，要知道“術業有專攻”，不要以為會用 JS 寫幾個動效你的程式碼就能夠作為工程程式碼了，其實還差得遠。
那設計師學程式設計的意義何在呢？
我認為是為了構建“設計系統”
，當然，知道技術邊界，擁有程式碼思維是這個過程中額外獲得的。
在開發圈有一句話，“懶出效率是工程師的美德”。我們身邊的程式設計師經常會寫一些指令碼去替代體力工作，但是我們設計師卻一直在做很多重複性勞動。要想提高效率，使用程式碼是很好的一種方式。
最近流行的“設計系統”概念，其實就是為了提高設計效率。回想一下我們現在使用的 Sketch Symbol ，想要製作一套元件庫很容易，但是想要做出一套包含豐富可調節屬性的元件庫卻不容易，需要按照命名規範組合，得預先想好各種可能的組合。
但是這件事對於程式碼來說卻是非常簡單和自然的。在 Framer X 中透過程式碼做出的元件，可以給它設定各種屬性，這些屬性可以和一般圖層屬性一樣調節。如下圖，StatusBar 元件的屬性可以在 Framer X 右側面板中調節，就像調節一個圖層的樣式一樣簡單。
如果你有關注 Airbnb 的設計部落格，應該會注意到他們正在使用程式碼構建設計系統。
他們曾經在自己的開源工具 React Sketch。app 介紹中說過：
在 Sketch 中管理設計系統資源是很複雜的——容易出錯且很耗費時間。
而這套工具使用程式碼來管理設計系統資源，它具有資料來源唯一（改動元件程式碼，所有設計圖檔案中的元件更新）、可使用真實資料等特點。
而這一切，在 Framer X 中則更簡單了一些。現在的 Framer X 程式碼元件，允許我們自定義元件邏輯，可以在設計區直接調節屬性，在預覽時還是真實可互動的。這讓我們距離構建一個真正的設計系統更近了一步。
React 入門資料
阮一峰：React 入門例項教程
完全在瀏覽器中開發React應用
awesome-react 中文版
推薦閱讀
程式碼，一種看不見的設計工具
火鍋與響應式設計
