A question about text sizes and scalable pixels. W...

# compose-android

[Matti MK]

A question about text sizes and scalable pixels. We use Material theme in Figma as well as on a Jetpack Compose project. The designer sets font sizes in px in Figma and I set them the same absolute value, but in sp in the code. This results in different sized texts. How does one go about syncing the px in Figma to sp on Android?

[romainguy]

The sp unit is the scalable version of dp, not px

[romainguy]

To go from px to dp/sp you need to multiply px by the original density/160 (for instance if the px value is designed for a 220dpi screen, multiply by 220/160)

[Stylianos Gakis]

So I suppose the first step would be to ask the designers what dpi do their screens use in the tool they are using in order to be able to do this conversion?
Do all the design tools have a notion of this? Perhaps the easiest would be for them to design in screens which have a dpi of 160 so the conversion is 1:1?

[Matti MK]

At least in Figma, by default, everything is in px, regardless of the frame used.

So, if I understood this correctly, then it's fine to use px on Figma, as long as it's done in a way that takes the frame (the Figma UI screen size, for example 800*1600) into account.

Once I know the frame size, I should then convert that to sp/dp and apply that value in sp/dp and have get more accurate result?

I've worked in many projects with many designers, and I've yet to see a developer or a designer that knows how to "map" Figma values into the values input into code. Could be very helpful if someone were to write an article giving concrete guidelines about this.

[romainguy]

It's not about the resolution but about density, i.e. how big the text should physically be

[romainguy]

A 12px font on an 800*1600 display for a watch would be a lot smaller than on an 800*1600 phone display for instance

[yschimke]

I wish I hadn't looked what our Figma has. 15px for the Figma text, but labelled as 16sp.

[Stylianos Gakis]

I did try to look around if there's a way to see what the dpi is for any given Figma screen, but I can't figure it out. Am I missing something obvious?

[romainguy]

Dpi is a feature of the hardware display. So you should ask the designer what physical device they were targeting with their design

[Kirill Grouchnikov]

This is where typography tokens really shine. When I get a screen / component spec from the design side, I don’t need to know the RGB value of any particular color, or the font family / font weight / font size of any particular text element.

It requires the initial setup of the typography stack in the design system (Material, or custom). It also requires your design to commit themselves to use the tokens from that design system. But if done consistently and correctly, it eliminates this whole category of questions.

[Stylianos Gakis]

Yup, but you can still mess it up in that first token to code translation, then everything is wrong 😂
Btw I checked in our setup, and if I understood it all correctly, the frames our designers use are actually just 160dpi, so it's a 1:1 translation. That's probably the best thing you can do as well to ensure that you're not making any mistake in this translation.

[Kirill Grouchnikov]

There is no translation if your design system defines tokens in proper units

[Stylianos Gakis]

RIght, no work on the dev side in that case. The designers would still need to do this mapping properly once though right?
Doesn't Figma always want things to be specified in pixels? They'd still need to map the token -> pixels once no?

I might be misunderstanding something here of course, I've only ever used Figma as a user and not as an editor myself.

[Kirill Grouchnikov]

They might be using a specific design tool on a desktop platform, but the end goal is to design for a specific mobile platform. So it’s a responsibility of the design side of the collaboration to figure out how to design for the end user, and not for what they see on a 45” monitor in front of them.