前言
上任 1 個月後，連一個專案/產品都還沒搞清楚，就要開始做設計系統(Design System)，真是驚嚇滿分！😱😱😱
雖然有設計系統的概念，但實作上只有練習的經驗，立馬先 google 大家的經驗分享，並參考一些公司的 Design System、Component Library 都是怎麼做的，讓自己有個大方向。
想了解各大公司的設計系統，可以到 Design Systems Gallery 、Design Systems Gallery、Design Systems articles on building and maintaining design systems 參考。
另外，有前輩將他看過的設計系統整理成表格與推薦度 Designtips.today — Figma design system resources 供大家參考。👍
為什麼需要設計系統？
這裡不詳細描述，可以直接參考 NN/g - Design Systems 101、為什麼要建立設計系統？、設計系統(Design System)分享 等文章。
團隊怎麼做？
參考了 InVision — DesignTalk Ep. 65: Design systems — Zero to one 中的設計系統生命週期（Lifecycle of a Design System），分為 4 個階段：
- Seed：團隊有設計系統概念且想要建立設計系統
- Discovery：審視現有 UI、發想可能性
- Framing：收斂與定義設計系統架構與範圍
- Solution：設計、開發、回饋、持續迭代
Stage 1 - Seed
團隊已有共識要建立設計系統，所以我們很快的進到第二個階段：Discovery。
Stage 2 - Discovery
這邊我們分為 3 個步驟進行，分別是蒐集&分類、審視現有UI、參考各大公司的 Design system。
- 蒐集 & 分類
決定要建立設計系統後，開始著手蒐集及分類公司現有專案及產品的 UI。先將最基本需要的元件列出，再來就是一個一個專案/產品慢慢蒐集。蒐集完你會感嘆：wow！原來經歷了這麼多...
2. 審視現有 UI（向內檢視）
審視目前使用的 UI 是否真的適合，有沒有其他更好的方式？或哪一個專案的 UI 其實更適合用在這個專案？互相比較與評估，列出問題。
3. 參考各大公司的 Design system（向外探索）
針對想探索的 UI 參考各大公司的 Design System 是怎麼規劃的，從中了解產品與設計系統的關係，並獲得靈感。
Stage 3 - Framing
在蒐集分類、審視與探索後，我們要收斂與定義設計系統的架構與範圍。先將需要製作的內容列出，並開始針對討論結果進行精密設計。
在設計每一個元件或模組時，考慮到不同情境通用的呈現方式，提供未來更彈性的使用。做完 Component 後，將每個元件整理成容易閱讀的樣子，讓工程師可以一進來就讀懂。
Stage 4 - Solution
最後，就是要和前端工程師一起合作開發出來，我們團隊使用 Storybook，讓大家可以看到前端工程師實作出來的 UI components，並從中進行討論、測試與迭代。也可以將 Design System 的介紹與使用方法寫在 Storybook，提供大家在同一個地方檢視。
結尾，心路歷程寫在這
在做設計系統的每個決定時，都覺得非常不確定，常常做了又改、改了又改。因此在 ADP list 預約 Mentor 解惑。預約的是在 Snapask 擔任 Product Design Lead 的 Minyu。
Minyu 分享了他們團隊的經驗與一些觀念，也鼓勵我不用這麼緊張，一步一步慢慢做，真的給了很大的定心丸。💚💚💚
Minyu 的 ADP list 預約網址，可以看到很多 Mentee 的回饋留言，真的非常推薦在職涯上有撞牆期的大家! 👏
最後，歡迎在設計系統上努力的朋友，一起討論分享！🙌
謝謝你的閱讀！
如果喜歡這次的分享，請快樂的隨意👏👏吧！
