Recommendation on using sizing units

[nareshbhatia]

Hi, I am trying to figure out what's the best way to use sizing units within this plugin.

Example

Here's a typography specification that I want to achieve in css:

.h1 {
  ...
  font-size: 6rem;
  line-height: 1.167;
  letter-spacing: -0.01562em;
}

I have set up my tokens like this, with units exactly as specified above:

1. fontSize.h1 = 6rem
2. lineHeight.h1 = 1.167
3. letterSpacing.h1 = -0.01562em

Now I set up my Typography h1 token like this, with token values without doing any math:

When I hit Update, Figma's h1 style gets updated like this:

1. fontSize = 96 (correct - 6 * 16 = 96)
2. lineHeight = 1.2 (incorrect - this should be 96 x 1.167 = 112, but I think this is simply 1.167 rounded to 1.2)
3. letterSpacing = 0% (??? - I don't even know how to compute this to Figma's model!)

Since this did not work, I changed the lineHeight in my typography token to do some math:

When I hit update, the Figma style changes to line height of Auto, so obviously math with units does not work.

The only way I could make this work was to specify all units as numbers, thus assuming pixels. Is this assumption correct?

A couple of related questions:

1. Can token transformer handle unit based calculations like the above?
2. I realize that using rems etc. ties the token model to web. This will not work for mobile? Is there a better way?

Overall, what's is the recommended way to work with units?

Thanks in advance for your help.

[nareshbhatia]

Digging into the examples, the following transform assumes that the incoming size will be a number and appends px to it. In my case, it was coming in as 6rem which got converted into 6px - obviously not correct.

I am starting to think that the best approach may be to specify all sizes as unit-less numbers in Figma representing pixels, and then converting them to rem, em etc. in platform specific transformers. Am I thinking in the right direction?

StyleDictionary.registerTransform({
  name: 'sizes/px',
  type: 'value',
  matcher: function (prop) {
    // You can be more specific here if you only want 'em' units for font sizes
    return [
      'fontSize',
      'spacing',
      'borderRadius',
      'borderWidth',
      'sizing',
    ].includes(prop.attributes.category);
  },
  transformer: function (prop) {
    // You can also modify the value here if you want to convert pixels to ems
    return parseFloat(prop.original.value) + 'px';
  },
});

[six7]

I think both approaches work, I've been doing it the unitless px way too recently. In style dictionary you could then just transform to rem easily by dividing by 16 and adding rem.

I'll post some new examples soon with a more complete style dictionary config.

[nareshbhatia]

Perfect, @six7!

• I have updated my sample project to use unitless px at the Figma Tokens level and do the conversions at the Style Dictionary level.
• In addition, I have started using percentages for line heights and letter spacings in Figma Tokens because that's what Figma itself understands well. Then I translate them to unitless line heights and percentage em in Style Dictionary, which is the best practice in web.
• I have stopped using the attribute/cti transform from Style Dictionary, because CTI in general does not work well in many use cases for me. I am writing my own transforms that are driven from Figma Token types rather than token.attributes.category. Hopefully you are thinking of aligning the Figma Token Types with W3C recommendations as they evolve.

Here's my Styles Dictionary setup. It still WIP, but would love your feedback.

[nareshbhatia]

Another thing I learned when reading Style Dictionary docs was the concept of "Category / Type / Item" (CTI). I was completely unaware of this and it was interesting to note that their transformers assume this taxonomy. Also the component-cti example was very helpful in understanding how this taxonomy can be overridden. @six7, it would be good to add these references to the plugin docs - it will help people get a broader context of the ecosystem.