Gemmi 設計系統
重建 Gemmi App 設計系統
UI/UX
B2C
設計驅動
負責項目
設計與管理設計系統
參與人員
設計師 1 名、產品經理 1 名、前端工程師 1 名
專案期間
2022 一月 - 2022 三月
在我最初加入團隊時 Gemmi 才剛推出，雖然我們那時有元件庫，但由於先前緊湊的開發時程，我們一直沒有正式建置設計系統，導致影響後續維護舊有功能或開發新產品的效率，因此我提出建置完整的設計系統以提升工作效率與設計一致性。
發現問題
在舊有的元件庫，我發現以下三個問題:
命名規則不彈性
受到命名規則的限制，我們很難維護或新增字體與顏色。
命名規則不一致
我發現有些元件的命名規則不統一，導致與工程師溝通時很容易出現問題。
圖標比例不一致
我們的圖標一開始沒有設立統一的格線系統，導致後續的比例不一致。
建立基礎
在正式開始建置設計系統前，我做了以下兩件事建立基礎:
研究
我研究其他成熟的設計系統，找出慣例作為我建置的基礎。
統整
我盤點所有舊元件庫的元件，統整作為新系統的根基。
解決方案
在考量我們的工作流程與產品規模後，我為我們的設計系統建構以下規則與元素:
字型
為了讓字體的使用上更有彈性，我建立了新的命名和字級規則。
顏色
我根據色相與使用方法設定了顏色的命名規則，讓後續的維護或新增更具彈性。
圖標
我為圖標建置了統一的格線系統，確保他的平衡與一致性。
元件
我運用 Figma 的元件與變體功能建置重複使用的元件，並與工程師討論適用於設計與工程端的命名規則，以提升未來開發的效率。
迭代
隨著產品的成長，我持續迭代我們的系統以符合開發上的需求，我也持續與工程師密切合作以確保設計系統能滿足設計與開發的需求。
回顧
建置設計系統是一件龐大且需要大量協作的工作，雖然在與工程端的溝通上會因為工作邏輯上的不同而有衝突，但我們最後都還是找到了解決方案，現階段我們可能不像其他大型產品一定需要設計系統，但隨著功能的成長，設計系統帶來的好處也漸漸顯現，如今，大家都能輕易的採用我們的設計系統，持續的推進產品。
Let's get in touch. Say hello.
Let's get in touch. Say hello.
Let's get in touch. Say hello.
Let's get in touch. Say hello.
