Figma 新功能教学:Variables 变量 | 满屏都是知识点

Figma 新功能教学:Variables 变量 | 满屏都是知识点

sMao (草帽) 5390 位订阅者
6226 次观看 · 2023-07-18 UI 设计
Atlassian 设计系统:https://atlassian.design/tokens/design-tokens
Atlassian Figma 社区文件:https://www.figma.com/community/file/1182079839084966604
Google 设计系统 Design Token:https://m3.material.io/foundations/design-tokens/how-to-read-tokens
Figma 插件中文搜索(月维):https://moonvy.com/apps/find-figma

样式转变量插件:https://www.figma.com/community/plugin/1253669344925342575
样式批量断开插件:https://www.figma.com/community/plugin/1076733710017310027
变量导入导出插件:https://www.figma.com/community/plugin/1256972111705530093
变量文本翻译插件:https://www.figma.com/community/plugin/1261328328672869954
自动应用间距变量插件:https://www.figma.com/community/plugin/1258541120380373830

ChatGPT +Bob+沉浸式翻译教学:https://www.bilibili.com/video/BV1n14y1o79o/

---

00:00 变量基础介绍
03:15 变量嵌套的意义/梯度色板/颜色系统
08:19 Design Token 学习资料推荐
12:03 颜色变量(Color)/免费使用变量及付费功能
17:17 变量层级结构:合集/分组/命名/顺序
21:33 变量嵌套(别名/引用)
24:55 变量快速搜索
26:09 样式和颜色变量如何选择
30:03 样式批量转变量
32:35 梯度色板批量导入
35:06 数字变量(Number)
41:38 限定变量适用范围
44:24 推送变量时隐藏
46:14 自动间距变量插件
47:20 文本变量(String 字符串)
50:09 与组件变体的联动使用
53:56 布尔变量(Boolean)
55:29 布尔与组件变体的联动
57:59 变量 Mode/多主题
60:08 合集和 Mode 的 Tips
70:16 变量功能学习总结和好货推荐

---

关键内容:Design Token、亮暗主题、变量嵌套、Mode、组件变体联动