Figma Tokens Studio 中嵌套命名空间的样式字典参考错误

Question

描述

将样式字典与从 Figma Tokens Studio 导出的标记一起使用时，如果标记嵌套在带有正斜杠的命名空间下（例如“调色板/模式 1”），则会出现引用错误。但是，当令牌移动到根级别时，相同的引用可以正常工作。

复制步骤

1. 从 Figma Tokens Studio 导出代币
2. 使用以下配置设置样式词典：

export default {
  source: ["tokens.json"],
  platforms: {
    css: {
      transformGroup: transformGroups.css,
      files: [
        {
          destination: "vars.css",
          format: formats.cssVariables,
        },
      ],
    },
  },
};

当前行为

当标记嵌套在“调色板/模式 1”下时，样式字典会引发引用错误：

Error:
Reference Errors:
Some token references (4) could not be found.

palette/Mode 1.text.placeholder.value tries to reference neutral.coolgray.50, which is not defined.
palette/Mode 1.text.title.value tries to reference neutral.coolgray.100, which is not defined.
palette/Mode 1.text.dimmed.value tries to reference neutral.coolgray.60, which is not defined.
palette/Mode 1.border.default.value tries to reference neutral.coolgray.30, which is not defined.

预期行为

无论命名空间结构如何，引用都应该有效。以下参考模式应该都有效：

当前（失败）：{neutral.coolgray.50}

代币结构

{
  "palette/Mode 1": {
    "neutral": {
      "coolgray": {
        "50": { "value": "#9ca3af", "type": "color" }
      }
    },
    "text": {
      "placeholder": {
        "value": "{neutral.coolgray.50}",
        "type": "color"
      }
    }
  }
}

问题

转换为以下代币的最佳方式是什么？

.
.
.
  --neutral-coolgray-90: #1f2937;
  --neutral-coolgray-100: #111827;
  --neutral-coolgray-110: #0a0e13;
  --feedback-error: #f03e3e;
  --feedback-success: #63e6be;
  --feedback-warning: #ffe066;
  --text-placeholder: #9ca3af;
  --text-title: #111827;
  --text-error: #fa5252;
  --text-dimmed: #6b7280;

我提到了下面的问题，但我在 token studio 中找不到“包含父密钥”。 #903

环境

Style Dictionary version: [4.3.0]
Node.js version: [20.16]
Figma Tokens Studio version: [2.3.0]

Answer 1

我遇到了完全相同的问题：

1. 拥有 Figma UI 套件
2. 通过 Figma Tokens Studio 导出代币
3. 尝试将 token 转换为 css 变量

这是我解决问题的方法：

1. 使用这里的

   build-output.js

   ：https://github.com/tokens-studio/sd-transforms?tab=readme-ov-file#single-file-tokens-example
2. Ran

   node build-output.js

   然后在

   tokens/*.json

中创建了“提取的”令牌文件
3. 使用以下

   config.json

   文件作为样式字典配置：

{
 "source": ["tokens/Aura/Light.json"], <-- Path to the extracted "Theme" file
 "platforms": {
   "css": {
     "transformGroup": "css",
     "buildPath": "build/css/",
     "files": [
       {
         "destination": "_variables.css",
         "format": "css/variables"
       }
     ]    
   }
 }
}

4. 然后运行：

   pnpm npx style-dictionary build -c config.json --verbose

   （我们正在使用

   pnpm

   ，但您也可以直接使用

   npm

   或

   npx

   。）
5. 这创建了文件

   css/_variables.css

   ，然后我可以在我的应用程序中使用它。

您可以进行更多微调，但这帮助我将 Figma 变量放入应用程序中的 CSS 变量中。

希望有帮助！