【本文適合想提升產品開發效率的你，含設計師、產品經理、前端開發者】
隨著數位產品逐漸成熟，許多知名企業為了加速開發流程，導入 設計系統（Design System）的觀念，讓產品團隊目標一致。
1. 檢視目前開發流程 Review current development process
在了解或實作設計系統（Design System）前，建議先以下述的三大問題檢視目前流程。
您是否曾經遇過以下情況（不論開發者或是設計師）：
1-1. 沒有效率的開發流程 (Inefficiency)
設計團隊裡的資源不透明，一而再，再而三重複設計相同的元素，增加設計投入成本（人力及時間）。
1-2. 不一致的介面元素 / 互動體驗 (Inconsistent)
可能因快速的開發過程，或時間壓力，導致在設計時沒有考量規模化、或者沒時間 QA 就將產品推入市場。可能產品會出現很多不一致的元素，這會讓用戶產生困惑，且會花更多時間上手，最糟糕的是可能放棄你的產品。
1-3. 對設計產出沒有信心 (Insecurity)
由於沒有設計規範，對於自己設計的互動介面，產生是否能滿足使用者的需求、操作或體驗的懷疑。
如果你曾遇被以上三種情境困擾著，或是正想著：
“ 如何擴展團隊和產品，同時也可提升開發團隊效率及提供一致的使用者體驗？”
也許，設計系統（Design System）是解決辦法之一。
2. 設計系統是什麼 What is Design System
設計系統並不是一個新觀念，可以回溯於早期2013年 Brad Forst 提出的 Atomic Design。Google Material Design 在2014年大放異彩，2016 年 Airbnb 開始進行創建設計系統。陸陸續續，許多知名公司包含 Salesforce , Atlasssian , Shopify 對外公布產品的設計系統，讓大眾認識設計系統的概要及推廣設計規模化（scalability）。
市面上有許多解釋，我個人比較喜歡Karri的說法：
“Set of shared and integrated patterns and principles that define the overall design of a product”
— Karri Saarinen, Principle Designer at Airbnb
設計系統是定義產品整體的設計，由一組共享、整合的元素及原則所組成。
如果以實體產品形容的話，你可以把它想像成樂高（Lego）。每個元件都是可以合成的模組，擁有千變萬化的樣式。由一個產品中心管控每個元件的品質，更改版本時也能夠一併更新，讓設計跟開發可以規模化。
uxeastmeetswest 先前的文章有詳細介紹，有興趣的朋友可以參考：
設計系統（Design System）分享
較具規模的公司往往有多數個產品，有時候你使用者使用公司的不同產品時，會發現視覺、使用方式和整個體驗感覺像是來自不同的公司，比較類似的案例就像是ADP或是Cisco (當然 Cisco 常常是因為併購不同的公司所導致) ，而有些公司的不同產品你使用起…
網頁設計 : Atomic Design 簡介及工作實例
【此文說明如何將 Atomic Design 設計理論應用在網頁設計】
3. 為什麼需要設計系統 Why do we care?
3-1 市場 / 平台逐趨成熟 Maturing of the market / platforms
由於數位產品的市場越來越飽和，大眾對產品的品質要求更高
3-2 建立產品一致性 Create product consistency
不但是在單一產品之內，包含在不同平台及裝置間的轉換（iOS, Andriod, Saas, Mobile Web, iPad, or TV, etc），都希望能建立產品的連貫性
3-3 加速開發過程 Faster development cycles
由於有中央控管的設計系統，成員可以隨時領取元素、同步更新，減少設計與開發反覆確認的過程
3-4 擴張產品團隊 Scale of the digital products and teams
設計系統是由有清楚規範、一系列可重複利用的元素所組成，當產品模組化，可延展性就增加了
3-5 專注於解決真正的問題 Focus on solving the real problem
還記得煩惱下拉選單的樣式一整個下午嗎？或是與開發者討論要多幾個 pixel 的間隔、反覆確認的過程嗎？設計系統讓團隊的每個人可以加速構思到生產的過程，專注於大方向的用戶體驗。
但設計系統並不是適合每個團隊的，如果你現在身處一個小型、快速發展的公司，也許為了加速擴張、爭取市佔率，那麼擁有設計系統可能會綁手綁腳的，不過能將設計系統的觀念放在心上，對於未來發展十分重要。
4. 設計系統團隊組成 Who should be included
由於設計系統是持續更新的系統，定義產品的基石，組成成員可能包含：
- 用戶體驗設計師 UX Designer
- 視覺設計師 Visual Designer
- 動效設計師 Motion Designer
- 內容寫手 Content Copy
- 前端開發者 Front-end Dev
- 產品經理 Product Manger
當然，非常重要的是要取得各方共識，及說服管理者投入資源，在這裡不多做説明，有興趣的朋友可以觀看 Design systems — Zero to one。
5. 如何著手 How to begin
萬事起頭難，根據每個團隊會有不同的方法，於本文分享個人在公司裡推廣設計系統的過程。大致上有六個階段：
- Seed 種子期：心中有設計系統的概念
- Collect 蒐集：蒐集現有產品UI elements
- Categorize 分類：將現有UI elements分類
- Discovery 發想：設計發想所有可能性
- Framing 定義：收斂定義設計系統基本架構
- Solution & Collaboration 開發＆合作：與Developers進行開發
現況說明：產品的設計規範 Style Guide 是由兩年前的另位設計師所制定，自從產品上市後用戶持續增長、在短時間開發更多的功能，過去的設計規範大多已不適用。
5-2 Collect 蒐集
截圖、截圖、再截圖 Screenshot all the components across products
首先，請不留情面地對你的產品截圖，包含整個頁面跟單一元件，目的是找出用戶體驗不同的元件。不論是花一個小時、一個早上、或是一整天，你會發現原來不一致的介面比你想像的還要多（總共24 個頁面及 100 個元件）。
產生原因包含：不同介面由不同的設計師經手、在開發過程為了方便快速，使用現成的線上元件等。
5-2 Categorize 分類
尋找相同的介面元素 Pattern hunting
將截圖的各元素分類，試著從小處著手，以下是簡略的歸納：
5-3 Discovery 發想
a. 蒐集現有設計 (外部 & 內部) Gather current design (external & internal)
這部分可以分成向外尋找、向內探索：
向外尋找External：尋找市面上類似的產品，蒐集喜歡的介面元素。由於這次的產品為SAAS，主要的參考對象為：Dropbox, Shopify, Typeform, etc.
向內探索Internal：試著蒐集過往的設計，找尋潛在的可能性。這些設計可能是已開發、待開發，甚至是歸檔的都有成為設計系統的藍圖。
b. 選一個介面進行發想 Hijack a project
你可以選擇一個正在進行的專案著手，或是最讓你討厭的畫面、最有感覺的都可以。這階段發散越廣越好，可以先回顧先前整理的元件以及靈感來源，盡可能的創作。
而我選擇用戶使用時間最長的活動頁面，重新構思設計系統的可能性。
5-4 Framing 定義
提煉設計 Refine Design
考量到桌面版及行動裝置呈現，選擇使用卡片式的UI，並減少圖片的面積，讓活動主題和相關資訊更突出。
定義架構 Define Guideline
有了以上的大方向後，這階段是一個關鍵的精密製作過程。你可以定義一個元素、元件，或是模組，考慮到不同的使用情境、在不同頁面的呈現，除了在 Sketch 設定 Symbol 之外，可以使用Google Doc 做詳細的敘述，以下是一部分的文件：
5.5 Solution & Collaboration 開發＆合作
最後的大步驟就是和前端工程師一起定義設計系統，由於我們產品是 SAAS 平台，主要使用 React。有興趣的朋友可以閱讀：
- Bringing Design System Components from Production into Framer X
- Monica Lent — The tech behind a design system that scales
6. 結論 Conclusion
恭喜你看完這篇落落長的文章，希望能用輕鬆的方式讓大家認識設計系統Design System，了解設計系統的使用時機、優點，及設計過程。
“Design systems are always evolving, and the way you share and encourage adoption of new iterations will evolve along the way as well.”
– Diana Mounter, Design Systems Manager at GitHub
設計系統是持續演變的，不斷分享、鼓勵採納，有助於新的迭代。
每一個公司都是獨特的，不只是產品，還有團隊跟環境，設計系統必須綜合考量所有的因素。Airbnb 的設計系統不代表是適合你的。如果你還在煩惱如何開始著手 Design system 的話，希望這篇文章對你有幫助！
參考資料 References
- Thinking in Symbols for Universal Design — Benjamin Wilkins, Airbnb
- Karri Saarinen — Scaling design with systems
- The Imposter’s Design System — Ed Chao, Product Designer, Dropbox
- The heartache of design at scale — Invision
本文經作者同意，轉載於 2019產品趨勢 — 如何著手設計系統 Design System is the new black: How to begin
本文章所屬設計大舌頭與作者所有，未經授權，不得轉載！如需轉載，煩請通知。
