变量元数据

变量承载的不只是值,还有它可以在哪里使用的信息。variable Jar 在母版表格和详情面板中管理三种元数据。

元数据作用Figma 同步
作用域限制变量显示在哪些属性选择器中✓ 往返
描述说明变量用途的备注✓ 往返
标签按颜色区分的内部分组仅网页

作用域和描述会在同步时从 Figma 读取,你在网页上的编辑会回到 Figma 的变量面板。标签只存在于网页,绝不会触及 Figma。

和值一样,作用域和描述也可能冲突。如果同一个变量的作用域或描述在同步前于 Figma 和网页上被改成了不同内容,冲突横幅会以 作用域也有分歧 · N / 描述也有分歧 · N 统计数量,你可以像处理值冲突一样,在该列中逐行选择 Figma 一侧或 VA 一侧(请在“作用域”列中逐行选择 / 请在“描述”列中逐行选择)。选择和应用方式与 Figma 同步冲突部分所述相同。

显示元数据列

按工具栏中的列图标(提示文字 视图 — 列与颜色),在 列 部分切换 模式 · 描述 · 标签 · 作用域 列。菜单会保持打开,因此可以连续切换多列。

视图菜单 — 在“列”部分切换模式、描述、标签和作用域
视图菜单 — 在“列”部分切换模式、描述、标签和作用域

三列都打开后,可以在母版表格的一行中同时读到描述、标签和作用域。

打开描述、标签和作用域列的母版表格
打开描述、标签和作用域列的母版表格

评论可以像值单元格一样固定在描述、标签和作用域单元格上。隐藏该列时评论仍会保留,跳转到评论时隐藏的列会重新显示。

作用域——变量可以在哪里使用

作用域决定变量出现在 Figma 的哪些属性选择器中。把颜色变量限制为 文本 填充后,别人选择框架背景色时就不会再看到它。

  • 作用域 单元格汇总当前状态——全部(所有支持的属性)、无、所选作用域的名称(例如 “框架, 文本”——列太窄时其余的会收进 +N 标记),尚未从 Figma 收集作用域的变量显示 ”—“。悬停在 ”—” 上会显示 尚未从 Figma 收集 — 将在下次同步时进行。
  • 点击单元格会打开与 Figma 作用域对话框层级和图标相同的列表,可以连续切换多个作用域。列表只显示对该变量类型有效的作用域——颜色为 填充(其下有 框架 · 形状 · 文本)以及 描边 · 效果;数字从 圆角半径 一直到 排版 组;字符串为 文本内容 · 字体系列 · 字重或样式。
  • 在所有支持的属性中显示 就是同时勾选所有作用域——打开后所有单项作用域都会亮起;取消其中任意一项,顶行会取消而其余保持勾选。对颜色变量来说,填充 对框架、形状和文本填充的作用方式相同。
  • 布尔值的作用域单元格为只读——Figma 不支持为布尔变量设置作用域。
从单元格打开的作用域列表 — 与 Figma 作用域对话框层级相同
从单元格打开的作用域列表 — 与 Figma 作用域对话框层级相同

描述

  • 直接在 描述 列输入,或在详情面板中编辑。描述会与 Figma 中变量的描述往返同步。
  • 在网页上清空描述不会删除 Figma 中的描述——同步不会抹掉 Figma 一侧的描述。

标签

  • 标签 是从 7 色调色板(红色 · 琥珀色 · 绿色 · 蓝色 · 紫色 · 洋红色 · 灰色)中选择的内部分组。点击 标签 列的单元格,在调色板中切换颜色;一个变量可以带多个标签。
  • 单元格以并排的圆点显示标签颜色;超过四个时,其余收进 +N。调色板中的 无标签 可全部清除。
  • 标签只存在于网页——不会写入 Figma,也不会被同步清除。

一次编辑多个变量

悬停在行上时会出现详情图标,点击即可打开详情面板。选中多行时,面板切换为 已选择 N 个 并编辑整个选择。

  • 输入的描述会应用到所有选中的变量。
  • 选择中不一致的作用域和标签显示为 混合;点击作用域复选框或标签色点即可统一。
  • 不能跨不同类型编辑作用域——请选择同一类型的变量。
  • 一次 Ctrl(⌘)+Z 即可撤销整批修改。
详情面板 — 名称、描述、标签调色板和作用域列表集中在一处
详情面板 — 名称、描述、标签调色板和作用域列表集中在一处

用颜色查看状态——令牌图谱

在令牌图谱标签页中,可以把元数据涂在结构上,一目了然。

  • 在图谱工具栏的 着色依据 中选择 不在 Figma 中,会高亮尚未存在于 Figma 的变量;每个引用层级都会显示带数量的 不在 Figma 中 N 计数标记。在母版表格中,只要项目已连接到 Figma 文件,这一状态就会一直显示——悬停在名称旁的圆点上会显示 尚不在 Figma 中 — 下次同步创建后即消失。
  • 选择 作用域,每个引用层级会显示 已设作用域 N · 全部 N · 已隐藏 N(没有作用域——变量不会出现在任何选择器中)· 未收集 N 计数标记,让你直接在结构上发现未完成的令牌。
  • 标签色点也会显示在图谱中令牌旁边。