前兩天我完成了 App 的 UI 初稿，今天想試著將這些設計系統化。這個過程有助於建立一套完整的設計規範，讓後續的設計和開發更有效率，也能確保 App 整體視覺的一致性～

在 Figma 中，建立設計系統主要會用到 Styles 和 Variables 這兩個功能。它們各有優勢，但用法略有不同：

• Styles：較早出現的功能，適用於顏色、文字、效果（如陰影）和網格。它能將屬性獨立儲存，並應用到多個元件上。雖然無法直接定義數值，但可以透過設定 Style 來間接代表數值。
• Variables：較新的功能，除了顏色，還能直接定義數值（如圓角、間距），並且支援多主題模式（但多主題模式要付錢才用ＱＱ）。它的靈活性更高，特別適合用來定義間距和數值類的規範～

當你有了設計系統，就能體驗到像是這樣快速調整全局視覺的好處，不管是用 Variables 調整顏色：

或是用 Styles 調整字型：

所有對應到的元件都會一起進行調整！

首先找出設計的最小單元

這些元素可以歸類為以下幾大類：

• 顏色 (Colors)：專門用來管理所有顏色樣式。
• 字型（Typography）：專門用來管理所有字型樣式和文字樣式。
• 間距（Spacing）與圓角（Radius）：定義了所有元件的留白和邊角。
• 圖示（Icons）：存放所有 Icon 主組件。

顏色（Colors）

• 色板 (Palette)： 這是你設計系統中所有顏色的集合。
  • 品牌色 (Brand Colors)： 包含你的主色 (Primary) 和輔助色，這次我只使用了主色若後續有添加輔助色會再補上。
  • 中性色 (Neutral Colors)： 也就是灰階 (Grayscale)。
  • 狀態色 (Status Colors)： 包含成功 (Success)、資訊 (Info)、警告 (Warning) 和錯誤 (Error) 等。
• 色階 (Color Scale)： 為每個品牌色建立一個完整的色階，通常從 100 到 900 或 50 到 950。這次的色階我是使用這一個網頁幫助我生成～

補充：灰階之所以沒有使用純黑或純白，是因為容易感到眼睛疲勞，且視覺效果生硬、缺乏層次。適度的灰色能讓介面看起來更柔和、更具質感，並有助於建立更好的視覺層級。

字型（Typography）

• 字體等級（Hierarchy）：確保每個等級都有明確的用途。
  • Display：通常用於超大標題，吸引目光。
  • Headline：主要頁面或區塊標題。
  • Title：次級標題或卡片標題。
  • Body：內文，最常用於閱讀。
  • Label：小型文字，如表單標籤或按鈕文字。
• 字重（Weight）：
  • 確保你在整個設計系統中使用的字重是一致的。例如，如果你的標題都用 Bold，那麼在任何新的標題樣式中都應該繼續使用 Bold，而不是 SemiBold 或其他。
  • 過多：一個設計系統通常不需要太多不同的字重。過多的字重會導致視覺混亂，同時也會增加字型檔案的大小，影響網頁或 App 的載入速度。
  • 過少：至少需要兩種字重：
    • 一種用於內文閱讀（例如 Regular 或 Medium）。
    • 一種用於標題或強調文字（例如 Bold）。
• 行高（Line Height）：盡可能遵循業界廣泛使用的 8 點網格系統（或 4 的倍數），使用偶數的倍數，能確保整個 UI 介面在視覺上達到和諧與一致。使用 8 點網格能確保設計稿與裝置像素完美對應，減少渲染模糊和錯位，特別是在行動裝置上。
• 字距（Letter Spacing）：
  • 大標題（Display/Headline）：對於大尺寸的字體，有時需要將字距設為一個負值來增加視覺上的緊湊感，以達到更好的美感。例如 -0.5 或 -1。
  • 小字（Label）：對於小尺寸的字體，有時需要將字距設為一個正值來增加可讀性，特別是在全部大寫時。例如 0.2 或 0.5。
• 命名方式：選用 Size-based Naming，這種命名方式直接代表數值的大小層級，直觀易懂，且未來如果需要，也很容易新增數值來擴充。雖然尺碼命名簡單直觀，但它缺乏語意。當專案變得複雜，需要支援多主題或不同平台時，未來可以考慮升級為 基礎變數 + 語意變數 的分層架構。
• 字型載入與後備（Fallback）：確保我們的字型在所有裝置上都能穩定顯示，並處理字型無法載入時的情況，備字型在視覺上與主字型最接近，以減少設計破壞的風險。（不過這一點在 Figma 上似乎無法設定，但可以在設計規範文件中明確標註～）

間距（Spacing）／圓角（Radius）

• 數值選擇：盡可能遵循業界廣泛使用的 8 點網格系統（或 4 的倍數），使用偶數的倍數，能確保整個 UI 介面在視覺上達到和諧與一致。使用 8 點網格能確保設計稿與裝置像素完美對應，減少渲染模糊和錯位，特別是在行動裝置上。
• 命名方式：選用 Size-based Naming，這種命名方式直接代表數值的大小層級，直觀易懂，且未來如果需要，也很容易新增數值來擴充。雖然尺碼命名簡單直觀，但它缺乏語意。當專案變得複雜，需要支援多主題或不同平台時，未來可以考慮升級為 基礎變數 + 語意變數 的分層架構。

間距：可以透過 Auto Layout 和 Frame 來呈現你定義好的間距系統。
圓角：可以呈現不同尺寸的圓角範例。

圖示（Icons）

目前的 icon 我是在跟 Gemini 討論後，列出這個 App 可能會使用到的 Icon，然後直接請 Stitch Design 生成後，右鍵設定成 Component。這樣做的好處是能統一管理與單點維護，只需要修改主元件一次，所有使用它的地方都會自動更新～

設計系統總覽

目前我是開不同 Frame 在同一個 Page 進行統整，未來若有擴充可以考慮獨立 Page 避免影響到 Figma 載入速度～

終於成功地把 UI 初稿的每個視覺元素，變成一個有邏輯的設計系統了，第一次做設計系統比想像中耗時好多ＱＱ 但也讓我更了解 Figma 以及獲得許多設計相關的新知識，接下來這個設計系統將成為我接下來所有 UI 設計的基石，後續在 Flutter 的切版開發就可以更順利了！

視覺系統搞定了，接下來終於要開始撰寫 Flutter 程式碼了！