-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update Figma variables from JSON files (#1884)
* Initial files * Add env variable and remove console.log * Add font-size and line-height variables * Code refactor * Simplify logic * Fix wrong resolvedType in fontWeight variables * Add variable scoping * Allow to update multiple brands * Add light and dark variables support * Simplify logic * Fix alpha values to be a number instead of a string * Refactor code and handle gradients * improve file management * ux scripting + workflow * rename files * testing workflow * Update test.yml * Update test.yml * Update test.yml * rename file * Update sync-figma-tokens.yml * Create movistar2.json * test * Update movistar.json * Update sync-figma-tokens.yml * Update movistar.json * Update sync-figma-tokens.yml * Update movistar.json * Update sync-figma-tokens.yml * test name for test * rename and include fixes in env vars * run automatically in production * Add logic for middleware update * Update skins to export only the palette collection * Add iconSet variable generation and update filekeys for palette * Extract logic to reuse * Reuse helper funcions for variable creation * Code improvements * Fixes * Remove test file * Update README * Revert changes in JSON files * Rename collections and avoid deleting existing collections * Change name grouping order for lineheight and fontSize * Sync all processes in index file * Update old collection names references Co-authored-by: Ignacio Ceballos (Yayo) <yceballost@gmail.com> * Update sync figma tokens action * Update root README * duplicated file * Naming fixes * Remove skin references * Remove modes magic strings * Rename iconSet variable group * Add themeVariant variable group * remove updateSkins magicStrings * simplify logic in updateSkins * Reuse updateOrCreateModes function * Improvements in file organization * Add link to figma script README in root README * Extract variables and improvements * group iconSet and brandName variables under utils * Handle scopes for gradient variables * Change value of utils/brandName variable * Add text-content scope * Fixes from CR * Fix index with correct filekeys * Add workflow dispatch to sync figma tokens * Resolve comments and add config file * Update tokens/figma/README.md Co-authored-by: Marcos Kolodny <marcoskolodny@gmail.com> * Update README * Fixes from CR --------- Co-authored-by: Ignacio Ceballos (Yayo) <yceballost@gmail.com> Co-authored-by: Marcos Kolodny <marcoskolodny@gmail.com>
- Loading branch information
3 people
authored
Oct 8, 2024
1 parent
e4fede5
commit 9fb7c31
Showing
18 changed files
with
2,266 additions
and
103 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -31,4 +31,6 @@ Temporary Items | |
|
|
||
|
|
||
| **/node_modules | ||
| **/build | ||
| **/build | ||
|
|
||
| .env | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| { | ||
| "dependencies": { | ||
| "dotenv": "^16.4.5", | ||
| "node-fetch": "^3.3.2" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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(); |
Oops, something went wrong.