Skip to main content
Solved

Set bound variable for Typography


qurle

Hi 👋 Using variables for setting fonts are cool and helps our design system a lot.
But is there any way to set bound variables for text properties via Plugin API?

It’s complex read-only property and simple setBoundVariable() does not work. We don’t have known methods like setBoundVariableForFont().

Can we wait for Plugin API to support typography variables any time soon?

List of properties I can’t manage to set:
fontFamily, letterSpacing, fontSize, paragraphSpacing, paragraphIndent, fontWeight, lineHeight and unexpectedly stroke for sections 😀

Best answer by James_Yang

We have a guide for typography variables in the plugin API here: Working with Variables | Plugin API

View original

Gleb
  • Power Member
  • April 24, 2024

API for typography and gradients variables is still in development.

Regarding stroke for sections, I think this might be considered a bug.


qurle
  • New Participant
  • April 24, 2024

Thanks, Bleb
Hope to see it soon!


James_Yang
Figmate

We have a guide for typography variables in the plugin API here: Working with Variables | Plugin API


qurle
  • New Participant
  • April 25, 2024

Great news, thank you!
Didn’t see that few days ago. Glad it exists.


elv-heath

Why isn’t there a bindable option for fontSize?


James_Yang
Figmate

elv-heath

I’m trying to reference the variable id in a function using boundVariables.fontSize.id, but it’s returning undefined. Other id references like fills[0].boundVariables.color.id and boundVariables.strokeWeight.id work fine. Any thoughts?


James_Yang
Figmate

boundVariables.fontSize.id doesn’t work because for VariableBindableTextField keys in the boundVariables object, because the values are arrays of aliases instead of just a single alias.

The reason is that unlike normal bindable fields like strokeWeight, you can bind different variables to substrings of text. So you need to do boundVariables.fontSize[0].id (after checking that the array is non-empty).


elv-heath

That worked! Thanks for the help.


Michal_Kovacik1

@James_Yang Could you please enlighten us about how to manage textRangeFills ? Thank you in advance.


James_Yang
Figmate

textRangeFills in boundVariables covers variables in paints applied to substrings of text.

To programmatically use a color variable for a range of text, you can use textNode.setRangeFills() with a paint that references a variable.

figma.com

Michal_Kovacik1

@James_Yang ok, let’s say there is a variable 1 bound to paint applied to a substring in a text node, but there is also a fill style applied to a substring of the same node, which contains paint that is bound to variable 2. To use textRangeFills to exchange a variable for another one properly in this case, I need to get the fills text segments to know exactly to which characters is the variable bound. How would I know which variable is bound through the style and which one directly, since there is no information about it in obtained text segments, nor in boundVariables property?


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