Skip to main content

In our design system we use design tokens for line height.


Example:


We see these as part of a “line height toolbox” which depending on context you could override the typographys default lineheight token with any of the four. The same way text alignment is always accessible regardless if youre working with a text style or not.


Skärmavbild 2024-04-23 kl. 10.08.06


Making this perhaps optional if you have multiple variables/tokens within a segment would be just great.


We do the same with letterspacing and fontweight.


Up until now we have been using the Figma Tokens plugin which has allowed this. As for now with variables, it is no longer possible which means that we would either have to create a huge set of text styles, or a very annoying solution with modes.


Great to see the typography part released with variables though i am slightly disappointed that the relative values are not supported (ex. lineheight 😵 as countless others have already pointed out.

Hi @Andreas_Nordenson, Thanks for sharing your thoughts on the use of variables for horizontal alignment in text properties! We truly appreciate you sharing your use cases and the challenges you’ve encountered.


Seeing that it already has double-digit votes, I believe many of our community members will also support this!

We use votes to gauge what our community is most interested in, and this helps us to prioritize our actions. So, we’re eager to see how everyone else feels about this idea.


Your input is truly valuable to our community, and we really appreciate it.


Thanks again!


@Junko3 Perhaps im missunderstanding your response. The text alignment was just an example of a feature that does work regardless if youre working with a text style or not.


If my h1 textstyle has “lineheight-s” set as the lineheight, we would like to have the ability to override “lineheight-s” with “lineheight-m”, making whatevers in the same lineheight “folder” of variables accessible through a dropdown (the same way the 3 text alignments are accessible"


Hi @Andreas_Nordenson, Thank you for the correction! I now understand what you intended with this idea.

I really appreciate the time you’ve taken to clarify this for me!


@Junko3 a general approach to the question, how can a library variable be overwritten via a local variable (by default, directly open inserting an instance) ? related to this topic


@Johan_Netzler in your post can u give more details where to select ‘check to override’ ? for automatically overriding library variables with local variables when they have same name/structure. ?


In fact here is a still open discussion for editing non-local variables


Reply