上一篇文章（part 1-專案導言）
介紹了「A.專案背景脈絡」及「B.如何選擇 UI 框架」，本章節 實際案例將介紹最後兩段：「C.利用 Chakra UI 製作設計系統」、「D.導入後回顧」。
＊本文並非針對設計系統的教學文，旨在分享 Chakra UI 框架實作經驗＊
C. 如何利用 Chakra UI 製作設計系統? 👉
當團隊選擇了 Chakra UI 框架，接下來設計要從何著手？建構設計系統有哪些小技巧？🏃
想深入了解 UI 框架的設計，建議先從官方文件入手，Chakra UI 除了官方文件外，亦提供了 Chakra UI Figma Kit，幫助設計師更了解元件庫的結構。
設計系統可大致分為兩大部分： 主題（Theme）和元件（Component），首要任務是了解如何設定 UI 框架的主題：色彩主題（Color Theme）和文字排版 （Typography）。除了自定義主題外，也需要研究元件庫的結構是否符合產品需求？哪些元件需要跟團隊討論客製化？
綜合上述問題，本次專案可分享以下 5 點經驗：
1) 因應產品/品牌規範，調整主題（Theme）
🎯 色彩主題（Color Theme）
Chakra UI Color Theme 的結構與其他 UI 框架相似，都是以主色為基礎，延伸出不同深淺程度的色階，並以數字命名。Chakra UI 的色階從淺 (50) 到深 (900)，共有 10 個不同的層次。
你可以使用色階工具產出色票，再根據需求進行微調，確保顏色適用於產品。需要自行調整的情境，通常是 - 淺色階太淺或色階之間差異太大，實際套入產品時不適用。
快速產生色階的方法，推薦以下幾個服務：Ant Design Colors、 Themera（專門為 Chakra UI 生成色階）、Eva Colors。
📌 如果你想了解色階原理：How to create a nice color palette in Figma
🎯 文字排版 （Typography）
Chakra UI 預設的 Typography 架構，提供從 xs 到 6xl 共十組不同的字體大小選擇，除了字體大小（font size）外，亦可針對以下屬性設定：fonts、fontWeights、lineHeights、letterSpacings。
Figma 內調整行高（line-heights）的單位使用 px 或百分比，前端在 CSS 設定行高則有 5 種寫法：
- 預設值 normal：行高 = (該元素設定的文字大小 x 1.2)
1.0 ~ 1.2 是瀏覽器給 line-height 的初始值，通常都用 1.2 來計算 - 純數字：行高 = (該元素設定的文字大小 x 數字 )
- 帶單位的值：em, px, pt …等，1rem=16px
- 百分比：行高 = (父元素文字大小 x百分比)
- 繼承：寫法是
line-height:inherit;，如果加上這段語法，就會繼承該父元素的設定
Chakra UI 預設的單位是 rem，假設文字樣式是： Font Size 16pt / line Height 24px，在 Chakra UI 當中行高為 1.5rem（ 24/16 ）等同於 line Height-6。
若需要調整 Typography 預設值時，建議特別標示出來，讓開發人員知道哪些部分需要調整。（如上圖橘色文字）
除了基於文字大小的命名方式外，還能創建應用於特定功能的文本樣式，例如：Helper text、Tooltip、Table title…等，將特定文本樣式規範在設計系統，可確保在不同情境保持一致性。
📌 Chakra UI 的創始人對定義命名建議：Naming text styles
2) 探索複合組件
除了 Color Theme、Typography 之外，Chakra UI Theme 的內容還包含：陰影（Shadows）、邊框圓角（Radii）、間距（Spacing）、斷點（Breakpoints）以及容器（Containers）。
在設計稿中建立基本元件的同時，別忘了定義由基本元件組合而成的複合組件，例如：卡片（Card）、對話框（Dialog）、抽屜（Drawer）。在探索視覺稿（Mockup）風格時，嘗試不同的效果樣式-陰影及圓角效果，並將樣式規範定義在設計系統中，確保產品的一致性。
3) 元件（Component）優化：預設元件/自定義元件
在上一篇文章（part 1）中，提及 Chakra UI 元件的完整度不及其他成熟的設計系統，預設元件也無法完全符合設計需求。使用官方 Chakra UI Figma Kit 時需自行優化，舉例來說：按鈕、下拉選單、文本框的狀態並不完整。
設計稿的元件狀態完整（在 Figma 中可使用變體屬性），不只能讓設計系統易於管理，更能協助前端開發該元件。需要注意的是…
創建變體（Variants）需要時間，在創建一組變體之前需考慮工作負載量，可多使用 Figma Boolean 或隱藏圖層，避免變體數量過多難以管理。
📌 變體的使用方式，可看 Figma 官方文件：Create and use variants
雖然 Chakra UI 沒有內建日期選擇器、分頁等元件，但它提供了許多彈性讓設計和前端可以自定義元件。客製化元件時，設計師需考量所有情境，確保該元件的狀態、尺寸規格、樣式類型都已經包含在內。
目的驅動客製化元件，在使用者易於使用的同時(User-Friendly)，與程式開發之間達到平衡點 (Code-Friendly)。
4) 結合柵欄系統（ Grid System）
導入 Grid System 可以更有效地組織和排列內容，即使是版型複雜的儀表板也可以套用，實現產品一致性和視覺上的整齊感。
在柵欄系統中，易於整除是一個重要的原則。該專案設計系統使用 12 柵欄的結構，側邊欄展開或收合時，欄位（Column）的寬度依照螢幕尺寸調整。此外，全站使用 16px 作為基本間距單位，因此將間距（Gutter space - column 彼此之間的距離）設定為 16px，能提供元素對齊的規範。
5) 為設計系統製作一份 Onboarding !
最後，別忘了建立一份用戶指南 （Onboarding）！ 能幫助新成員迅速了解專案全貌，提供更友善的設計交付流程。設計師製作時，也可藉由此過程，檢查遺漏的規範。（變相逼迫設計師整理檔案 😆）
內容包含 /
- 概述：解釋目的、原則和核心價值，使用什麼套件或 UI 框架。
- 目錄 / 文件導覽：交付結構，檔案分為哪些部分，幫助新使用者找到需要的資訊。
- 使用指南：紀錄具體步驟，例如：如何創建新頁面、複製 Local Style、如何使用元件…等等。
- Theme：Typography 及 Color theme 簡介
- Component：介紹設計系統元件
- 設計原則：通用的核心原則
- 版本控制：同步最新功能，紀錄版本控制信息
建議向成熟的設計系統學習，例如：Material UI for Figma、Ant Design System for Figma、IBM Carbon Design System、Shopify Figma onboarding
D. 導入後回顧 🎊
目前專案已經告一個段落，回顧建立設計系統的過程，有幾點心得：
善用線上資源
每個 UI 框架都能帶來不同的經驗值，接觸不熟悉的 UI 框架時，官方文件及成熟的設計系統，都是最好的學習對象。
多跟不同的角色交流
每個人都有自己的盲點，主動跟前端、產品經理及專案外的角色廣泛互動，往往能獲得寶貴的回饋，探索不同的切入點。
持續維護設計系統
從專案起始到結束，設計系統不斷地擴充，透過功能和情境的增加，歸納出更完整的設計規範。
建立設計系統是持續不斷的迭代過程，隨著功能和情境增加，越能歸納出更完善的設計系統。
以上的分享，希望能夠為你的設計系統帶來一些啟發。當我剛踏入這個專案時，很難想像最終能達到的成果，由衷感謝所有參與專案並給予回饋的開發人員、產品經理，以及我自己😆
📌 如果你想更了解 Line-height：
- 深入 CSS 之 line-height 應用
- https://tailwindcss.com/docs/font-size
- https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
📌 Design System 製作範例：
感謝您的耐心閱讀，以上是我個人專案回顧的分享，如果你喜歡這次內容，請拍手給與小小的回饋鼓勵 👏👏👏
