前言

本系列文章會在筆者的部落格繼續連載！Design System 101 感謝大家的閱讀！

嗨嗨大家好！

這是我第二次參加鐵人賽，期許可以像第一次一樣可以順利完賽！

設計系統這個概念隨著 Google 的 Material Design 和 Saleforce 的 Lightning Design System 問世後逐漸變得流行，至今大部分的公司都有自己的一套設計系統。

而我對設計系統的第一印象是一個匯集所有相同或類似元件的套件，目的是減少重工的時間並提高開發效率。但隨著更深入的了解，發現這只是一小部分，設計系統涵蓋了設計原則、設計標籤，元件以及 Accessibility 等等，並且代表的是公司品牌和用戶體驗的一致性。

這系列的文章要跟著大家一起理解什麼是設計系統以及如何實踐它。

Terminology: "設計系統" 以及 "Design System" 是一樣的，在之後的文章可能會交互使用。

關於本系列文章

設計系統 - Design System

此系列文章會從什麼是 Design System 以及介紹 Design Tokens 在 Design System 中扮演的角色，再來就是如何打造可訪問 (Accessible)、可測試以及可擴充的 Design System!

目前文章規劃大概會:

• 基礎概念 (Day 2 ~ Day 8)
• Accessibility (Day 9 - Day 11)
• Components (Day 12 - Day 26)
• Optimization (Day 27 - Day 29)
• 總結 (Day 30)

給讀者們

適合誰:

1. 有用過 React 經驗
2. 也對 Design System 有興趣的人!

技術棧:

• React
• NextJS - 建立文檔
• CSS (SCSS) - 樣式
• Jest & @testing-library/react - 測試
• Storybook - Component 的使用說明與範例展示
• Lerna - 管理 package 的工具

小結

Design System 涉及的範疇相當廣泛，實務上它是需要多個部門共同協作的項目。而當看過 Design System 越多，會發現自己知道的只是皮毛。但希望透過這個系列，能夠一起學習，並提高對於 Design System 的認識。如果在文章中有任何不正確或可改進的地方，請務必告知，萬分感激!!

那就開始這三十天的旅程吧!