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文字层校对步骤，助你建立清晰的数位档案库。
iPhone Duo 灾情与拆解：内屏爆裂原因、贴膜禁忌与官方免费换机
苹果首款折叠机 iPhone Duo 开卖即爆「内屏幕破裂灾情（Crackgate）」！兔兔整合全球首发苦主实况、iFixit 工业 CT 扫描拆解元凶、副厂钢化膜翻车警告，以及苹果官方最新免费换机保固政策。
延长插座不够用怎么办：电器瓦数负载计算与延长线安全选用
插座不够插，延长线接延长线超危险？别让居家便利变成走火隐患！由家电铭牌瓦数计算、墙面插座回路限制到合格防过载延长线挑选，兔兔帮你理清安全用电重点。
USB4扩充坞接双屏幕怎么挑：频宽、供电与相容性避坑指南
都是Type-C插头，为何外接双屏幕不是黑屏就是只能镜像？兔兔带大家拆解USB4满血40Gbps频宽、Mac与Windows的MST协定差异，以及PD供电瓦数扣留陷阱，轻松搞定桌面多屏扩展。
今次揾到嘅主题就咁多，迟啲再嚟啦。
呢篇用咗 AI 协助整理，亦有人编辑，仍可能有错漏或偏差。 如果你系片主而唔想影片喺呢度展示，请联络我哋。