The default settings (at least in my Figma) load a percentage for letter-spacing, but this is not allowed in CSS. For a less avid programmer this may be confusing, when trying to get it to work.
Either set the default to a px value, or add a warning inside the Inspect code
In CSS code under the inspect tab itās correctly shown as 0.01, no % there.
Then maybe it should not show % in the interface, but say āemsā ?!
Figma is a platform-agnostic design tool, itās built not only to design for the web, so showing CSS-only values that make no sense on other platforms wouldnāt be a great idea in my opinion.
Thatās not entirely true. Almost all inputs are in pixels, except maybe opacity. The input field I designated being faulty is the only one that has a percentage.
If it truly was agnostic, it would not be called letter-spacing, because in typography its called ātrackingā (not kerning, thatās for individual letters).
Almost everything in the screenshot is pixels.
The whole interface is based on pixels. The Rulers in Figma arenāt in CMās or MMās either, which would be a real drag for anyone using it to design a brochure, or print design.
So lets not pretend. Figma is mainly for web and thus in px and (r)ems.
PS: Thatās why the fonts is also not in PT.
I am wondering why Figma seems to set letter-spacing on its own. Is there a reason the default on opening a new file isnāt 0? In fact, it would be nice to have a Figma preferences function such that all new files have the base settings for export and letter-spacing.
I was watching a figma tutorial ā¦ How on this video he can set up the letter-spacing in pixel?
True, but the request of my topic is to have it in PX as a default.
This is not intuitive at all to put % when it can be changed to px. At least show both options and let the user select the measurement. Iām currently transitioning from Sketch ā Figma and Iām having to google every little thing. For a design program that is used to create products that should be intuitiveā¦this program is not.
Iām very confused. Iām having to fix spacing in our Flutter project, which expects spacing in px. Yet in Figma, its saying 1% across all fields, under both the design and inspect tabs.
1% of what exactly? How do i transform this into pixels?
In case you havenāt found the answer, I believe itās 1% of the elementās font-size, which in CSS would be 0.01em.
A browsers default is 16px, which is 1em.
If 0.01em is 1%, than the size would be 16/100=0.16 pixels.
Given we design everything in pixels, its stupid to have to use percentages to do the spacing, and calculate back and forth.
This just saved me. Thanks.
@MakePixelsWork
rems and ems are different. 0.01em is indeed 1% of the elementās font size.
However, I would still appreciate if Figma allowed switching units.
I know. But there is no way to set the root em size in Figma.
Iām using Figma token and Iām exporting it in json format. In that case, I have to use the px format. So I have to convert this. In order to simplify this process, it would be good to support the option in Figma.
Just started using Figma recently and disappointing that some very good points have been made about this, and yet it still remains an issue.
There is no reason it should default to percentage-based.
Last I heard, Figmaās development team only looks at issues that have more than 700 up-votes, before they take this into consideration. So weāll need 672 more votes before they learn about this stupid percentages vs pixels issue.
So for %age, as explained, you would use em as it is relative, so 0.01em is always 1%, itās not tied to a root font size but a percentage of the font-size of whatever text it is assigned to.
rems on the other hand are derived from the root font-size, with 16 being the default in both browsers and Figma. You can also update this (not generally recommended) for the CSS that is generated by Figma if you wanted to under Unit scale in the unit options dropdown in the CSS panel.
Personally I think %ages as the default is much better for how weāre building type scales and interfaces these days. Having a static px or rem value is only useful if you have static font sizes which isnāt a great default. Having the %age-based output is better for type sizes that scale with the viewport size i.e. font-size: clamp(2.5rem, 7.3vw, 6.5rem). Having a scaleable type system also means you avoid re-setting the static letter-spacing value for each media breakpoint if you adjust the font-size; if you change your font-size manually across 5 different breakpoints, youād need to manually also define 5 different letter-spacing values. Itās kind of like how you donāt want to be setting line-height to a fixed value, relative is always a better approach for consistency.