Update Figma variables from JSON files

.github/workflows/sync-figma-tokens.yml

@@ -0,0 +1,32 @@
+name: Sync tokens to Figma
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - production
+    paths:
+      - "tokens/movistar.json"
+      - "tokens/vivo-new.json"
+      - "tokens/o2-new.json"
+      - "tokens/telefonica.json"
+      - "tokens/blau.json"
+      - "tokens/tu.json"
+
+jobs:
+  sync-figma-brand:
+    runs-on: ubuntu-latest
+
+    env:
+      FIGMA_TOKEN: ${{ secrets.FIGMA_TOKEN }}
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run sync for the brand(s)
+        working-directory: tokens/figma
+        run: node index.mjs

.gitignore

@@ -31,4 +31,6 @@ Temporary Items
 
 
 **/node_modules
-**/build
+**/build
+
+.env

README.md

@@ -4,12 +4,12 @@
 
  
 
-| Other Mística Repos                                              | Description                                               |
-| :--------------------------------------------------------------- | :-------------------------------------------------------- |
-| [mistica-web](https://github.com/Telefonica/mistica-web)         | Repository with code libraries for Mística in web         |
-| [mistica-ios](https://github.com/Telefonica/mistica-ios)         | Repository with code libraries for Mística in iOS         |
-| [mistica-android](https://github.com/Telefonica/mistica-android) | Repository with code libraries for Mística in Android     |
-| [mistica-icons](https://github.com/Telefonica/mistica-icons)     | The source of truth for icons in our digital products     |
+| Other Mística Repos                                              | Description                                           |
+| :--------------------------------------------------------------- | :---------------------------------------------------- |
+| [mistica-web](https://github.com/Telefonica/mistica-web)         | Repository with code libraries for Mística in web     |
+| [mistica-ios](https://github.com/Telefonica/mistica-ios)         | Repository with code libraries for Mística in iOS     |
+| [mistica-android](https://github.com/Telefonica/mistica-android) | Repository with code libraries for Mística in Android |
+| [mistica-icons](https://github.com/Telefonica/mistica-icons)     | The source of truth for icons in our digital products |
 
 ---
 
@@ -33,15 +33,5 @@
 
 ## How to sync design tokens
 
-If you want to sync design tokens with Figma files you can use [Figma Tokens plugin](https://www.figma.com/community/plugin/843461159747178978/Figma-Tokens) and setup the plugin with the following information.
-
-1. Open Figma Tokens Plugin, go to `Settings` and select `Github` in Token Storage
-2. Add new credentials
-
-- **Name:** The name of the brand
-- **Personal Access Token:** you have to generate a token from Github. [Read how to do it](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token#creating-a-personal-access-token-classic)
-- **Repository:** `Telefonica/mistica-design`
-- **Default Branch:** `production`
-- **File Path:** `tokens/brandName.json` (see files [here](./tokens/))
-
-![image](https://user-images.githubusercontent.com/6722153/166447592-e3d1b545-199d-4155-9024-2fb88351b444.png) 3. Finally, go to `Tokens`, select `Global` and `Apply to document` and clic in `Update`
+> [!NOTE]  
+> We're no longer using [Figma Tokens plugin](https://www.figma.com/community/plugin/843461159747178978/Figma-Tokens) to sync tokens with files. We use Figma API to update variables in our libraries. More about this proccess in [Figma tokens script README](https://github.com/Telefonica/mistica-design/blob/production/tokens/figma/README.md).

package.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "dotenv": "^16.4.5",
+    "node-fetch": "^3.3.2"
+  }
+}

tokens/figma/README.md

@@ -0,0 +1,62 @@
+# Project overview
+
+This project is designed to update Figma variables based on a JSON input, primarily focused on managing brand themes, colors, and other design tokens. The project retrieves existing variables from Figma, processes the provided JSON data, and updates or creates new variables in collections "Mode" and "Brand".
+
+## Features
+
+- **Fetch existing Figma data**: Retrieves the existing variables and collections from Figma.
+- **Process JSON data**: Extracts theme and token data from provided JSON files for each brand.
+- **Update or dreate variables**: Adds new variables or updates existing ones based on the brand's light and dark themes.
+- **Handle variable modes**: Ensures each brand's mode (e.g., "Light", "Dark") is updated or created in the Figma "Brand" collection.
+- **Support for multiple brands**: Processes multiple brands, mapping each brand's unique variables into Figma's collections.
+
+## Setup
+
+### Environment variables:
+
+- `FIGMA_TOKEN`: The API token to authenticate with Figma.
+- `MIDDLEWARE_KEY`: Token for file where the variables need to be created / updated
+- `{BRAND}_FILE_KEY`: File key of each of the brand library files
+
+### Dependencies:
+
+- Node.js and packages such as `node-fetch`, `dotenv`, and `fs` are used to manage API requests, read local files, and load environment variables.
+
+## Key functions
+
+### `updateTheme(jsonData, brand, FILE_KEY)`
+
+This function updates the theme variables in Figma for a specific brand. It:
+
+- Fetches the current variables from Figma.
+- Updates modes and variables for `"Light"` and `"Dark"` themes.
+- Sends a POST request to update Figma with the new data.
+
+### `updateSkinColorVariables(brands, FILE_KEY)`
+
+This function focuses on updating color variables in the "Brand" collection. It:
+
+- Maps color variables from the "Mode" collection to the "Brand" collection.
+- Creates or updates modes for each brand.
+- Ensures proper aliasing of variables between collections.
+
+### `updateSkinOtherVariables(jsonData, brands, FILE_KEY)`
+
+This function updates non-color variables, such as font families and icon sets, for each brand. It:
+
+- Handles specific design tokens like radius, font weight, and line height.
+- Adds brand-specific font families and icons.
+
+## Usage
+
+1. Navigate to the `tokens/figma` directory:
+
+   ```bash
+   cd tokens/figma
+
+   ```
+
+2. Run the script
+   ```bash
+   node index.mjs
+   ```

tokens/figma/index.mjs

@@ -0,0 +1,62 @@
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+import { updateSkinFiles } from "./update-skins.mjs";
+import { updateMiddleware } from "./update-middleware.mjs";
+import { BRANDS } from "./utils/constants.mjs";
+
+import {
+  extractSkinJsonData,
+  extractMiddlewareJsonData,
+} from "./utils/extract-json-data.mjs";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const tokensPath = path.resolve(__dirname, "../");
+
+const files = fs.readdirSync(tokensPath);
+
+const jsonFiles = files.filter((file) =>
+  file.endsWith(".json")
+);
+const jsonDataForSkin = extractSkinJsonData(
+  jsonFiles,
+  tokensPath
+);
+
+const jsonDataForMiddleware =
+  extractMiddlewareJsonData(
+    jsonFiles,
+    tokensPath
+  );
+
+const MIDDLEWARE_TOKEN =
+  process.env.MIDDLEWARE_KEY;
+
+const brands = {
+  // Remember to sync these with the workflow file
+  [BRANDS.MOVISTAR]:
+    process.env.MOVISTAR_FILE_KEY,
+  [BRANDS.O2_NEW]: process.env.O2_NEW_FILE_KEY,
+  [BRANDS.VIVO_NEW]:
+    process.env.VIVO_NEW_FILE_KEY,
+  [BRANDS.TELEFONICA]:
+    process.env.TELEFONICA_FILE_KEY,
+  [BRANDS.BLAU]: process.env.BLAU_FILE_KEY,
+  [BRANDS.TU]: process.env.TU_FILE_KEY,
+};
+
+const brandNames = Object.keys(brands);
+
+async function processAll() {
+  await updateSkinFiles(jsonDataForSkin, brands);
+  await updateMiddleware(
+    jsonDataForMiddleware,
+    brandNames,
+    MIDDLEWARE_TOKEN
+  );
+}
+
+processAll();