Skip to main content

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 😀

API for typography and gradients variables is still in development.


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

Thanks, Bleb

Hope to see it soon!

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

Great news, thank you!

Didn’t see that few days ago. Glad it exists.

Why isn’t there a bindable option for fontSize?

There is! VariableBindableTextField | Plugin API

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

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.fontSizez0].id (after checking that the array is non-empty).

That worked! Thanks for the help.

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

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

Reply


Terms & ConditionsCookie settings