如何为Flutter编写Style Dictionary自定义转换规则处理Figma设计令牌

步骤1：创建自定义转换逻辑文件 #

在你的project/style_dictionary/目录下新建custom-transforms.js，写入以下代码：

const StyleDictionary = require('style-dictionary');

// 注册Flutter颜色专用转换
StyleDictionary.registerTransform({
  name: 'flutter/color',
  type: 'value',
  transitive: true,
  matcher: (token) => token.type === 'color',
  transformer: (token) => {
    // 去掉十六进制颜色的#前缀
    const hex = token.value.replace('#', '');
    // 补全不透明alpha通道FF，包装为Flutter Color构造函数格式
    return `Color(0xFF${hex.toUpperCase()})`;
  }
});

// 继承原有flutter-separate转换组，加入自定义的颜色转换
StyleDictionary.registerTransformGroup({
  name: 'custom-flutter-color',
  transforms: [...StyleDictionary.transformGroup['flutter-separate'], 'flutter/color']
});

module.exports = StyleDictionary;

步骤2：修改配置文件 #

把你原来的config.json重命名为config.js，修改内容如下：

// 引入刚才写的自定义转换文件
const StyleDictionary = require('./custom-transforms');

module.exports = {
  "source": [
    "properties/*.json"
  ],
  "platforms": {
    "flutter": {
      "transformGroup": "flutter",
      "buildPath": "../lib/unique_file/",
      "files": [
        {
          "destination": "style_dictionary.dart",
          "format": "flutter/class.dart",
          "className": "StyleDictionary"
        }
      ]
    },
    "flutter-separate": {
      // 把原来的flutter-separate替换为自定义的转换组
      "transformGroup": "custom-flutter-color",
      "buildPath": "../lib/unique_file/",
      "files": [
        {
          "destination": "style_dictionary_color.dart",
          "format": "flutter/class.dart",
          "className": "StyleDictionaryColor",
          "type": "color",
          "filter": {
            "attributes": {
              "category": "colors"
            }
          }
        }
      ]
    }
  }
}

步骤3：执行构建命令 #

在style_dictionary目录下执行更新后的构建命令：

style-dictionary build --config config.js

执行完成后生成的style_dictionary_color.dart就会自动把颜色值包装为Flutter的Color类型实例，完全符合预期格式，不需要修改原有Figma导出的tokens文件。

内容的提问来源于stack exchange，提问作者preckrasno