早在6月份， Framer 官方就在網(wǎng)站上放出了新產(chǎn)品 Framer X 的消息，并表明這是一個(gè)「突破規(guī)則的產(chǎn)品，能夠更好地融合設(shè)計(jì)和開發(fā)」。同時(shí)，這款產(chǎn)品最開始的一條 Slogan 是「React meets design」，React 是 Facebook 2013 年開源的一款組件化構(gòu)建界面框架，主要特點(diǎn)是用數(shù)據(jù)維護(hù)界面狀態(tài)。這一切都給我們很豐富的想象空間。

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

先拋出結(jié)論：Framer X 更像一個(gè)設(shè)計(jì)工具了，布局、組件、路徑這些功能都很完善；但是對于想要實(shí)現(xiàn)高保真可交互原型的人來說，卻更難了，因?yàn)橐獙W(xué)會(huì)使用 React 構(gòu)建組件；不過它卻更接近一個(gè)可以構(gòu)建設(shè)計(jì)系統(tǒng)的設(shè)計(jì)工具了。

一、好用的特性

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

1. Stack

第一個(gè)就是 Stack ，Stack 翻譯成中文是「堆、?！梗@里的 Stack 其實(shí)就是前端里的彈性布局（Flex Box），有點(diǎn)類似于 Sketch 的 Paddy 插件。有了這個(gè)功能，你可以很簡單地進(jìn)行多個(gè)元素的排列。如下圖，先畫出一個(gè) Stack ，再把其他元素拖進(jìn)去就會(huì)自動(dòng)對齊排列，能大大節(jié)省時(shí)間。

更方便的是，當(dāng)你拖動(dòng) Stack 中的元素時(shí)，他們會(huì)自動(dòng)改變順序。

2. 組件商店

Framer X 支持以兩種方式創(chuàng)建組件：從設(shè)計(jì)區(qū)創(chuàng)建和通過代碼創(chuàng)建。而通過代碼創(chuàng)建的組件更加強(qiáng)大，可以實(shí)現(xiàn)各種交互效果（后面詳細(xì)介紹）。

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

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

二、我最看好的功能

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

1. 簡介

上文提到 Framer X 組件有兩種，在設(shè)計(jì)區(qū)創(chuàng)建的組件和 Sketch Symbol 類似，而另外一種就是使用代碼創(chuàng)建的組件。

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

當(dāng)你要使用代碼創(chuàng)建組件時(shí)，F(xiàn)ramer X 會(huì)使用第三方代碼編輯器（如果沒有安裝 VS Code 則會(huì)推薦你安裝）打開一個(gè) React 模板文件，里面寫好了一些基本代碼。我們現(xiàn)在創(chuàng)建一個(gè) Button 試試看，下圖左邊就是這個(gè)組件在設(shè)計(jì)區(qū)的樣子，右邊是其代碼。右邊的代碼看起來有些難懂，后面會(huì)簡要介紹。

2. React 原理

首先回顧一下前端界面實(shí)現(xiàn)的傳統(tǒng)方式：用 HTML 繪制基本結(jié)構(gòu)，用 CSS 添加樣式，用 JS 控制邏輯，即通過 JS 改變 HTML 或者 CSS 來響應(yīng)用戶的操作，從而改變界面狀態(tài)。

在 React 中則是通過數(shù)據(jù)維護(hù)界面狀態(tài)的。每個(gè) React 組件內(nèi)都維護(hù)了一些數(shù)據(jù)，這些數(shù)據(jù)對應(yīng)界面中的一些內(nèi)容，想要改變界面狀態(tài)則需要改變這些數(shù)據(jù)。

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

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

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

3. 為什么看好它？

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

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

很多設(shè)計(jì)師認(rèn)為，像 Framer 這一類要求設(shè)計(jì)師具有代碼能力的設(shè)計(jì)工具的目標(biāo)就是導(dǎo)出代碼，給工程師復(fù)用。在我看來這是錯(cuò)誤的，要知道「術(shù)業(yè)有專攻」，不要以為會(huì)用 JS 寫幾個(gè)動(dòng)效你的代碼就能夠作為工程代碼了，其實(shí)還差得遠(yuǎn)。

那設(shè)計(jì)師學(xué)編程的意義何在呢？我認(rèn)為是為了構(gòu)建「設(shè)計(jì)系統(tǒng)」，當(dāng)然，知道技術(shù)邊界，擁有代碼思維是這個(gè)過程中額外獲得的。

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

最近流行的「設(shè)計(jì)系統(tǒng)」概念，其實(shí)就是為了提高設(shè)計(jì)效率。回想一下我們現(xiàn)在使用的 Sketch Symbol ，想要制作一套組件庫很容易，但是想要做出一套包含豐富可調(diào)節(jié)屬性的組件庫卻不容易，需要按照命名規(guī)范組合，得預(yù)先想好各種可能的組合。

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

如果你有關(guān)注 Airbnb 的設(shè)計(jì)博客，應(yīng)該會(huì)注意到他們正在使用代碼構(gòu)建設(shè)計(jì)系統(tǒng)。

他們曾經(jīng)在自己的開源工具 React Sketch.app 介紹中說過：在 Sketch 中管理設(shè)計(jì)系統(tǒng)資源是很復(fù)雜的——容易出錯(cuò)且很耗費(fèi)時(shí)間。而這套工具使用代碼來管理設(shè)計(jì)系統(tǒng)資源，它具有數(shù)據(jù)源唯一（改動(dòng)組件代碼，所有設(shè)計(jì)圖文件中的組件更新）、可使用真實(shí)數(shù)據(jù)等特點(diǎn)。

而這一切，在 Framer X 中則更簡單了一些?，F(xiàn)在的 Framer X 代碼組件，允許我們自定義組件邏輯，可以在設(shè)計(jì)區(qū)直接調(diào)節(jié)屬性，在預(yù)覽時(shí)還是真實(shí)可交互的。這讓我們距離構(gòu)建一個(gè)真正的設(shè)計(jì)系統(tǒng)更近了一步。

4. React 入門資料

• React 入門實(shí)例教程??阮一峰
• 完全在瀏覽器中開發(fā)React應(yīng)用
• awesome-react 中文版

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

「Framer 好文合集」

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