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,54 @@
+# 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 create 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.
+
+### 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
+
+### `updateModeCollection(jsonData, brand)`
+
+This function updates the color-scheme variables in Figma for a specific brand. It:
+
+- Fetches the current variables from Figma.
+- Updates modes and variables for `"Light"` and `"Dark"` color-schemes.
+- Sends a POST request to update Figma with the new data.
+
+### `updateBrandCollection(jsonData)`
+
+This function focuses on updating color variables in the "Brand" collection. It:
+
+- Maps color variables from the "Mode" collection to the "Brand" collection.
+- Adds non-color variables for each brand.
+- Creates or updates modes for each brand.
+- Ensures proper aliasing of variables between collections.
+
+## Usage
+
+1. Navigate to the `tokens/figma` directory:
+
+   ```bash
+   cd tokens/figma
+
+   ```
+
+2. Run the script
+   ```bash
+   node index.mjs
+   ```

tokens/figma/config.mjs

@@ -0,0 +1,20 @@
+import dotenv from "dotenv";
+
+dotenv.config({ path: "../../.env" });
+
+import { BRANDS } from "./utils/constants.mjs";
+
+export const BRAND_KEY = {
+  [BRANDS.MOVISTAR]: "ObNHOLPtrIytjy9BH7M9jW",
+  [BRANDS.O2_NEW]: "CjvgrHEIycSQ6exznxnFXT",
+  [BRANDS.VIVO_NEW]: "EApRpjaTyUOwW5VQU2ZqgP",
+  [BRANDS.TELEFONICA]: "m8srmP3eedfvDaqYnbM6PI",
+  [BRANDS.BLAU]: "czemeClWRGBI8oF7caNa5m",
+  [BRANDS.TU]: "19IXMaFqdYeC1IIdTwXBgY",
+};
+
+export const MIDDLEWARE_KEY =
+  "w7fBxCsEb8WrMVVuxDnCQd";
+
+export const FIGMA_TOKEN =
+  process.env.FIGMA_TOKEN;

tokens/figma/index.mjs

@@ -0,0 +1,40 @@
+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 {
+  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
+  );
+
+async function processAll() {
+  await updateSkinFiles(jsonDataForSkin);
+  await updateMiddleware(jsonDataForMiddleware);
+}
+
+processAll();