Add error check for invalid Figma variables references (#4640)

* Add script to check for invalid figma references * Add more comprehensive checks * Fix error message to be more generic * Update error message
grommet · Jan 14, 2025 · 411a8da · 411a8da
1 parent f9c370c
commit 411a8da
Show file tree

Hide file tree

Showing 7 changed files with 595 additions and 479 deletions.
diff --git a/.github/workflows/sync-figma-to-tokens.yml b/.github/workflows/sync-figma-to-tokens.yml
@@ -43,6 +43,10 @@ jobs:
           FILE_KEY_SEMANTIC: ${{ secrets.GH_ACTION_FIGMA_FILE_KEY_SEMANTIC }}
           FILE_KEY_COMPONENT: ${{ secrets.GH_ACTION_FIGMA_FILE_KEY_COMPONENT }}
           PERSONAL_ACCESS_TOKEN: ${{ secrets.GH_ACTION_VARIABLES_SYNC_FIGMA_TOKEN }}
+          FIGMA_COLOR_COLLECTION_KEY: ${{ secrets.GH_ACTION_FIGMA_COLOR_COLLECTION_KEY }}
+          FIGMA_DIMENSION_COLLECTION_KEY: ${{ secrets.GH_ACTION_FIGMA_DIMENSION_COLLECTION_KEY }}
+          FIGMA_PRIMITIVES_COLLECTION_KEY: ${{ secrets.GH_ACTION_FIGMA_PRIMITIVES_COLLECTION_KEY }}
+          FIGMA_GLOBAL_COLLECTION_KEY: ${{ secrets.GH_ACTION_FIGMA_GLOBAL_COLLECTION_KEY }}
       - name: Format token files with prettier
         run: yarn prettier tokens --write
         working-directory: design-tokens

diff --git a/.github/workflows/sync-tokens-to-figma.yml b/.github/workflows/sync-tokens-to-figma.yml
@@ -33,3 +33,7 @@ jobs:
           FILE_KEY_SEMANTIC: ${{ secrets.GH_ACTION_FIGMA_FILE_KEY_SEMANTIC }}
           FILE_KEY_COMPONENT: ${{ secrets.GH_ACTION_FIGMA_FILE_KEY_COMPONENT }}
           PERSONAL_ACCESS_TOKEN: ${{ secrets.GH_ACTION_VARIABLES_SYNC_FIGMA_TOKEN }}
+          FIGMA_COLOR_COLLECTION_KEY: ${{ secrets.GH_ACTION_FIGMA_COLOR_COLLECTION_KEY }}
+          FIGMA_DIMENSION_COLLECTION_KEY: ${{ secrets.GH_ACTION_FIGMA_DIMENSION_COLLECTION_KEY }}
+          FIGMA_PRIMITIVES_COLLECTION_KEY: ${{ secrets.GH_ACTION_FIGMA_PRIMITIVES_COLLECTION_KEY }}
+          FIGMA_GLOBAL_COLLECTION_KEY: ${{ secrets.GH_ACTION_FIGMA_GLOBAL_COLLECTION_KEY }}
diff --git a/design-tokens/src/figma_api.ts b/design-tokens/src/figma_api.ts
@@ -14,11 +14,13 @@ export interface VariableModeChange {
 
 export interface VariableCollection {
   id: string;
+  key: string;
   name: string;
   modes: VariableMode[];
   defaultModeId: string;
   remote: boolean;
   hiddenFromPublishing: boolean;
+  variableIds: string[];
 }
 
 export interface VariableCollectionChange

diff --git a/design-tokens/src/scripts/sync_figma_to_tokens.ts b/design-tokens/src/scripts/sync_figma_to_tokens.ts
@@ -3,7 +3,7 @@ import * as fs from 'fs';
 
 import FigmaApi from '../figma_api.js';
 
-import { green } from '../utils.js';
+import { green, verifyReferences } from '../utils.js';
 import { tokenFilesFromLocalVariables } from '../token_export.js';
 
 /**
@@ -41,6 +41,11 @@ async function main() {
 
   let outputDir = 'tokens_new';
 
+  const api = new FigmaApi(process.env.PERSONAL_ACCESS_TOKEN || '');
+  const componentTokens = await api.getLocalVariables(fileKeys.component);
+  const semanticTokens = await api.getLocalVariables(fileKeys.semantic);
+  verifyReferences([componentTokens, semanticTokens]);
+
   tokenDirs.forEach(async dir => {
     const api = new FigmaApi(process.env.PERSONAL_ACCESS_TOKEN || '');
     const localVariables = await api.getLocalVariables(fileKeys[dir]);

diff --git a/design-tokens/src/scripts/sync_tokens_to_figma.ts b/design-tokens/src/scripts/sync_tokens_to_figma.ts
@@ -3,7 +3,7 @@ import * as fs from 'fs';
 
 import FigmaApi from '../figma_api.js';
 
-import { green } from '../utils.js';
+import { green, verifyReferences } from '../utils.js';
 import {
   generatePostVariablesPayload,
   readJsonFiles,
@@ -32,6 +32,11 @@ async function main() {
     .filter(dir => dir.isDirectory())
     .map(dir => dir.name);
 
+  const api = new FigmaApi(process.env.PERSONAL_ACCESS_TOKEN || '');
+  const componentTokens = await api.getLocalVariables(fileKeys.component);
+  const semanticTokens = await api.getLocalVariables(fileKeys.semantic);
+  verifyReferences([componentTokens, semanticTokens]);
+
   tokenDirs.forEach(async dir => {
     const tokensFiles = fs
       .readdirSync(`${TOKENS_DIR}/${dir}`)

diff --git a/design-tokens/src/utils.ts b/design-tokens/src/utils.ts
@@ -1,3 +1,5 @@
+import { ApiGetLocalVariablesResponse } from './figma_api.js';
+
 export function green(msg: string) {
   return `\x1b[32m${msg}\x1b[0m`;
 }
@@ -49,3 +51,68 @@ export const nonComponentTokens: string[] = [
 ];
 
 export const numberToPixel = (value: number): string => `${value}px`;
+
+/**
+ * Ensure variable references are to valid collections. Log errors for any variables that are referencing invalid Figma files.
+ */
+export const verifyReferences = (
+  localTokens: ApiGetLocalVariablesResponse[],
+) => {
+  const invalidVariables: string[] = [];
+  localTokens.forEach(tokens => {
+    Object.keys(tokens.meta.variableCollections).forEach(key => {
+      const collection = tokens.meta.variableCollections[key];
+      if (collection.remote === true) {
+        if (
+          collection.name === 'color' &&
+          collection.key !== process.env['FIGMA_COLOR_COLLECTION_KEY']
+        ) {
+          collection.variableIds.forEach(id =>
+            invalidVariables.push(tokens.meta.variables[id].id),
+          );
+        } else if (
+          collection.name === 'dimension' &&
+          collection.key !== process.env['FIGMA_DIMENSION_COLLECTION_KEY']
+        ) {
+          collection.variableIds.forEach(id =>
+            invalidVariables.push(tokens.meta.variables[id].id),
+          );
+        } else if (
+          collection.name === 'primitives' &&
+          collection.key !== process.env['FIGMA_PRIMITIVE_COLLECTION_KEY']
+        ) {
+          collection.variableIds.forEach(id =>
+            invalidVariables.push(tokens.meta.variables[id].id),
+          );
+        } else if (
+          collection.name === 'global' &&
+          collection.key !== process.env['FIGMA_GLOBAL_COLLECTION_KEY']
+        ) {
+          collection.variableIds.forEach(id =>
+            invalidVariables.push(tokens.meta.variables[id].id),
+          );
+        }
+      }
+    });
+
+    Object.keys(tokens.meta.variables).forEach(key => {
+      const variable = tokens.meta.variables[key];
+      Object.keys(variable.valuesByMode).forEach(j => {
+        const modeValue = variable.valuesByMode[j];
+        if (
+          typeof modeValue === 'object' &&
+          'id' in modeValue &&
+          invalidVariables.includes(modeValue.id)
+        ) {
+          console.error(
+            `🛑 Invalid collection reference for value of: ${variable.name}. Resolve reference error in Figma.`,
+          );
+        }
+      });
+    });
+  });
+  if (invalidVariables.length)
+    throw new Error(
+      'Invalid references were found. Resolve reference errors in Figma.',
+    );
+};