設計系統解封：探索 Figma Variables 的魔幻力量

你是否想要提高設計效率，同時保持設計一致性？Figma 最新功能 Variables 為你提供了這個奇蹟般的能力！

這個課程將帶領你深入了解 Figma 中的 Variables 功能，並教你如何運用它們來建立強大的設計系統。 透過這個課程，你將學習如何創建和管理不同類型的變數，包括顏色、數字、字串和布林值。這些變數將成為你設計系統的基石，使你能夠輕鬆地調整設計元素的外觀和風格，同時保持一致性和易於修改，你也將學習如何使用 Variables 定義 Design Tokens。

= 課程綱要 =

一、認識 Variables 功能的架構：

• 理解 Collections（集合）、Groups（群組）、Variables（變數）、Mode（模式）的運用方式。

• 學習如何正確分類組織你的變數。

二、學習如何使用四種不同類型的 Variables：

• Color（顏色）：例如主色調、次要色調和中性色調。為每個顏色變數分配相應的色值。在設計系統中使用這些變數，可以輕鬆地調整整個系統的色彩主題，確保一致性和易於修改。並理解如何定義 reference token, alias token, component token。

• Number（數字）：包含常用的間距、寬度、高度和字體大小等數值。使用這些變數來定義元素的尺寸和排版規則，使得調整和更新設計元素變得更加靈活和便捷。

• String（字串）：包含常用的文本元素，如按鈕文字、標題和段落樣式。使用這些變數來定義內容，使得在整個設計系統中一次性修改相關文字內容變得更加容易。將多國語系字串庫，內建於 Figma。

• Boolean（布林值）：可用於定義開關狀態或特定的設計選項。例如，切換整個設計系統明暗主題。

三、學習如何升級現有設計系統：

• 搬運現有 color styles 至 variables，並重新組織。

• 新增過去 Figma 不支援的功能：spacing, corner radius，讓設計更有效率。

購買後將可線上觀看教學影片（片長約 1 小時 40 分鐘）