從費格馬到無碼 — Figma to Code工具大解碼

隨者Sketch（2010）、Adobe XD（2016）、Figma（2016）等等的向量圖形編輯器（Vector Graphics Editor, VGE）誕生後，UI設計邁向了一個全新階段。這些工具除了能使UI設計達到系統化、模組化的高效率開發以外，也同時讓前端工程師有更完整的樣式（Style）開發參照，使得“從設計到開發”（Design to Code）得以更順利的接軌。

然而，從設計到開發的腳步，並沒有因此停歇。基於效率極大化的企圖心，無碼（No-Code）的概念順應而生。由於上述的工具皆有開放式API（Open API）的支援，驅使了許多開發團隊躍躍欲試，近幾年在網路平台上產生了一些企圖更便利的實現Design to Code方案。我們從中選擇了幾個支援Figma的相關工具來實際測試，看看他們是否可以直接實現 Figma to Code的野望。

這是我們第一個測試的工具，由 AWS Amplify 推出用來幫助串連前後端的方案。使用時不需要另外在Figma安裝Plug-in，只需要登入AWS Amplify平台，然後貼上Figma專案的URL，就能夠連結 Figma 的檔案，將設計稿中的元件轉換成 React component 使用，轉換後的元件，可以再透過AWS Amplify的其他功能，讓轉出的元件與資料庫銜接。亞馬遜公司（Amazon）不只是想做到從設計轉成前端畫面，而是希望實現從設計到資料銜接的一條龍解決方案。

因為是將設計中的區塊轉換成 React component 去做使用，所以在產出整個網站的時候，就會需要自己動手寫程式去把這些元件用在我們的網頁之中。在 Figma 設計稿的製作上，Amplify Studio限制也比較多，像是元件中不可以包含其他更小的元件（舉例來說，你不能在 Hero section 中放入按鈕）只能將該區塊轉換為 component slot 再去從程式碼調整，以及響應式網頁（RWD）有時候要在屬性欄位新增條件式才能達成。

雖然Amplify Studio額外在Figma上有分享官方Plug-in，但主要是針對主題和Design Tokens去做改變，比如說你可以更改設計的主色及輔色、或是字體大小（但不能更改字型）、間距等等，使用上和 Material Design 的Plug-in類似。在更新之後可以更改的東西蠻多的，但在使用上還需要再多寫幾行程式（且如果用在 Amplify UI 以外的元件會出現錯誤）所以我們也放棄使用。

目前網路上關於 Amplify Studio 的資料也比較少，很多東西只能從官方文件中去解讀，想要更完整的使用，必須要熟悉React的程式語法，甚至要對於資料庫架構有一點基本概念。整體來說，Amplify Studio比較偏向是針對前端工程師為主要使用者的工具。同時就目前的使用狀況來看，僅能實現非常局部的設計模組的銜接，距離完整的轉出一個網站，還有一大段距離。

Unify 是可以直接生成 React code的 Figma Plug-in，也可以用 code sandbox 開啟。和 Amplify studio 一樣，主要是以生成 component 為主，我們可以下載程式碼或複製到專案之後再去組合成網頁。

但 Unify 一次只能生成一個元件，且在各個元件的調整上必須要從一大堆程式碼中找到想要的區塊去做修改（技術含量太高），稍微不太符合此次尋找的目標，因此就沒有繼續深入研究。

Anima 是一個可以將 Figma 中的設計直接轉成程式碼的插件，主要的操作像是新增UI點擊互動或是新增響應式網頁的斷點（Breakpoints）都可以在 Figma Plug-in 中透過點擊完成，且可以在 plugin 中直接預覽成果，提供了一個快速的做出高保真原型並測試交互效果的方法。

在使用上，我們只要在 Figma 中選擇想要的元件，就可以直接在 Anima 的 Plug-in 中做修改，像是我們可以為按鈕新增 hover 的效果，預設的轉換是將按鈕放大，如果會一些 CSS 的話也可以自行新增屬性，比如說改變按鈕顏色。

除了按鈕的 hover 狀態，也可以將文字區塊改成文字輸入格，在轉換成 HTML 之後，就會直接使用表單元件 <input> 標籤。

在製作響應式網頁時，可以一次新增不同的螢幕尺寸，能夠為不同的裝置大小打造出合適的內容。Anima 也會將你在 Figma prototype 中設定的點擊事件、動畫、頁面連接一起匯入，這點我們覺得超級方便，所有的東西都跟 Figma 中設定的一樣，不用再另外調整。

Anima Plug-in 中提供了許多基本的交互方式，像是新增按鈕的 hover state、按鈕點擊的事件、輸入框等許多比較常見的交互模式，但如果我們想要的更多的細節該怎麼辦呢？舉例來說，如果我希望更改輸入框中文字的顏色？可惜在 Plug-in 中找不到對應的欄位可以點擊，但是我們就可以透過修改程式碼來達成這個目的。Anima可以將我們的設計導出為前端程式碼，可以選擇 HTML、React、Vue 等不同的框架，在下載下來之後，便可以進行調整。

