-
Notifications
You must be signed in to change notification settings - Fork 4
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
base: production
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
the last thing I can do in this PR is to make a clap 👏
branches: | ||
- production | ||
paths: | ||
- "tokens/movistar.json" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think you can use something like "tokens/**.json"
or similar. This will prevent you from having to update this in the future by hand (https://docs.github.com/en/actions/writing-workflows/workflow-syntax-for-github-actions#filter-pattern-cheat-sheet)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thinking about this, if we for example add a new skin but we dont want to sync it with figma via script yet, the action will trigger when changes on that JSON are made, how we can avoid this?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If we add a new skin and we dont want to sync with Figma, just don't include as a "available" skin in .mjs
script
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
At the end, we will keep "paths" for each brand.json file to avoid run the script with unofficial .json files
|
||
- **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. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- **Update or dreate variables**: Adds new variables or updates existing ones based on the brand's light and dark themes. | |
- **Update or create variables**: Adds new variables or updates existing ones based on the brand's light and dark themes. |
async function updatePalette( | ||
jsonData, | ||
brand, | ||
FILE_KEY |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
As mentioned before, I'd remove all these parameters in the functions. They shouldn't be passed as parameters, given that they are constants.
In this case, I'd just keep the object that maps a brand to it's file key somewhere so that you can access it from here (without having to pass it as parameter in several function calls). This will make your life easier for future refactors
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice work! Here you have web-core backlog in case you feel like replacing us as developers from now on 😆
Description
This feature allows the creation of figma variables by running a script in the repository.
https://www.tldraw.com/s/v2_c_snnVQbmyyGW4BzwXyXPwZ?d=v6816.-947.4025.2072.page
This script should:
palette
en each skin fileMode
andBrand
in a middleware fileThis middleware file is the one that will be used to link variables in all Mistica components
Each collection will appear as a selector in the UI:
Appart from the tokens defined in JSON files, we need to create figma-oriented tokens:
Test file with variables created:
https://www.figma.com/design/wlnMwpneZheC7CskSJAw4g/Middleware-POST-test-V2?node-id=0-1&node-type=canvas&t=scPU5BKt3mgO0tCf-0