Figma has added percentages to text styles, which is fantastic. However, when the style is linked to a variable, the percentage is removed, and uses px units instead. I am trying to set up my design system using a scalable token system, and little features that don’t quite work are so frustrating.
Please allow variables to support percentages! It will help us not need to use plugins like Token Studio.
Variables to support percentages
We have the same needs.
Would love to use “rem”, “percentage” or maybe even calculated values inside the variables.
Just a small toggle and then a dropdown in each variable value so I can change it for the variables I do not want to use “px” values. Thanks!
Would love to use “rem”, “percentage” or maybe even calculated values inside the variables.
Just a small toggle and then a dropdown in each variable value so I can change it for the variables I do not want to use “px” values. Thanks!
I might just have something for you…check out PRISM Tokens: https://console.prismtokens.app/
It’s a SaaS tool designed to bridge the gap between Designers and Devs… and the best part… IT’S FREE!
How it works:
- Designer manage and update styles in Figma
- PRISM syncs the Figma file and transforms the data (aliasing, rem unit conversion, rgba conversion, sync diffing and WCAG accessibility report)
- Developers get fresh, production-ready code instantly (different CI/CD workflows baked-in, like GitHub Actions or Tailwind config).
P.S. There is also a Figma plugin: https://www.figma.com/community/plugin/1582392311915034049/prism-sync that you can use to sync Variables…
Give it a try and let me know what you also. I’m also opened to feedback and adding more improvements/features into the product.
Thanks!
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.