TeleportHQ 提供編輯器讓使用者在轉換成程式碼之前可以做最後的確認，我們可以利用 Figma 的 Plug-in 將程式碼導入 TeleportHQ 的編輯器，並在此增加交互元素。

在 TeleportHQ 的編輯器中，我們可以去調整網頁中的元件外觀，位置，交互狀態等，調整的方式是在旁邊的面板中更改數值，如果想要更進階的調整，也可以在點擊 Advance 去新增標籤屬性。在使用上，因為可以自己新增標籤屬性，所以在導出程式碼之前可以更改的部分就比較多，自由度相對更高。

在匯入的部分，TeleportHQ 會把我們在 Figma 中設定的 Color style 和 Text style 一起匯入，我們很喜歡這個功能，因為 TeleportHQ 有很多互動是在他的編輯器中做調整的，比如說按鈕的交互狀態，能夠直接選擇對應的 Color style 除了能夠加速調整的流程，也協助維持了設計的一致性。

不過如果想使用 <input> 這種表單元件，就需要再編輯器中重新製作，沒有辦法直接將元件標籤更改成表單元件。不過還好 TeleportHQ 能夠將常用的元件變成 Component 來重複使用，減去了每次都要重複製作的麻煩。

在 RWD 的製作上，可以在編輯器中點擊對應的螢幕尺寸來製作，和 Anima 可以一次匯入不同尺寸的 UI 不同，TeleportHQ 是用預設的尺寸去做更改，所以在圖層的編排上，每個螢幕尺寸都會是一樣的（不過和 Amplify studio 比起來，不用寫條件式還是方便很多）。

在導出程式碼的部分，TeleportHQ 一樣可以選擇多種不同的框架，但比較不一樣的是，因為在編輯器編輯的時候，我們就可以先調整和新增標籤屬性，所以在程式碼下載下來之後，需要再從程式碼中修改的東西就相對少了很多，大部分的調整在 TeleportHQ 編輯器中就能夠完成，不用在幾百行程式碼中尋找對應的區塊再做修改這點很方便。

在此稍微提一下 Auto layout 的間距處理方式，在Anima 中預設使用 gap 屬性去處理，讓裡面每個元件的距離都相等，但 TeleportHQ 預設是第一個元件的 margin 屬性，我們覺得有點不太方便，因為如果群組裡面的元件變多，後續想要調整每個元件之間的距離就要一個一個改變它的 margin。

以下針對 Amplify Studio、TeleportHQ、Anima 這三個工具的測試結果，做了一些簡單的比較表：

另外，因為Anima和TeleportHQ都能轉出React格式檔案，所以我們也比較了用同樣的設計以及相同的參數設定，轉出的檔案有什麼差異。

React檔案大小的部分，Anima的會比較大，因為它把每一個RWD的頁面以及在 Figma 設定的 component 都轉為 React component ，TeleportHQ 在轉換上主要是以編輯器中的內容為主，都是寫在同一個檔案，並且不會將頁面製作成component ，所以檔案比較小。但如果考慮到之後在維護或是在程式碼使用的便利性，Anima 的轉換方式會比較方便，而且組合和製作 component 的方式就和我們 Figma 中一樣，我們覺得可以依定程度的幫助設計師與工程師的溝通。

整體來說，我們覺得 Anima 在使用上比較簡單，所有動作都可以用點擊來完成，轉換程式碼的部分也比較合理，但相對的費用較高。 TeleportHQ 在免費版可以使用的功能比較多，在新增 CSS 屬性也比較方便，不過需要花比較多時間在調整 RWD 的部分。我們認為Anima 和 TeleportHQ 這兩個工具，是目前市面上比較推薦的 Figma to Code解決方案。

在這段測試的旅程中，我們認為無碼（No-Code）的概念，如同人類想要追求長生不老一般，可能只是一個烏托邦式的理想。UI設計具有的響應性（RWD）以及互動性（Interactivity）這兩大特性，注定它無法像是Photoshop或是After Effect一樣，用No-Code手段提供設計師任意的揮灑創意。

與其繼續鑽研No-Code這條路，不如我們暫時停一下步伐，思考UI設計師需要具備哪些技能。這些技能中，是否需要包含會寫程式（Coding）呢？設計師會寫程式的好處很多，在此我們就不詳細討論（改天再寫一篇文章來好好討論）。至少現在，如果大家能夠學一些基本的 HTML 和 CSS 語法（有學React, Vue, Angular等等JS框架更好），在使用Anima 和 TeleportHQ 這兩個工具時，都可以幫助我們在寫很少程式（Low-Code）的情況下做出高保真的原型和網站、可以做出更多更細節的互動，而且還可以幫助大家在與工程師的溝通上更為順暢，聽起來很不錯吧！

隨者Adobe斥資200億美元併購Figma的壯舉撼動業界之後，我們相信Figma to Code這一波浪潮絕對是來勢洶洶，Anima 和 TeleportHQ是否能夠保有優勢，持續提升產品品質與功能？會不會有更強大的後起之秀取而代之？我們將會持續關注這個話題，不定期為大家帶來新的測試心得。

以下為各測試工具的相關介紹連結：