Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Figma variables from JSON files #1884

Merged
merged 75 commits into from
Oct 8, 2024
Merged
Show file tree
Hide file tree
Changes from 71 commits
Commits
Show all changes
75 commits
Select commit Hold shift + click to select a range
8d3210c
Initial files
aweell Aug 20, 2024
6e4413a
Add env variable and remove console.log
aweell Aug 20, 2024
8878c17
Add font-size and line-height variables
aweell Aug 21, 2024
6b75ba6
Code refactor
aweell Aug 21, 2024
f600c36
Simplify logic
aweell Aug 21, 2024
ddf97bc
Fix wrong resolvedType in fontWeight variables
aweell Aug 21, 2024
99174a4
Add variable scoping
aweell Aug 21, 2024
9394288
Allow to update multiple brands
aweell Aug 21, 2024
a803f88
Add light and dark variables support
aweell Aug 22, 2024
a14d6af
Simplify logic
aweell Aug 22, 2024
536f4a1
Fix alpha values to be a number instead of a string
aweell Aug 22, 2024
5f7364a
Refactor code and handle gradients
aweell Aug 23, 2024
c0981d9
improve file management
yceballost Aug 28, 2024
5daa54d
ux scripting + workflow
yceballost Aug 28, 2024
fe9d6b3
rename files
yceballost Aug 28, 2024
0018347
Merge branch 'production' into sync-figma-tokens-gh-action
yceballost Aug 29, 2024
7d4e58e
testing workflow
yceballost Aug 29, 2024
0cb7602
Update test.yml
yceballost Aug 29, 2024
97dc0d4
Update test.yml
yceballost Aug 29, 2024
1b5c105
Update test.yml
yceballost Aug 29, 2024
cf217ee
rename file
yceballost Aug 29, 2024
d6e9db7
Update sync-figma-tokens.yml
yceballost Aug 29, 2024
83c1fde
Create movistar2.json
yceballost Aug 29, 2024
05af426
test
yceballost Aug 29, 2024
5ae59f1
Update movistar.json
yceballost Aug 29, 2024
d371e68
Update sync-figma-tokens.yml
yceballost Aug 29, 2024
c399a65
Update movistar.json
yceballost Aug 29, 2024
5f0e7ed
Update sync-figma-tokens.yml
yceballost Aug 29, 2024
64d745c
Update movistar.json
yceballost Aug 29, 2024
4c74075
Update sync-figma-tokens.yml
yceballost Aug 29, 2024
d314111
test name for test
yceballost Aug 29, 2024
802e215
rename and include fixes in env vars
yceballost Aug 29, 2024
fafdd36
run automatically in production
yceballost Aug 29, 2024
614d736
Add logic for middleware update
aweell Sep 11, 2024
097de09
Update skins to export only the palette collection
aweell Sep 11, 2024
43afa26
Add iconSet variable generation and update filekeys for palette
aweell Sep 11, 2024
fc143e8
Extract logic to reuse
aweell Sep 11, 2024
763d7ef
Reuse helper funcions for variable creation
aweell Sep 11, 2024
b321ea7
Code improvements
aweell Sep 11, 2024
5a1dacd
Fixes
aweell Sep 11, 2024
bc10d4c
Remove test file
aweell Sep 12, 2024
c3860f4
Update README
aweell Sep 12, 2024
8b725b3
Revert changes in JSON files
aweell Sep 12, 2024
9acbc96
Rename collections and avoid deleting existing collections
aweell Sep 12, 2024
bd3693f
Change name grouping order for lineheight and fontSize
aweell Sep 12, 2024
6cc41ed
Sync all processes in index file
aweell Sep 12, 2024
ec25006
Update old collection names references
aweell Sep 12, 2024
fb299f5
Update sync figma tokens action
aweell Sep 12, 2024
bb54327
Merge branch 'aweell-figma-api' of https://github.com/Telefonica/mist…
aweell Sep 12, 2024
8ff1f9d
Update root README
aweell Sep 12, 2024
695266a
duplicated file
yceballost Sep 12, 2024
f14e760
Naming fixes
aweell Sep 13, 2024
00491b5
Merge branch 'aweell-figma-api' of https://github.com/Telefonica/mist…
aweell Sep 13, 2024
21ef26f
Remove skin references
aweell Sep 13, 2024
c1f3314
Remove modes magic strings
aweell Sep 13, 2024
9ebdc95
Rename iconSet variable group
aweell Sep 13, 2024
f4d67fa
Add themeVariant variable group
aweell Sep 13, 2024
000073f
remove updateSkins magicStrings
aweell Sep 13, 2024
f5c433d
simplify logic in updateSkins
aweell Sep 13, 2024
083f246
Reuse updateOrCreateModes function
aweell Sep 13, 2024
9f2b11e
Improvements in file organization
aweell Sep 13, 2024
ee3fe13
Add link to figma script README in root README
aweell Sep 13, 2024
50dab99
Extract variables and improvements
aweell Sep 13, 2024
77caba9
group iconSet and brandName variables under utils
aweell Sep 17, 2024
9f08ca3
Handle scopes for gradient variables
aweell Sep 17, 2024
b9048e3
Change value of utils/brandName variable
aweell Sep 17, 2024
aa13b41
Add text-content scope
aweell Sep 24, 2024
64ff354
Fixes from CR
aweell Sep 25, 2024
f627785
Fix index with correct filekeys
aweell Sep 25, 2024
85f48f0
Add workflow dispatch to sync figma tokens
aweell Oct 2, 2024
2232ff6
Merge branch 'production' into aweell-figma-api
yceballost Oct 3, 2024
3b7e72a
Resolve comments and add config file
aweell Oct 4, 2024
373c9dc
Update tokens/figma/README.md
aweell Oct 4, 2024
d648f8c
Update README
aweell Oct 4, 2024
9aab7ac
Fixes from CR
aweell Oct 8, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions .github/workflows/sync-figma-tokens.yml
aweell marked this conversation as resolved.
Show resolved Hide resolved
aweell marked this conversation as resolved.
Show resolved Hide resolved
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"
yceballost marked this conversation as resolved.
Show resolved Hide resolved
- "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
84 changes: 0 additions & 84 deletions .github/workflows/test.yml

This file was deleted.

4 changes: 3 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -31,4 +31,6 @@ Temporary Items


**/node_modules
**/build
**/build

.env
26 changes: 8 additions & 18 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 |

---

Expand All @@ -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).
6 changes: 6 additions & 0 deletions package.json
aweell marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"dependencies": {
"dotenv": "^16.4.5",
"node-fetch": "^3.3.2"
}
}
62 changes: 62 additions & 0 deletions tokens/figma/README.md
aweell marked this conversation as resolved.
Show resolved Hide resolved
aweell marked this conversation as resolved.
Show resolved Hide resolved
aweell marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -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.
aweell marked this conversation as resolved.
Show resolved Hide resolved
- **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
```
62 changes: 62 additions & 0 deletions tokens/figma/index.mjs
Original file line number Diff line number Diff line change
@@ -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();
Loading
Loading