SaaS 產品設計系統建置｜Turing Certs

為 Turing Space 打造提升設計與開發效率的產品設計系統。

隨著 Turing Space 產品功能與頁面的快速擴張，我們面臨了一個迫切的問題：由於缺乏統一的元件盤點與設計規範，產品中存在大量重複、不一致的設計。這直接導致：

• 設計師需要耗費大量時間，在眾多的頁面中尋找正確、最新的元件
• 新舊版本元件同時存在，導致成員時常誤用，造成體驗不一致
• 上述問題減緩了新功能的設計與交付速度

為了解決這個日益嚴重的「設計債」，我開始進行產品設計系統的建置

2026 更新

近期因應公司內部導入 AI 開發流程，設計也在 Claude Design 上建立了 Design System

並建立 Coding 易於使用的 Design.md & Design Guideline，方便不同團隊成員應用

1. 全面盤點與統一

專案的第一步，是對現有產品中所有的 UI 元件進行盤點。我將所有重複的元件（如 Buttons、Date Pickers）進行分類、整理，並與團隊共同定義出統一的設計規範。

2. 視覺基礎

在盤點的基礎上，我建立了一套清晰的基礎規範，包含統一的色彩系統、字體層級與圖示庫，讓未來所有新設計維持視覺一致性。

3. 模組化元件庫

我將統一後的基礎元件，如按鈕 (Button)、開關 (Switch) 等，全部使用 Figma 的 Auto Layout 與 Variants 建構成可複用的元件庫。每個元件都具備完整的狀態與清晰的命名，讓設計師可以直觀地搜尋與調用。

4. 組合式組件庫

最後，我將多個「元件」組合，建構出更複雜的「組件」。特別是針對我們產品中頻繁出現的彈窗 (Popup) 需求，建立了一系列可快速套用的模組，大幅提升了相關功能的設計效率。

成果與影響

查看完整設計系統請點我⬇️

https://www.figma.com/design/LedpwwG9bcuuhZbmLQCkw2/-Main--Design-Systems?node-id=3970-6156&t=4xBcHpGwmQm6ggJo-1

• 設計效率提升：
  • 設計師不再需要大海撈針般地尋找元件，也從根本上杜絕了版本誤用的問題，讓新功能的設計時間顯著縮短
• 產品體驗一致性：
  • 統一的元件與規範，讓整個產品的視覺與互動體驗一致，強化用戶信任感
• 團隊協作：
  • 設計系統成為團隊共享的設計語言，降低了溝通成本，也讓新成員能更快地融入開發流程

另外，我也舉辦了 Design System 分享會，除了產品團隊外、所有部門的同事也一起參與聆聽，讓所有公司的夥伴們都可以了解何謂設計系統、以及它的重要性。