figma font family transformer (#899)

src/PrimerStyleDictionary.ts

@@ -12,6 +12,7 @@ import {
   durationToCss,
   figmaAttributes,
   fontFamilyToCss,
+  fontFamilyToFigma,
   fontWeightToNumber,
   jsonDeprecated,
   namePathToDotNotation,
@@ -216,6 +217,11 @@ StyleDictionary.registerTransform({
   ...fontFamilyToCss,
 })
 
+StyleDictionary.registerTransform({
+  name: 'fontFamily/figma',
+  ...fontFamilyToFigma,
+})
+
 /**
  * @name {@link PrimerStyleDictionary}
  * @description Returns style dictionary object with primer preset that includes parsers, formats and transformers

src/platforms/figma.ts

@@ -25,13 +25,19 @@ export const figma: PlatformInitializer = (outputFile, prefix, buildPath, option
     'name/pathToFigma',
     // 'name/pathToSlashNotation',
     'figma/attributes',
+    'fontFamily/figma',
     'dimension/pixelUnitless',
     // 'border/figma',
     // 'typography/figma',
     'fontWeight/number',
   ],
   options: {
     basePxFontSize: 16,
+    fontFamilies: {
+      'fontStack/system': 'SF Pro Text',
+      'fontStack/sansSerif': 'SF Pro Text',
+      'fontStack/monospace': 'SF Mono',
+    },
     ...options,
   },
   files: [

src/transformers/fontFamilyToCss.ts

@@ -28,7 +28,7 @@ export const parseFontFamily = (value: unknown): string => {
  * @description converts fontFamily tokens value to string
  * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
  * @matcher matches all tokens of $type `fontFamily`
- * @transformer returns a number
+ * @transformer returns a string
  */
 export const fontFamilyToCss: StyleDictionary.Transform = {
   type: `value`,

src/transformers/fontFamilyToFigma.ts

@@ -0,0 +1,35 @@
+import type StyleDictionary from 'style-dictionary'
+import {isFontFamily} from '../filters'
+/**
+ * takes a value and returns it if its a string or concats strings in an array quoting strings with spaces
+ * @param value
+ * @returns string
+ */
+export const parseFontFamily = (
+  token: StyleDictionary.TransformedToken,
+  fontFamilies: Record<string, string> = {},
+): string => {
+  // return value from fontFamilies
+  if (token.name in fontFamilies) {
+    return fontFamilies[token.name]
+  }
+  // return string
+  if (typeof token.value === 'string') {
+    return token.value
+  }
+  // invalid value
+  throw new Error(`Invalid value ${token.value}, should be a string or array of strings`)
+}
+/**
+ * @description converts fontFamily tokens value to string
+ * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
+ * @matcher matches all tokens of $type `fontFamily`
+ * @transformer returns a string
+ */
+export const fontFamilyToFigma: StyleDictionary.Transform = {
+  type: `value`,
+  transitive: true,
+  matcher: isFontFamily,
+  transformer: (token: StyleDictionary.TransformedToken, platform: StyleDictionary.Platform): string =>
+    parseFontFamily(token, platform.options?.fontFamilies),
+}

src/transformers/index.ts

@@ -10,6 +10,7 @@ export {dimensionToPixelUnitless} from './dimensionToPixelUnitless'
 export {durationToCss} from './durationToCss'
 export {figmaAttributes} from './figmaAttributes'
 export {fontFamilyToCss} from './fontFamilyToCss'
+export {fontFamilyToFigma} from './fontFamilyToFigma'
 export {fontWeightToNumber} from './fontWeightToNumber'
 export {jsonDeprecated} from './jsonDeprecated'
 export {namePathToCamelCase} from './namePathToCamelCase'