带给你的

图像样式词典

变形的公用设备 样式词典 对象为某物 图片 托肯斯插件 明白吗.

用于设计系统 后灯 使用设计符号 样式词典 ,可以通过 图片 托肯斯插件。 。 。 .

该工具目前假定使用Figma Tokens插件的同步特性. JSON 输出被满足于此,因为它是一个包含符号集信息的单一文件.

特征

• 支持将一个符号组标记为自定义符号集,使其在Figma中作为单独的符号集出现. 默认, "global" 用作符号集,您的符号将被放入其中, 但你可以覆盖它。 如果您想要将许多基本符号组合成一个“ 全球” 组合, 但针对主题的符号组合组合组合成一个“主题黑暗”组合, 这一点将是有益的 。 您可以这样配置 :

  {
    "color": {
      "tokenset": "custom",
      "primary": {
        "base": {
          "type": "color",
          "value": "#14b8a6"
        }
      }
    }
  }
  

  color.primary.base 符号将出现在 custom 现在在插件中 . 您也可以通过路过配置或关闭此自动符号集映射 defaultTokenset: false 或为此配置字符串 defaultTokenset: 'default'

• 曲线 .value 由于 Figma Tokens 插件不使用此后缀, 故从引用值中选择 .

• 调整 name 由于 Figma Tokens 插件使用此属性来命名其符号, 但是, 没有名称属性, 它会用对象结构来创建自己的命名/消除, 这样会更好.

• 使用参考值而不是它的解析值。 打开 ignoreUseRefValue: true 如果想要破例并保留为已解析的值,则作为与道具值相比的属性.

• 允许通过一些可选选项来调整对象转换 :

  • 清洁Meta,如果 true,将清理一些样式词典所创建的元信息,Figma Tokens插件对此并不关心。 也可以通过一个 string[] 如果您想要配置一个元道具的黑名单, 您想要过滤自己

  transform(obj, { cleanMeta: ['foo', 'bar'] });
  

使用量

npm i @divriots/style-dictionary-to-figma

import { transform } from '@divriots/style-dictionary-to-figma';

const sdObject = { ... };
const figmaObj = transform(sdObject);

需要单独进口的,可以单独进口.

import {
  trimValue,
  trimName,
  useRefValue,
  markTokenset,
  cleanMeta,
} from '@divriots/style-dictionary-to-figma';

一旦你把对象转换成Figma,一个建议是把它推到GitHub并使用 图片 托肯斯插件 与它同步,以使用 Figma 中的符号.

用于 后灯 编号 : 样式词典

导入 transform 工具并创建样式词典格式:

const { transform } = require('@divriots/style-dictionary-to-figma');
const StyleDictionary = require('style-dictionary');

StyleDictionary.registerFormat({
  name: 'figmaTokensPlugin',
  formatter: ({ dictionary }) => {
    const transformedTokens = transform(dictionary.tokens);
    return JSON.stringify(transformedTokens, null, 2);
  },
});

或者您也可以直接将前置物放入配置中,而不必须注册:

const { transform } = require('@divriots/style-dictionary-to-figma');

module.exports = {
  source: ['**/*.tokens.json'],
  format: {
    figmaTokensPlugin: ({ dictionary }) => {
      const transformedTokens = transform(dictionary.tokens);
      return JSON.stringify(transformedTokens, null, 2);
    },
  },
  platforms: {
    json: {
      transformGroup: 'js',
      buildPath: '/tokens/',
      files: [
        {
          destination: 'tokens.json',
          format: 'figmaTokensPlugin',
        },
      ],
    },
  },
};

这上面有文件 /tokens/tokens.json figma Tokens 插件可以导入(例如通过 GitHub) .

自兹 后灯 已经 GitHub 图像 财务报告和审定财务报表 样式词典 这个过程非常简单.

为每个符号集创建 JSON

也许你想用这个工具 生成一个单独的JSON文件 对于每个符号集, 然后手动粘贴到 Figma Tokens 插件 JSON 视图中. 例如,当你不使用 Figma Tokens 插件同步功能时.

为了这个, 引用来自此问题的代码片断。 。 。 .