Figma 高階實戰教學：Variables 變數、Design Tokens 與設計系統架構
拒絕上百個變體的維護惡夢！深入掌握 Figma Component Properties 組件屬性、Variables 三層級 Design Tokens、Dark Mode 切換與條件邏輯高階原型。
主題摘要
為什麼你的組件庫越做越臃腫？用 Component Properties 與 Variables 重構設計系統
當你已經熟練掌握 Auto Layout 與基礎組件後，在面對中大型產品專案時，往往會撞上第二道牆：為了一個按鈕的不同尺寸、狀態、有無左右圖示，竟然要展開幾十甚至上百個 Variants（變體），改一個圓角或色號就讓整個團隊崩潰！🤯 這份專題以整理組件庫為出發點，集中介紹 Component Properties（組件屬性） 與 Variables（變數 / Design Tokens）。
透過將 Boolean（布林值顯示隱藏）、Instance Swap（實例替換）、Text（文本屬性）與 Expose Nested Instances（展開內嵌實例）結合，原本需要 96 個變體的複雜組件可以瞬間收斂到剩幾種核心狀態。再加上 Variables 變數的分層架構（Primitive 原始色階 → Alias 語意化 Token → Mapped 組件映射），不僅能一鍵切換 Light / Dark Mode 深淺色主題，還能直接與前端工程師的程式碼變數對照！💡
從組件屬性架構、Design Tokens 色階到條件邏輯原型與 AI 生成的 3 階段進階指南
這次兔兔為已經具備 Figma 基礎的讀者精選了 8 部高階實戰影片，分為三大核心模組：第一模組專攻 Component Properties 四大屬性、變體命名規範與跨團隊共享組件庫管理；第二模組深入拆解 Variables 變數系統、三層級 Design Tokens 與深淺色模式（Dark Mode）實作；第三模組則帶你運用變數實現 購物車加減運算、條件邏輯判斷（Conditionals）的高擬真 Prototype，並同場加映最新 Figma Make AI 指令化生成介面與連接設計系統的高效工作流！🔥
🎬 高階組件架構：Component Properties 四大屬性與組件庫管理
高效設計系統進階篇：用 Component Properties 大幅縮減組件變體數量
從設計系統維護者的角度出發，完整示範如何將 Variant、Text、Boolean、Instance Swap 與 Expose Nested Instances 五大控制項整合進單一主組件，讓團隊成員在右側面板就能直覺調整所有元件狀態。
展開觀看參考原片（YouTube）
20 分鐘深度拆解組件四大屬性與內嵌實例（Nested Instances）實戰
針對複雜卡片與導覽列組件，手把手演練何時該用變體（Variants）、何時該改用布林屬性（Boolean）或實例交換（Instance Swap），並解決多層嵌套組件需要頻繁雙擊進入內層修改的痛點。
展開觀看參考原片（YouTube）
組件變體（Variants）斜線命名法、多維度屬性結構與狀態管理規範
詳解業界標準的組件變體命名邏輯與屬性維度拆分方式，教你如何為按鈕與表單元件設定清晰的狀態矩陣（Default / Hover / Pressed / Disabled），讓組件庫具備高度可擴充性。
展開觀看參考原片（YouTube）
團隊共享組件庫（Team Library）發佈流程、路徑分類與隱藏私有組件技巧
聚焦小型專案與跨專案團隊組件庫的差異，示範如何透過頁面與框架階層建立整潔的 Assets 資產路徑、如何使用「.」或「_」前綴隱藏底層基礎組件（Base Components），以及版本發佈與同步更新的最佳實踐。
展開觀看參考原片（YouTube）
🎬 Design Tokens 與 Variables 變數：多主題與 Dark Mode 顏色系統
70 分鐘 Variables 變數百科全書：Design Token 嵌套、4 大變數類型與多主題 Mode
結合 Atlassian 與 Google Material 3 的真實 Design Token 架構，超深入剖析 Color、Number、String、Boolean 四種變數的層級命名、變數別名引用（Alias）、Scope 適用範圍限制，以及與組件變體的自動連動。
展開觀看參考原片（YouTube）
從零實作顏色設計系統：Base Color、Color Token 配對與 Dark Mode 切換互動
完整演示如何從底色（Base Color）建立到語意化顏色標籤（Color Token），並利用 Scope 整理屬性面板選項、配置 Light / Dark Mode 雙模式，以及加上工程交接必備的程式碼變數替代命名（Code Syntax）。
展開觀看參考原片（YouTube）
🎬 變數邏輯運算高階原型（Adv Prototype）與 Figma Make AI 工作流
高階原型實戰：利用 Variable 變數實現條件判斷、邏輯運算與購物 App 動效
打破傳統一張張畫跳轉頁面的原型做法！以可互動的購物 App 為例，教你結合橫向走馬燈、Loading 動畫，以及運用數值與布林變數（Variables）實現購物車條件判斷與邏輯運算。
展開觀看參考原片（YouTube）
Figma Make AI 進階實戰：結合既有設計系統與 Supabase 後台生成高保真產品
詳細解析如何運用 Figma Make 透過精準 AI Prompt 生成介面、使用 Point and Edit 局部微調、匯入自家設計系統組件與 Figma 設計稿，甚至串接 Supabase 後台資料並直接發佈上線！
展開觀看參考原片（YouTube）
More Picks Ready for You
兔兔仲挖咗 3 部延伸影片
+3
兔兔推薦
雙面掃描入檔指南：奇偶頁序合併、中英文OCR校對與可搜尋PDF整理
紙本合約、講義與單據雙面掃描後，常出現奇偶頁順序錯亂或無法用關鍵字搜尋的問題。兔兔整理奇偶頁交錯合併、頁面方向調整、中英文混排OCR光學文字辨識與可搜尋PDF文字層校對步驟，助你建立清晰的數位檔案庫。
USB4擴充塢接雙螢幕怎麼挑：頻寬、供電與相容性避坑指南
都是Type-C插頭，為何外接雙螢幕不是黑屏就是只能鏡像？兔兔帶大家拆解USB4滿血40Gbps頻寬、Mac與Windows的MST協定差異，以及PD供電瓦數扣留陷阱，輕鬆搞定桌面多屏擴展。
視訊會議收音悶濁：麥克風位置、回音與輸入選擇
線上開會總被嫌聲音遠、悶濁或有回音？兔兔帶你從訊號路徑排查問題：釐清麥克風指向性與距離、排除軟體誤抓視訊鏡頭輸入，不花冤枉錢也能擁有清晰專業人聲！
LinkedIn求職公開對象：綠框與僅限招募人員怎麼選
想換工作又怕被老闆發現？兔兔帶你拆解 LinkedIn 的「Open to Work（尋找新工作）」設定！搞懂所有會員可見（綠色頭像外框）與僅限招募人員（Recruiters only）的實際差別、後台演算法曝光效益，以及官方隱私機制的真正保護邊界。
今次搵到嘅主題就咁多，遲啲再嚟啦。
呢篇用咗 AI 協助整理，亦有人編輯，仍可能有錯漏或偏差。 如果你係片主而唔想影片喺呢度展示，請聯絡我哋。