Figma為UI設計師引入工程思維

最近的一些小小心得

前幾天設計師同事說他從沒想過Figma讓design跟dev走得這麼近。

Figma相較於過去的UI設計工具，引入了很多工程思維，元件化、auto layout、variable這些概念可以讓排版、出畫面變得更快更一致也更好管理。

但我相信這些功能對沒有太多UI經驗的設計師來說除了不好理解以外也不知用意何在。幾個月前同事問我Figma Token的問題，我剛好有稍微研究過記得大概的用法，基本上就是json的運用，但對方還是容易不解為什麼要這樣做。設定了一大堆東西卻‘看似’只能用來切換深色模式，另外token的mapping(alias)、variants也是設計領域相對陌生的東西。

後來她離職了，公司剩另一位更不熟Figmaㄉ設計師。出圖永遠現場拉，連frame都常常沒包，沒元件化的結果導致UI總是不一致，畫面一改就全都得重拉。雖然有想排整齊卻很難做到，也缺乏對齊方式等RWD資訊。同時我們也欠缺一個有效管理Figma檔案的方式，我們永遠找不到最新的畫面，都是三百年前的頁面配新的UI，還常害校稿的同事改到舊的文案。

在獲得允許可以實驗性的大改Figma file後，我開始研究要怎麼妥善管理元件、頁面、spec，幫忙補 UI，教怎麼用 auto layout 處理 resizing。

也畫了架構圖向設計師說明元件庫、專案、畫面之間的關係，解釋為什麼這麼做能改善迭代的效率。但就像前面說的，工程思維滿類似寫程式時的 design pattern，對工程師來說相對熟悉，卻對設計師而言很陌生，問了不少次「為什麼要這麼麻煩」。但我不認為這是一個只適用於程式面的技巧，只要是需要迭代、管理、量產，就一定會受用。

當這些工程思維被建立起來後，除了能提升效率，也多了一些共通語言，不會一直有種設計跟工程兩個世界的感覺。我覺得前端(至少在我這)就是同時存在在這兩個世界的角色，沒有非常隸屬於任何一邊，但我感覺有一點點責任去把這兩個世界拉近一點。