【經驗分享】Design System 天堂路
深夜食堂 3x3 線上對談 Q&A
你好！這是設計烏邦圖的經驗分享系列，設計烏邦圖未來希望紀錄一些設計相關的主題，目前想到的包括產品設計與管理/設計策略與營運/未來設計職涯/新科技與設計趨勢，敬請期待！上週末受邀參加 UX 四神湯深夜食堂的 3x3 線上對談系列，主題是和 Design System 也就是設計系統相關，一同對談的還有 PayPay 的丕旭以及 KAYAK 的健群。自己剛好在去年底加入公司後有花不少的心力在將產品設計的檔案轉換到 Figma 並建立好設計系統來幫助提升團隊效率，後續也招募了幾位設計師一起參與設計系統的建置與維護，因此對於設計系統相關的議題也滿感興趣的，很好奇在同樣這條道路上的大家會遇到什麼樣的挑戰。
當天早上的活動只有一個小時左右，還有很多參與者的問題尚未被回答，因此想透過這篇文章來回覆一些有趣問題！
Q&A：
1. 如何 (將設計系統) 推廣到設計部門或者是其他部門（工程團隊、PM、行銷部門、決策者）？可以分享執行的案例嗎？
若公司有專門的團隊在推動設計系統，那麼理想的狀況這個團隊應該就會有 PM 以及開發的成員，他們就會是幫忙推廣設計系統的好夥伴；但如果設計系統還在很初期只是由設計團隊發起去規劃的話，我們目前的做法是有固定邀請工程團隊的同事參與我們的例會來了解進度，也順便會蒐集一些工程角度的問題來詢問或是給建議，幫助這件事有在跨團隊之間開啟討論。至於推廣至決策者或 PM 的部分，就會比較需要藉由凸顯現況的問題以及有了設計系統後的理想成果與運作方式來傳達，畢竟決策者重視的是目標、價值與成果，因此需要包裝成比較明確的故事與用戶價值會更容易引起共鳴。
-
2. 好奇迭代置換的進行方式？設計系統會包含表面的皮、操作體驗又或是系統架構的流程。現在有舊有的設計系統，要套用新系統的實作過程？
老實說我們還不算有開始迭代，當初開始做設計系統時，是看到現有介面不一致的狀況頻繁，有點想要全部打掉重練因此從頭開始盤點所有元件同時思考哪些東西有必要更新。但盤點的過程其實工作非常瑣碎，因此團隊成員有提議將目標先轉向協助設計師能夠有效率的進行介面設計，如此一來我們的任務就變成先把現有的設計與元件建構好，確保功能開發上可以快速拿來運用，下一階段才會是根據現有的設計去盤點哪些元件的型態太多需要簡化，或是元件角色不明確的需要刪除等，慢慢把這些訂定好的新規範套用到產品開發中。(但可能也會遇到新舊設計系統並存的狀況，通常會建議開發可以分階端改，但上線最好是一次上，讓整體的改動不有拼貼感)
迭代的話我想像可能是遇到新功能的開發或是要建立新的元件時就可能會有更新的需求，又或者是設計系統的型態上為了更方便地被運用可能也會有呈現上的迭代，比方說從 Figma 轉變成網站版本或是有原始碼的版本方便傳承與落地。也因此很常有人會說，要把設計系統想像成一個產品，持續追蹤他的成效與被使用的狀況，確保能夠迭代成更好的版本。(Figma 的 Org 方案似乎可以追蹤設計系統被使用的數據！)
-
3. 想知道各位都是用什麼軟體做設計系統？有沒有什麼推薦的 Plugin ? (像是剛剛有提到的 Variants for Figma)
目前在公司是用 Figma，好處是 Pro 以上的方案可以將 Design System 建立成一份檔案並共享到其他新的專案中，也有快速同步的功能。(另外當然就是因為強大的 Auto Layout 可以建立出很有彈性的元件，讓元件的使用上更順利)
這邊挑幾個我有在用的 Plugin：
- Unsplash 放假圖
- Loren ipsum 放假字
- Material Design Icons 可以找到一些實用的 icons 做線稿的時候使用
- MockupMirror 做流程圖 sync 畫面
- Responsive 做響應式網站
-
4. 在 Design System 建立的過程當中，如果有新的設計 Pattern 或 component，該怎麼好好維護？
在創造新的 pattern or component 的時候，通常都會思考這樣的元件後續的延伸性，是否有機會應用在其他地方？如果能用現有的元件做出相同的效果，通常就會避免創造新的元件導致維護成本增加。若真的要建立新的元件，基本上也會讓他的一些特性符合基礎規範像是字級、間距或顏色等等，確保介面的一致性。若很明確是一次性的新設計，可能也就不會放進 Design System 之中了。
-
5. 公司從 Sketch 轉換到 Figma 遇到的最大困難 ? 如何解決？
當時剛加入公司就決定要將檔案都轉移到 Figma，主要是因為希望檔案管理上可以更方便，不用到處去找檔案，問原始檔或最新版本在哪之類的。當時第一個遇到的困難就是轉換過程中很多檔案需要重新製作，不過其實也沒有真的將全部檔案都重製，主要是把常運用到的介面檔案建立成 Figma 版本。另外行銷設計相關原本使用 Ai 製作的模板後續也都有轉到 Figma 來維護，但因為初期成員對於 Figma 這樣工具也不太熟悉，因此也嘗試做了幾次的教學，並且招募原本就熟悉 Figma 的成員來建立一些檔案製作的規範以及教學，讓整個團隊都能夠快速上手。還有一個需要轉換的是在 Sketch 常使用的一些 Plugin，不過大部分 Figma 上面也都能找到一些對應的工具來使用。轉換過程，也有成員擔心檔案都在雲端如果不見怎麼辦，因此也在想是否有定期備份的方式，這部分還需研究，若有任何做法也歡迎提供🙂
最後，總結一下當天關於在組織內推動設計系統的建議：
- 先釐清問題，團隊是否真的需要設計系統？如果需要但卻不知從何開始的話，就從自己經手的專案開始嘗試建立元件與規範，或是嘗試訂定一個固定的會議拉志同道合的人來一起參與，維持設計系統這項專案的前進動能。
- 開始建立設計系統時，可以先從最基本的元件開始訂定好呈現上的規範以及盤點的方式，有一個模板可依循之後，其他元件就能夠分工下去盤點與設計，像我們當時成員先建立好了按鈕的模板當作範例。
- 不要把設計系統想成只有對設計團隊有幫助，其實設計系統對於工程團隊也會獲益很多，能夠簡化開發的複雜度也奠定了和設計溝通的共同語言。
以上。
謝謝你的閱讀！如果喜歡這篇文章，歡迎追蹤設計烏邦圖，也可以幫忙轉貼分享這篇文章，或是純粹幫我拍拍手鼓勵鼓勵也行👏👏👏，希望有一天能和你聊聊設計！
