Skip to main content

Calculate text size based on a base size variable

  • April 19, 2024
  • 4 replies
  • 415 views

Franni

We were pleased that the new typography tokens allow us to offer a default mode (base size 16 for accessibility) and a dense mode (base size 14 for table-heavy applications with reduced accessibility on request).
But for this to work with Figma right now, we would have to create separate tokens for each text style so that we can change them with the modes…
This just seems not feasible. Because in code it works by changing 1 single variable - the base size - we would have to create a BUNCH of extra design tokens just for Figma and then hide them from publishing so they do not appear in our documentation.

4 replies

  • Figmate
  • 1827 replies
  • April 22, 2024

Hi @Franni, Thanks for sharing your thoughts on variables! I totally get how creating separate tokens for each text style can be a bit of a hassle.

Your detailed explanation of the current challenge is much appreciated, and we truly believe your idea could be beneficial for many in our community.

We’re super excited to see how the rest of our community members respond to your idea. If there are others out there who’d love to see this idea become a reality, don’t forget to vote for it!

Thank you for being such a vibrant and engaged member of our community. Please remember to vote on your idea!

Thanks,


  • 1 reply
  • April 22, 2024

Looking at a similar approach where we would need to set up multiple typography scales. Ability to create formulas within variables would help set this up?


Franni
  • Author
  • New Member
  • 18 replies
  • April 22, 2024

Yes def! 🙂 In the last Figma event I saw a comment of a Figma person saying the following:

Interpolation and computed variables is something we’ve been thinking about, but nothing to share at this time!

So hopefully they prioritise this feature higher 😅 Features like this are what make a tool a pro tool.


neelts
  • 10 replies
  • May 12, 2024

Hi @Franni, my new plugin does exactly what you want, give it a try 🙂

Figma

Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings