---
title: "【講座筆記】設計系統實戰：案例解析與實用策略"
slug: ds-seminar-notes
url: https://academy.aapd.com.tw/posts/ds-seminar-notes
published_at: 2024-12-16
modified_at: 2024-12-18
author: "AAPD - As A Product Designer"
category: "講座筆記"
tags: ["figma", "Storybook", "Design Token", "Design System"]
access: public_access
---

# 【講座筆記】設計系統實戰：案例解析與實用策略

> 隨著產品架構越來越複雜，設計系統（Design System）的重要性逐漸凸顯，它不僅能提升團隊協作效率，還能確保產品設計的一致性，有效解決設計師與工程師之間的溝通與協作問題。

By **AAPD - As A Product Designer** - AAPD 產品設計學院 | 2024-12-16

在本次講座中，我們特別邀請到 Harry Chuang 老師，為大家介紹設計系統的基本概念與實例應用，希望幫助大家更全面地理解設計系統的價值。Harry 擁有產品設計師與前端工程師的雙重背景，七年前開始在新加坡工作，主要負責幫助團隊研究和開發設計系統。同時，他也是 awwrated 平台的創辦人，(閒聊) 不知道大家有沒有有使用過 awwrated 這個追劇避雷平台呢？ 什麼是設計系統 (Design System)？設計系統的核心理論源自原子設計（Atomic Design），它能將產品界面拆解為層層組裝的設計元素。在設計過程中，設計師需要定義字型大小、間距、陰影、顏色等設計元素，並對這些元素進行統整與規範。因此，數值的收斂是設計系統建立過程中的一個關鍵步驟。這些設計元素就像 Design Token，它是一種能夠幫助設計師與工程師進行溝通和協作的共同媒介。透過明確定義和應用 Design Token ，團隊可以在開發過程中保持一致性，減少反覆溝通的成本。 圖片引用自 (原子設計作者的貼文)：https://x.com/brad_frost/status/1449026849246482434 設計系統拆解：以 Instagram 為例，界面可以拆解如下原子：基礎的設計單位，例如按鈕、輸入框、圖標等。分子：由多個原子組成的簡單元件，例如按鈕組合、資訊欄位等。有機體：更複雜的元件組合，例如頁首、貼文區塊等。模板：結構化的頁面框架，包含排版與設計佈局。頁面：模板填入實際內容後的成品，直接面向使用者。 設計師與工程師對設計系統的不同需求設計師更關注於視覺呈現和使用者體驗，從顏色、字體到排版和互動設計，需要設計系統提供清晰的設計規範和多樣化的元件庫，以快速建立一致且美觀的介面。而工程師則注重技術實現與程式碼品質，從元件的結構到效能，希望設計系統能夠提供可重複使用且易於整合的程式碼元件，幫助他們實現產品功能。 兩者在需求上的差異也體現在對設計系統的期待上。設計師需要的是易於理解的設計原則與規範，輔以豐富的元件庫和清晰的範例文件，幫助他們在設計過程中做出準確的決策。而工程師則需要清晰的程式碼結構和穩定的元件，配以完善的文件與 API，確保開發過程的穩定性與高效性。 設計系統整合工具 — Storybook 工具導覽Storybook 是一個強大的開源工具，專門用於開發和展示 UI 元件，能幫助設計師與工程師更有效地協作。通常主要由前端工程師負責導入和開發，設計師參與界面呈現和功能需求的討論，同時撰寫相關的設計規範和文件。由於 Storybook 是以程式碼驅動為主，使用者需要具備一定的程式設計基礎，設計師若希望深入了解其功能，可能會需要學習基本的程式設計概念。 在 Harry 的案例中利用 Storybook 建立了一個結合設計系統與 UI 元件庫的平台 互動式元件展示： 開發者可以用互動式的方式展示元件的不同狀態和變體，讓設計師和工程師能夠更直觀地了解元件的行為和外觀，方便進行設計和開發。文件和程式碼範例生成：自動生成元件的文件和程式碼範例，可以方便開發者理解元件用法，設計師也可以確認元件的最終呈現是否符合預期。跨團隊協作平台： 作為一個跨團隊協作平台，讓設計師、工程師和其他團隊成員都能夠方便地查看和使用設計系統中的元件。版本控制和管理： 能與版本控制系統整合，方便追蹤元件的變更歷史和管理不同版本的元件。整合其他工具和平台： 可以與 Figma、Sketch 等設計工具以及各種前端框架整合，讓設計系統的建立和維護更加高效。 業界實際案例分享在新加坡電商平台設計與開發中小型設計系統的經驗根據 Harry 的經驗，設計系統的建立可以在前期先完成基本架構，例如色彩、文字、常用的按鈕和輸入框等，等到產品團隊逐漸熟悉設計系統的工作流程，再逐步擴充設計系統中的內容。這種循序漸進的方式不僅能降低初期的工作負擔，還能讓團隊更自然地適應設計系統的運作模式。 推薦閱讀 Google Material Design 等大型企業的設計系統案例Google Material Design 為業界最大型且最知名的設計系統之一，擁有龐大的設計規範和元件庫，涵蓋了各種平台和裝置。除了提供了完整的線上文件，內容涵蓋設計原則、設計元素、互動設計以及元件使用指南之外，也提供了 Design Token 的定義和使用範例。 導入設計系統的流程與團隊協作分享在實際開發中，設計稿與最終產品之間經常存在差異。這往往是因為工程師的首要目標在於確保功能在有限時間內實現，導致一些視覺細節容易被忽略。而設計師經常會因為細微的美感問題，如字體大小或顏色的微妙差異，與工程師反覆溝通。這些差異在產品進入成熟階段時，可能會使程式碼的維護變得困難，進而增加開發成本和導致管理上的混亂。 導入設計系統需要團隊共識和持續推動，建議先從新專案開始測試，當團隊熟悉了這樣新的工作模式後，再逐步擴展到舊專案。每一個產品專案和團隊的規模各不相同，設計系統的規模也會因需求而異；因此，團隊應該一起研究和討論，了解現階段有哪些現有的設計系統可以參考，再思考哪些內容是目前產品專案需要的。因為建立設計系統元件庫是一個緩慢的過程，在初期不用急著要開發一個非常完整的設計系統，而是可以先聚焦於核心部分，隨著團隊的熟悉度和需求的增加逐步擴展。 設計系統的建立並非一蹴即成，需要經過以下步驟：確立設計原則： 共同討論產品的核心概念和設計方向，例如簡潔風格、社群互動等等，並將其轉化為可行的設計原則。定義設計元素： 根據設計原則，制定顏色、字體、間距、圓角等設計元素的規範，並將其收斂和量化，形成設計語言。開發元件庫： 將設計元素組裝成可重複利用的元件，例如按鈕、輸入框、卡片等等，並將其歸類和整理，形成元件庫。建立文件和規範： 為每個元件撰寫詳細的使用說明和程式碼範例，讓設計師和工程師都能清晰理解其用途和使用方法。推廣和維護： 將設計系統推廣到整個產品開發團隊，並定期更新和維護，確保其與時俱進。 Takeaway想建立設計系統的單位，可以參考 Google Material Design 和 Ant Design 等大型企業的成功案例，學習其規範化設計語言、元件模組化以及跨團隊協作的最佳實踐。在產品或開發團隊中找出共同痛點，以數據和圖表清晰呈現設計系統帶來的效益，說服主管和同事共同參與與支持，推動整體團隊的協作能力與產品競爭力。設計系統的建立是一個持續迭代的過程，由設計師與工程師共同維護和不斷優化、擴充，以適應產品發展的需求。 給設計師的設計系統必修課掌握模組化 UI 設計，讓工程開發協作不卡關！在這門約 4 小時的課程中，經驗豐富的 Harry 老師將帶領你循序漸進地掌握模組化 UI 設計，透過 5 個設計實作練習來即時應用所學，最終做出一套基礎的設計系統。▶ 給設計師的設計系統必修課｜課程頁面：https://academy.aapd.com.tw/courses/ds▶ 更多 AAPD 學習資源： https://portaly.cc/aapdgo▶ 認識 Harry Chuang 老師：https://www.threads.net/@harrychuang.ds