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.

Sign up for GitHub

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

Jump to bottom

Add support for binding variables to effects #2443

Closed
Tracked by #2489
six7 opened this issue Dec 28, 2023 · 1 comment · Fixed by #2498
Closed
Tracked by #2489

Add support for binding variables to effects #2443

six7 opened this issue Dec 28, 2023 · 1 comment · Fixed by #2498
Assignees
@six7
Labels
enhancement Internal new feature or functionality ❇️ Featurebase Roadmap Issue was added to a featurebase roadmap post Figma effect properties Figma variables token type box shadow composite token type variables-m2

Comments

@six7
Copy link
Collaborator

six7 commented Dec 28, 2023

Figma recently released support for binding variables to effects (shadows, blur), we should add those as well which would be huge for themable gradients.

https://www.figma.com/plugin-docs/updates/

  • When applying a shadow that's referencing a color token and that color token has a variable connected, create the reference inside the shadow effect
  • Do the same for background blur

https://www.figma.com/plugin-docs/api/VariableBindableEffectField/
@six7 six7 mentioned this issue Jan 10, 2024
Closed
@esthercheran esthercheran moved this from 📥 Triage to 📤 Ready for dev in Tokens Studio for Figma Roadmap Jan 15, 2024
@six7 six7 self-assigned this Feb 5, 2024
@six7 six7 moved this from 📤 Ready for dev to 🕜 In Progress in Tokens Studio for Figma Roadmap Feb 5, 2024
@esthercheran esthercheran mentioned this issue Feb 5, 2024
Closed
@six7 six7 mentioned this issue Feb 7, 2024
Merged
@six7 six7 linked a pull request Feb 7, 2024 that will close this issue
refactor applying tokens + add support for binding variables to effects #2498
Merged
six7 added a commit that referenced this issue Mar 8, 2024
@six7
refactor applying tokens + add support for binding variables to effec…
347ca49 
…ts (#2498)

### Why does this PR exist?

Closes #2443

Figma recently added support for binding variables to effects such as
shadows. This PR adds support for this.

### What does this pull request do?

Changes seem big - which is because this PR includes a refactor of our
update function to make it WAY easier to parse and add new features. The
big `setValuesOnNode` file has been split into many.

I also added a way to retrieve tokens and references from the plugin
side from a central store instead of passing it through for every
function, i could imagine this was another sort for memory leaks.

This was required as otherwise we would not have a proper way to detect
the connected variables for a value in a composite token, for example a
color in a shadow, or any dimension value in any of the x, y, spread,
values of a shadow. Once Figma release typography variables this will
come in very handy as we'd already be prepared.

### Testing this change

Apply a couple of tokens. Composition tokens, tokens using references.
Create styles, create variables, give it a gooooood test.
@SamIam4Hyma SamIam4Hyma added enhancement Internal new feature or functionality Figma variables Figma effect properties token type box shadow composite token type labels Mar 21, 2024
@github-project-automation github-project-automation bot moved this from 🕜 In Progress to ✅ Done in Tokens Studio for Figma Roadmap Mar 26, 2024
@SamIam4Hyma SamIam4Hyma added the ❇️ Featurebase Roadmap Issue was added to a featurebase roadmap post label Apr 13, 2024
@SamIam4Hyma
Copy link
Collaborator

Added to Featurebase Roadmap- ❖💡Create a style powered by a variable

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@six7 six7

Labels
enhancement Internal new feature or functionality ❇️ Featurebase Roadmap Issue was added to a featurebase roadmap post Figma effect properties Figma variables token type box shadow composite token type variables-m2
Projects
Tokens Studio for Figma Roadmap
Status: ✅ Done
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

refactor applying tokens + add support for binding variables to effects tokens-studio/figma-plugin
3 participants
@six7 @esthercheran @SamIam4Hyma