Variables (#249)

* working on exporting variables

* initial version of variables

* fixing tests

* fixing tests

* add references

* fixes & beta label

* rm log

Author: lukasoppermann

dist/plugin.js

@@ -26,7 +26,7 @@
   "devDependencies": {
     "@ctrl/tinycolor": "^3.4.0",
     "@emotion/css": "^11.1.3",
-    "@figma/plugin-typings": "^1.47.0",
+    "@figma/plugin-typings": "^1.70.0",
     "@types/jest": "^28.1.1",
     "@types/react": "^18.0.13",
     "@types/react-dom": "^18.0.5",

dist/ui.html

@@ -20,6 +20,7 @@ export default {
     settings: 'settings',
     extensionPluginData: 'org.lukasoppermann.figmaDesignTokens',
     extensionFigmaStyleId: 'styleId',
+    extensionVariableStyleId: 'variableId',
     extensionAlias: 'alias',
     authType: {
       token: 'token',

dist/ui.js

@@ -16,6 +16,7 @@ export const defaultSettings: Settings = {
   authType: 'token',
   reference: 'main',
   exclusionPrefix: '',
+  excludeExtensionProp: false,
   alias: 'alias, ref, reference',
   keyInName: false,
   prefixInName: true,
@@ -47,6 +48,7 @@ export const defaultSettings: Settings = {
     size: true,
     spacing: true,
     motion: true,
-    opacity: true
+    opacity: true,
+    variables: true
   }
 }

package-lock.json

@@ -1,5 +1,9 @@
 /* istanbul ignore file */
-export const tokenTypes = {
+export const tokenTypes: Record<string, {
+  label: string;
+  key: string;
+  exclude?: string[];
+}> = {
   color: {
     label: 'Colors',
     key: 'color'
@@ -52,5 +56,10 @@ export const tokenTypes = {
   opacity: {
     label: 'Opacity',
     key: 'opacity'
+  },
+  variables: {
+    label: 'Figma Variables (BETA)',
+    key: 'variables',
+    exclude: ['original']
   }
 }

package.json

@@ -169,7 +169,7 @@ const valueTransformer: {} | undefined = {
   opacity: opacityValueTransformer
 }
 
-const transformer = (token: internalTokenInterface): OriginalFormatTokenInterface => {
+const transformer = (token: internalTokenInterface, _settings): OriginalFormatTokenInterface => {
   return {
     name: token.name,
     category: token.category,

src/config/config.ts

@@ -256,9 +256,25 @@ const valueTransformer = {
   opacity: opacityValueTransformer
 }
 
+const transformVariable = ({ values, category }): StandardTokenDataInterface => {
+  if (category === 'color') {
+    return {
+      type: 'color' as StandardTokenTypes,
+      value: rgbaObjectToHex8(values.fill.value),
+      blendMode: values.fill.blendMode?.toLowerCase() || 'normal'
+    }
+  }
+  if (['size', 'boolean', 'string', 'alias'].includes(category)) {
+    return {
+      type: category as StandardTokenTypes,
+      value: values
+    }
+  }
+}
+
 const transformTokens = (token: internalTokenInterface): StandardTokenDataInterface | StandardTokenGroup => valueTransformer[token.category](token)
 
-const transformer = (token: internalTokenInterface): StandardTokenInterface | StandardTokenGroup => {
+const transformer = (token: internalTokenInterface, settings): StandardTokenInterface | StandardTokenGroup => {
   if (token.category === 'typography') {
     // @ts-ignore
     return {
@@ -267,12 +283,21 @@ const transformer = (token: internalTokenInterface): StandardTokenInterface | St
       ...typographyValueTransformer(token)
     }
   }
+  // variable
+  if (token.extensions[config.key.extensionPluginData].exportKey === 'variables') {
+    return {
+      name: token.name,
+      description: token.description,
+      ...transformVariable(token),
+      ...tokenExtensions(token, settings)
+    }
+  }
   // @ts-ignore
   return {
     name: token.name,
     description: token.description,
     ...transformTokens(token),
-    ...tokenExtensions(token)
+    ...tokenExtensions(token, settings)
   }
 }
 

src/config/defaultSettings.ts

@@ -1,10 +1,12 @@
 import { internalTokenInterface } from '@typings/propertyObject'
 import { StandardTokenExtensionsInterface } from '@typings/standardToken'
 
-export const tokenExtensions = (token: internalTokenInterface): { extensions: StandardTokenExtensionsInterface; } => {
-  return {
-    extensions: {
-      ...token.extensions
+export const tokenExtensions = (token: internalTokenInterface, { excludeExtensionProp }): { extensions: StandardTokenExtensionsInterface; } => {
+  if (excludeExtensionProp !== true) {
+    return {
+      extensions: {
+        ...token.extensions
+      }
     }
   }
 }

src/config/tokenTypes.ts

@@ -39,61 +39,114 @@ export const FileExportSettings = () => {
     event.preventDefault() // Prevent form submit triggering navigation
     const exportSettingsForm = event.target
     if (exportSettingsForm.checkValidity() === true) {
-      const { accessToken, ...pluginSettings } = settings
+      const { accessToken, ...pluginSettings } = settings;
       // save settings to local storage
-      figmaUIApi.postMessage({
-        pluginMessage: {
-          command: commands.saveSettings,
-          payload: {
-            settings: pluginSettings,
-            accessToken: accessToken
-          }
-        }
-      // @ts-ignore
-      }, '*')
+      figmaUIApi.postMessage(
+        {
+          pluginMessage: {
+            command: commands.saveSettings,
+            payload: {
+              settings: pluginSettings,
+              accessToken: accessToken,
+            },
+          },
+          // @ts-ignore
+        },
+        "*"
+      );
       // prepare token json
-      const tokensToExport = prepareExport(tokens, pluginSettings)
-      setTokens(tokensToExport)
+
+      const tokensToExport = prepareExport(tokens, pluginSettings);
+
+      setTokens(tokensToExport);
       // download tokes
-      downloadJson(parent, downloadLinkRef.current, stringifyJson(tokensToExport, pluginSettings.compression))
+      downloadJson(
+        parent,
+        downloadLinkRef.current,
+        stringifyJson(tokensToExport, pluginSettings.compression)
+      );
     }
   }
 
   return (
     <form onSubmit={handleFormSubmit} className={style}>
-      <Title size='xlarge' weight='bold'>File Export settings</Title>
+      <Title size="xlarge" weight="bold">
+        File Export settings
+      </Title>
       <Row>
         <Checkbox
-          label='Compress JSON output file'
-          type='switch'
+          label="Compress JSON output file"
+          type="switch"
           checked={settings.compression}
-          onChange={(value) => updateSettings(draft => { draft.compression = value })}
+          onChange={(value) =>
+            updateSettings((draft) => {
+              draft.compression = value;
+            })
+          }
+        />
+        <Info
+          width={240}
+          label="Compression removes line breaks and whitespace from the json string"
         />
-        <Info width={240} label='Compression removes line breaks and whitespace from the json string' />
+        {settings.tokenFormat === "standard" && (
+          <>
+            <Checkbox
+              label="Exclude extension property"
+              type="switch"
+              checked={settings.excludeExtensionProp}
+              onChange={(value) =>
+                updateSettings((draft) => {
+                  draft.excludeExtensionProp = value;
+                })
+              }
+            />
+            <Info
+              width={240}
+              label="The extension property holds additional information about the token"
+            />
+          </>
+        )}
       </Row>
-      <Title size='large' weight='bold'>Include types in export</Title>
-      <div className='grid-3-col'>
+      <Title size="large" weight="bold">
+        Include types in export
+      </Title>
+      <div className="grid-3-col">
         {Object.entries(tokenTypes)
           // @ts-ignore
-          .map(([, { key, label, exclude = undefined }]) =>
-            (exclude === undefined || !exclude.includes(settings.tokenFormat)) &&
-              <Checkbox
-                key={key}
-                label={label}
-                checked={settings.exports[key]}
-                onChange={value => updateSettings((draft: Settings) => { draft.exports[key] = value })}
-              />)}
+          .map(
+            ([, { key, label, exclude = undefined }]) =>
+              (exclude === undefined ||
+                !exclude.includes(settings.tokenFormat)) && (
+                <Checkbox
+                  key={key}
+                  label={label}
+                  checked={settings.exports[key]}
+                  onChange={(value) =>
+                    updateSettings((draft: Settings) => {
+                      draft.exports[key] = value;
+                    })
+                  }
+                />
+              )
+          )}
       </div>
       <Footer>
-        <WebLink align='start' href='https://github.com/lukasoppermann/design-tokens#design-tokens'>Documentation</WebLink>
+        <WebLink
+          align="start"
+          href="https://github.com/lukasoppermann/design-tokens#design-tokens"
+        >
+          Documentation
+        </WebLink>
         <CancelButton />
-        <Button type='submit' autofocus>Save & Export</Button>
+        <Button type="submit" autofocus>
+          Save & Export
+        </Button>
       </Footer>
       <a
         ref={downloadLinkRef}
         download={`${settings.filename}${settings.extension}`}
         title={`${settings.filename}${settings.extension}`}
       />
     </form>
-  )
+  );
 }

src/transformer/originalFormatTransformer.ts

@@ -6,7 +6,7 @@ export const downloadJson = (parent, link: HTMLLinkElement, json: string) => {
   if (json === '[]') {
     parent.postMessage({
       pluginMessage: {
-        command: commands.closePlugin,
+        // command: commands.closePlugin,
         payload: {
           notification: '⛔️ No design token detected!'
         }
@@ -33,7 +33,7 @@ export const downloadJson = (parent, link: HTMLLinkElement, json: string) => {
     // send success message
     parent.postMessage({
       pluginMessage: {
-        command: commands.closePlugin,
+        // command: commands.closePlugin,
         payload: {
           notification: '⛔️ Design token failed!'
         }

src/transformer/standardTransformer.ts

@@ -26,7 +26,7 @@ const extractTokenNodeValues = (node: ComponentNode | RectangleNode | FrameNode)
   cornerRadius: node.cornerRadius || undefined,
   cornerSmoothing: node.cornerSmoothing,
   strokes: getSolidStrokes(node.strokes),
-  strokeWeight: node.strokeWeight,
+  strokeWeight: node.strokeWeight as number,
   strokeStyleId: node.strokeStyleId,
   strokeMiterLimit: node.strokeMiterLimit,
   strokeJoin: node.strokeJoin,

src/transformer/tokenExtensions.ts

@@ -12,6 +12,7 @@ import extractOpacities from '../extractor/extractOpacities'
 import { figmaDataType } from '@typings/figmaDataType'
 import buildFigmaData from './buildFigmaData'
 import { Settings } from '@typings/settings'
+import { getVariables } from './getVariables'
 
 const getPrefixArray = (prefixString: string = '') => prefixString.split(',').map(item => item.replace(/\s+/g, ''))
 
@@ -29,6 +30,7 @@ export const exportRawTokenArray = (figma: PluginAPI, settings: Settings) => {
     ...extractColors(figmaData.paintStyles, { color: getPrefixArray(settings.prefix.color), gradient: getPrefixArray(settings.prefix.gradient), alias: getPrefixArray(settings.alias) }),
     ...extractGrids(figmaData.gridStyles, getPrefixArray(settings.prefix.grid)),
     ...extractFonts(figmaData.textStyles, getPrefixArray(settings.prefix.font)),
-    ...extractEffects(figmaData.effectStyles, getPrefixArray(settings.prefix.effect))
+    ...extractEffects(figmaData.effectStyles, getPrefixArray(settings.prefix.effect)),
+    ...getVariables(figma)
   ]
 }