I’m using AWS style dictionary to generate UI properties from Figma Tokens. I could not get custom transformer working.
Custom transform and my config file:
import StyleDictionary from "style-dictionary-utils";
import pkg from 'style-dictionary-utils';
const { transform } = pkg;
StyleDictionary.registerTransform({
name: 'font/createUIFont',
type: 'value',
matcher: function(token) {
return token.attributes.category === 'font';
},
transformer: function(token) {
console.log("hello", token);
const fontName = token.original.value;
const fontSize = token.attributes.size.value;
// Update the transformed value to return UIFont object instantiation
return `UIFont(name: "${fontName}", size: ${fontSize}) ?? UIFont.systemFont(ofSize: ${fontSize})`;
}
});
const config = {
source: ["tokens/**/*tokens.json"],
platforms: {
"ios-swift-separate-enums": {
"transformGroup": "ios-swift-separate",
"buildPath": "build/ios/",
"files": [{
"destination": "FontTokens.swift",
"format": "ios-swift/class.swift",
"className": "FontTokens",
"filter": {
"attributes": {
"category": "font"
}
},
"transforms": [
"font/createUIFont"
]
}]
}
},
};
StyleDictionary
.extend(config)
.buildAllPlatforms();
the font token:
{
"font": {
"headingg": { "$size": 20, "$value": "HelveticaNeue-Bold", "$weight": "bold" }
}
}
the output I get is:
public class FontTokens {
public static let headingg = "HelveticaNeue-Bold"
}
What I’m trying to achieve is to create a UIFont property
public class FontTokens {
public static let headingg = UIFont(name: "HelveticaNeue-Bold", size: 20)
}