隨者(2010)、(2016)、(2016)等等的向量圖形編輯器(Vector Graphics Editor, VGE)誕生後,UI設計邁向了一個全新階段。這些工具除了能使UI設計達到系統化、模組化的高效率開發以外,也同時讓前端工程師有更完整的樣式(Style)開發參照,使得“從設計到開發”(Design to Code)得以更順利的接軌。
然而,從設計到開發的腳步,並沒有因此停歇。基於效率極大化的企圖心,無碼(No-Code)的概念順應而生。由於上述的工具皆有開放式API(Open API)的支援,驅使了許多開發團隊躍躍欲試,近幾年在網路平台上產生了一些企圖更便利的實現Design to Code方案。我們從中選擇了幾個支援Figma的相關工具來實際測試,看看他們是否可以直接實現 Figma to Code的野望。
雖然Amplify Studio額外在Figma上有分享官方,但主要是針對主題和Design Tokens去做改變,比如說你可以更改設計的主色及輔色、或是字體大小(但不能更改字型)、間距等等,使用上和 Material Design 的Plug-in類似。在更新之後可以更改的東西蠻多的,但在使用上還需要再多寫幾行程式(且如果用在 Amplify UI 以外的元件會出現錯誤)所以我們也放棄使用。
目前網路上關於 Amplify Studio 的資料也比較少,很多東西只能從官方文件中去解讀,想要更完整的使用,必須要熟悉React的程式語法,甚至要對於資料庫架構有一點基本概念。整體來說,Amplify Studio比較偏向是針對前端工程師為主要使用者的工具。同時就目前的使用狀況來看,僅能實現非常局部的設計模組的銜接,距離完整的轉出一個網站,還有一大段距離。
在匯入的部分,TeleportHQ 會把我們在 Figma 中設定的 Color style 和 Text style 一起匯入,我們很喜歡這個功能,因為 TeleportHQ 有很多互動是在他的編輯器中做調整的,比如說按鈕的交互狀態,能夠直接選擇對應的 Color style 除了能夠加速調整的流程,也協助維持了設計的一致性。
無碼 vs. 薄碼? 在這段測試的旅程中,我們認為無碼(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是否能夠保有優勢,持續提升產品品質與功能?會不會有更強大的後起之秀取而代之?我們將會持續關注這個話題,不定期為大家帶來新的測試心得。 附註 以下為各測試工具的相關介紹連結: AWS Amplify Studio | Visually Build Extensible, Full-Stack Apps Fast
Visually build and ship full-stack web and mobile apps, backend and front-end UI, in days with AWS Amplify Studio. No…aws.amazon.com Figma (@awsamplify) | Figma Community
The latest files and plugins from AWS Amplify (@awsamplify)www.figma.com Figma
Figma Community plugin - Convert your Figma components into clean React, React Native or HTML code, helping you…www.figma.com Anima: Design to code | High-fidelity prototypes
Powerful interactive prototypes Developer friendly code Seamless handoff Design interactive & responsive prototypes…www.animaapp.com Figma (@anima) | Figma Community
The latest files and plugins from Anima (@anima) - Design to code, automated.www.figma.com Low-code Front-end Design & Development Platform | TeleportHQ
Import Convert your designs to responsive websites, components and interfaces instantly, with our Figma Plugin…teleporthq.io Figma (@teleporthq) | Figma Community
The latest files and plugins from teleportHQ (@teleporthq) - teleportHQ is the collaborative low code platform that…www.figma.com 註:本文為Able實習生 Cheryl Fang 撰寫,Steven Yeh編輯。同時感謝 Cheryl Fang 親自進行所有工具的測試工作。