feat: add boundVariable(s) to typography and custom font tokens

package.json

@@ -1,6 +1,6 @@
 {
   "name": "design-tokens",
-  "version": "6.12.0",
+  "version": "6.11.3",
   "description": "Export design tokens from Figma",
   "main": "plugin.js",
   "engines": {

src/extractor/extractFonts.ts

@@ -101,75 +101,85 @@ const parseFontStyle = (fontStyle: string): FontStyle => {
 }
 
 const extractFonts: extractorInterface = (tokenNodes: TextStyle[], prefixArray: string[]): fontPropertyInterface[] => {
-  // get raw text styles
-  return tokenNodes.map(node => ({
-    name: `${prefixArray[0]}/${node.name}`,
-    category: 'font' as tokenCategoryType,
-    exportKey: tokenTypes.font.key as tokenExportKeyType,
-    description: node.description || undefined,
-    values: {
-      fontSize: {
-        value: node.fontSize,
-        unit: 'pixel' as UnitTypePixel,
-        type: 'number' as PropertyType
-      },
-      textDecoration: {
-        value: textDecorations[node.textDecoration] as TextDecoration,
-        type: 'string' as PropertyType
-      },
-      fontFamily: {
-        value: node.fontName.family,
-        type: 'string' as PropertyType
-      },
-      fontWeight: {
-        value: parseFontWeight(node.fontName.style),
-        type: 'number' as PropertyType
-      },
-      fontStyle: {
-        value: parseFontStyle(node.fontName.style),
-        type: 'string' as PropertyType
-      },
-      fontStretch: {
-        value: parseFontStretch(node.fontName.style),
-        type: 'string' as PropertyType
-      },
-      _fontStyleOld: {
-        value: node.fontName.style,
-        type: 'string' as PropertyType
-      },
-      letterSpacing: {
-        value: roundWithDecimals(node.letterSpacing.value),
-        unit: <NumericUnitTypes>(node.letterSpacing.unit.toLowerCase() === 'pixels' ? 'pixel' : node.letterSpacing.unit.toLowerCase()),
-        type: 'number' as PropertyType
-      },
-      lineHeight: {
-        // @ts-ignore
-        value: roundWithDecimals(node.lineHeight.value) || 'normal',
-        unit: node.lineHeight.unit.toLowerCase() === 'pixels' ? 'pixel' : node.lineHeight.unit.toLowerCase(),
-        type: (Object.prototype.hasOwnProperty.call(node.lineHeight, 'value') ? 'number' : 'string') as PropertyType
-      },
-      paragraphIndent: {
-        value: node.paragraphIndent,
-        unit: 'pixel' as UnitTypePixel,
-        type: 'number' as PropertyType
-      },
-      paragraphSpacing: {
-        value: node.paragraphSpacing,
-        unit: 'pixel' as UnitTypePixel,
-        type: 'number' as PropertyType
+  return tokenNodes.map(node => {
+    // Convert VariableAlias objects to variable ID strings
+    const boundVariables = node.boundVariables
+      ? Object.entries(node.boundVariables).reduce((acc, [field, alias]) => {
+          acc[field as VariableBindableTextField] = alias.id
+          return acc
+        }, {} as { [field in VariableBindableTextField]?: string })
+      : undefined
+
+    return {
+      name: `${prefixArray[0]}/${node.name}`,
+      category: 'font' as tokenCategoryType,
+      exportKey: tokenTypes.font.key as tokenExportKeyType,
+      description: node.description || undefined,
+      values: {
+        fontSize: {
+          value: node.fontSize,
+          unit: 'pixel' as UnitTypePixel,
+          type: 'number' as PropertyType
+        },
+        textDecoration: {
+          value: textDecorations[node.textDecoration] as TextDecoration,
+          type: 'string' as PropertyType
+        },
+        fontFamily: {
+          value: node.fontName.family,
+          type: 'string' as PropertyType
+        },
+        fontWeight: {
+          value: parseFontWeight(node.fontName.style),
+          type: 'number' as PropertyType
+        },
+        fontStyle: {
+          value: parseFontStyle(node.fontName.style),
+          type: 'string' as PropertyType
+        },
+        fontStretch: {
+          value: parseFontStretch(node.fontName.style),
+          type: 'string' as PropertyType
+        },
+        _fontStyleOld: {
+          value: node.fontName.style,
+          type: 'string' as PropertyType
+        },
+        letterSpacing: {
+          value: roundWithDecimals(node.letterSpacing.value),
+          unit: <NumericUnitTypes>(node.letterSpacing.unit.toLowerCase() === 'pixels' ? 'pixel' : node.letterSpacing.unit.toLowerCase()),
+          type: 'number' as PropertyType
+        },
+        lineHeight: {
+          // @ts-ignore
+          value: roundWithDecimals(node.lineHeight.value) || 'normal',
+          unit: node.lineHeight.unit.toLowerCase() === 'pixels' ? 'pixel' : node.lineHeight.unit.toLowerCase(),
+          type: (Object.prototype.hasOwnProperty.call(node.lineHeight, 'value') ? 'number' : 'string') as PropertyType
+        },
+        paragraphIndent: {
+          value: node.paragraphIndent,
+          unit: 'pixel' as UnitTypePixel,
+          type: 'number' as PropertyType
+        },
+        paragraphSpacing: {
+          value: node.paragraphSpacing,
+          unit: 'pixel' as UnitTypePixel,
+          type: 'number' as PropertyType
+        },
+        textCase: {
+          value: textCases[node.textCase] as TextCase || 'none' as TextCase,
+          type: 'string' as PropertyType
+        }
       },
-      textCase: {
-        value: textCases[node.textCase] as TextCase || 'none' as TextCase,
-        type: 'string' as PropertyType
-      }
-    },
-    extensions: {
-      [config.key.extensionPluginData]: {
-        [config.key.extensionFigmaStyleId]: node.id,
-        exportKey: tokenTypes.font.key as tokenExportKeyType
+      extensions: {
+        [config.key.extensionPluginData]: {
+          [config.key.extensionFigmaStyleId]: node.id,
+          exportKey: tokenTypes.font.key as tokenExportKeyType,
+          ...(boundVariables && { boundVariables })
+        }
       }
     }
-  }))
+  })
 }
 
 export default extractFonts

src/transformer/standardTransformer.ts

@@ -285,12 +285,29 @@ const transformTokens = (token: internalTokenInterface): StandardTokenDataInterf
 
 const transformer = (token: internalTokenInterface, settings): StandardTokenInterface | StandardTokenGroup => {
   if (token.category === 'typography') {
-    // @ts-ignore
-    return {
+    const baseTypography = {
       name: token.name,
       description: token.description,
       ...typographyValueTransformer(token)
     }
+
+    // If there are bound variables and extensions are not excluded, add them to individual properties
+    const boundVars = token.extensions?.[config.key.extensionPluginData]?.boundVariables
+    if (boundVars && !settings.excludeExtensionProp) {
+      // For each property that has a bound variable, add extension metadata
+      Object.keys(boundVars).forEach(propName => {
+        if (baseTypography[propName] && typeof baseTypography[propName] === 'object') {
+          baseTypography[propName].$extensions = {
+            [config.key.extensionPluginData]: {
+              boundVariable: boundVars[propName]
+            }
+          }
+        }
+      })
+    }
+
+    // @ts-ignore
+    return baseTypography
   }
   // variable
   if (token.extensions[config.key.extensionPluginData].exportKey === 'variables') {

src/utilities/getTextStyles.ts

@@ -20,7 +20,8 @@ const getTextStyles = (styles: TextStyle[]): TextStyleObject[] => {
       lineHeight: style.lineHeight,
       paragraphIndent: style.paragraphIndent,
       paragraphSpacing: style.paragraphSpacing,
-      textCase: style.textCase
+      textCase: style.textCase,
+      boundVariables: style.boundVariables
     })
   })
   // return array

tests/unit/buildFigmaData.test.ts

@@ -21,7 +21,8 @@ const defaultOutput = {
     paragraphIndent: undefined,
     paragraphSpacing: undefined,
     textCase: undefined,
-    textDecoration: undefined
+    textDecoration: undefined,
+    boundVariables: undefined
   }],
   gridStyles: [{
     name: 'GridStyle',

tests/unit/data/textStyleObjects.data.ts

@@ -20,7 +20,8 @@ export const textStyles = [
     },
     paragraphIndent: 3,
     paragraphSpacing: 2,
-    textCase: 'UPPER'
+    textCase: 'UPPER',
+    boundVariables: undefined
   },
   {
     name: 'no description',
@@ -41,7 +42,8 @@ export const textStyles = [
     },
     paragraphIndent: 3,
     paragraphSpacing: 2,
-    textCase: 'ORIGINAL'
+    textCase: 'ORIGINAL',
+    boundVariables: undefined
   }
 ]
 
@@ -66,7 +68,8 @@ export const textStyleObjects = [
     paragraphIndent: 3,
     paragraphSpacing: 2,
     textCase: 'UPPER',
-    id: 10
+    id: 10,
+    boundVariables: undefined
   },
   {
     name: 'no description',
@@ -87,7 +90,8 @@ export const textStyleObjects = [
     paragraphIndent: 3,
     paragraphSpacing: 2,
     textCase: 'ORIGINAL',
-    id: 11
+    id: 11,
+    boundVariables: undefined
   }
 ]
 

types/standardToken.d.ts

@@ -43,6 +43,8 @@ export type StandardTokenExtensionsInterface = {
     category?: string,
     group?: string,
     unit?: string,
+    boundVariables?: { [field in VariableBindableTextField]?: string },
+    boundVariable?: string
   }
 }