令牌图谱与令牌地图

令牌之间相互引用——语义颜色指向原始值,组件令牌又指向语义令牌。variable Jar 用两个视图展示这些引用:令牌图谱 回答”如果改了这个令牌,还有什么会跟着变?“,令牌地图 则把整个项目铺成一张图。

打开令牌图谱

  • 打开项目,在左侧导航栏中选择 令牌图谱 标签页。
  • 在母版表格中右键点击变量并选择 查看引用关系——令牌图谱会在选中该令牌的状态下打开。
  • 视图分为上下两部分:上方是层级树,下方是摘要视图。拖动分隔线可调整大小;双击可恢复自动大小。

层级与颜色透镜

层级树按照与直接值的距离对所有令牌排序。

  • 层级 0 是原始值——不引用任何东西的令牌。层级 1 引用层级 0,层级 2 引用层级 1,依此类推。每列标题显示层级和令牌数量;悬停可查看类型构成,以及该列是 原始值 还是 引用。
  • 如果彼此之间没有任何引用,只会有一个标记为 无引用关系 的 全部令牌 列。
  • 令牌按名称前缀分组。点击分组行可展开其成员;行上的 ↔ N 表示连接数。悬停在列标题上会出现 − / + 步进器(减小分组深度 / 增加分组深度),可更改该列的分组深度——只有名称有嵌套(a/b/c)的列才会出现。
  • 悬停在某行上会点亮其连接线并淡化其余部分。
  • 工具栏中的 着色依据 会在每个令牌前涂上状态圆点:无、不在 Figma 中(在网页上创建但尚未到达 Figma 的令牌)或 作用域。随后列标题会显示计数标记(色点加数字;悬停可看名称)——作用域 为已设作用域 · 全部 · 已隐藏 · 未收集各一个,不在 Figma 中 为一个计数标记(请参阅变量元数据)。

影响摘要

点击任意令牌,右下角会出现摘要面板。

选中 color/accent 的令牌图谱 — "更改后影响 1 个",下方是引用链,右下角是摘要面板
选中 color/accent 的令牌图谱 — "更改后影响 1 个",下方是引用链,右下角是摘要面板
  • 更改后影响 N 个 — 沿引用链一直追到底,使用这个令牌的令牌数量。这是编辑值之前要看的数字。
  • 引用 N 个值 — 这个值来自多少个源令牌(直接引用及其来源)。
  • 层级树下方的摘要视图会画出所选令牌周围的引用链:左侧为 引用,右侧为 被引用于,令牌居中。点击链中的令牌只高亮它自己的路径;再次点击取消高亮。没有关系的令牌显示 此令牌没有引用关系。
  • 聚焦 开关:打开时,点击链中的令牌会以它为中心重新排布视图,并隐藏无关令牌。关闭时,点击只会高亮。
  • 面板中的标签圆点可在浏览时用颜色标记令牌——与表格 标签 列中看到的是同一套标签。
  • 悬停在分隔线上并点击 收起摘要 手柄,可将摘要视图折叠为细长的 摘要 栏;点击该栏(展开摘要)即可恢复。无论哪种情况,所选令牌的面板都会保留。

导航与跳转

  • 标题旁的 ‹ / › 按钮像浏览器的后退和前进一样在看过的令牌之间移动。键盘快捷键为 [(上一个查看的令牌)和 ](下一个令牌);在输入框中输入时会被忽略。
  • 在摘要视图的空白处拖动可平移,滚轮也可平移。双击空白处可回到中心,平移后左下角出现的 居中 按钮也可以。
  • 在母版中打开 会在选中该令牌的状态下打开母版表格。表格上会保留 返回令牌图谱 提示,一键即可返回。Cmd+点击 会在新窗口中打开。
  • 在令牌地图中打开 会跳到选中同一令牌的地图;地图中的 在令牌图谱中打开 可以返回,此时令牌图谱上会显示 返回令牌地图 提示。

循环引用

回到自身的别名链没有可以解析的值。variable Jar 会阻止形成这样的链,并显示继承下来的循环。

  • 在表格中,会闭合循环的别名会在选择器中以 会形成循环引用 被拒绝;会造成循环的粘贴会跳过这些单元格:已跳过 N 个单元格(循环引用)。
  • 如果已经存在循环,令牌图谱中会添加一个红色的 循环引用 列。循环的成员排列在一个环上,箭头沿环流动;悬停在环上可读出路径,点击成员可选中它。
  • 环下方的 受影响 N 个 — 无法解析 列出指向该循环但不属于循环的令牌——它们同样无法解析。
  • 修复方法是给循环中任意一个成员设置直接值:为循环中的任一成员设置直接值即可解开整条链。
循环引用列 — a↔b 环以及受影响令牌列表
循环引用列 — a↔b 环以及受影响令牌列表

令牌地图

导航栏中的 令牌地图 标签页一次展示整个项目:每个令牌是一个节点,每条引用是一条线。分组一开始是折叠的,因此大型项目也能保持清晰可读。

令牌地图 — 每个集合聚成一组,由引用线相连
令牌地图 — 每个集合聚成一组,由引用线相连
  • 滚轮 缩放。点击分组 将其展开(其他分组收起);Shift+点击 可同时展开多个。点击标签上的 ✕ 关闭一个,按 Esc 关闭全部。点击令牌可将其聚焦。
  • 标题栏中的 所有类型 下拉菜单支持多选:选择要高亮的类型;取消最后一个时恢复为所有类型。旁边的 标签 色点会高亮带有该标签的令牌——只显示项目中用到的颜色。
  • 隐藏未引用项 会移除没有连接的令牌。搜索框(搜索 — 高亮匹配项)会让匹配项变亮,其余淡化但不隐藏。
  • 左下角:合并分组 切换是否合并分组,查看全部 让整张地图回到视野内。
  • 点击令牌,信息面板会显示其类型、连接 N 个、居中 快捷方式、引用(N)和 被引用于(N)列表,以及 在令牌图谱中打开 和 在母版中打开。点击分组可看到其 分组 标记、令牌数量、已连接 N 个 和 成员。
  • ‹ / › 按钮和 [ / ] 快捷键在这里的用法与令牌图谱中相同。