Script to update variables via Figma API

[yceballost]

Objective

This script automates the process of fetching, updating, and posting design tokens to Figma for multiple brands. It reads JSON data files, extracts relevant variables, compares them with existing data from Figma, updates them if necessary, and then posts the changes back to Figma's API.

Description

Reads and Gathers Design Data:

The function takes a list of JSON files containing design tokens and reads them from a specified directory. It collects and transforms all the data, in order to make a POST request to the files of the different brands.

Processes Colors and Gradients:

• The function checks each color to determine if it’s a solid color, a color with alpha or a gradient (a smooth transition between multiple colors).
• If a gradient is found in any brand, it calculates the maximum number of gradient stops (points where colors change) across all brands to ensure consistency.
• For brands without gradients, the function creates matching color stops using the base color to ensure visual consistency.
• Using Palette Variables as Aliases: Instead of hardcoding colors everywhere, these palette variables act as aliases or references.
• Handling RGBA Colors with Aliases: When a color has an alias but is defined with RGBA (a format that includes transparency), the function handles it differently. Since Figma does not support applying transparency to an alias directly, the function extracts the actual color value instead. This means that if a color is defined as rgba({primary-color}, 0.5), the function cannot just use the alias primary-color because Figma can't apply the alpha (transparency) to it. Instead, it calculates the RGBA value using the actual color value of primary-color and the alpha value (0.5 in this case).

Creates Collections and groups:

https://help.figma.com/hc/en-us/articles/14506821864087-Overview-of-variables-collections-and-modes

• Constant
  • light
  • dark
• Palette
• Radius
• Font Size
  • mobile
  • desktop
• Font Weight
• Line Height
  • mobile
  • desktop

Populate the collections with variables

• The script checks if the variables already exist in any collection and if they do they are updated, if not they are deleted
• if a variable exists in Figma but is not in the JSON will be deleted
• The order of creation of variables is the following:
  1. Collections
  2. Pallete
  3. Other (light/dark constants, radii, typography)

The different variables are created following the Figma API documentation:

https://www.figma.com/developers/api?fuid=1111936175780412673#post-variables-endpoint