Font-size based paddings & spacings

Share an idea
1

On the web, we create components based on font-size by utilising the em unit. A Button’s padding or margin, or maybe even fixed height for example is relative to its font-size. This is not possible in figma at the moment, but an essential paradigm in current modern UI/UX design. Small Elements with a single text line can at least have their height (or vertical padding) be font-size relative, by setting a %-based line-height, but this fails on the horizontal axis, where we have no way of making anything font-size relative.

This would be fine to be confined to auto-layout for the start imo. Having more relative units that mimic mediums like the web platform would be great in general, but maybe being able to define spacing/padding as 2em to have it relative to font-size would be a good start.

Of course implementing the cascade would be even better, but I think confining font-size relative sizing for certain attributes in components would be enough to start. It would bring figma closer to the web platform’s native capabilities that are currently lacking.

3 Likes
2

better yet, allow file defined base font-size and make rem units available, useable for dimensioning any layer.

3 Likes
3

I agree with this. It would be great to be able to apply a base font size on the page/file a bit like the mockup below. Then allow designers to use it as a base and have variables calculate REM based on it. We could then link that to our design system and define different device based sizes based on it.

image

4

We badly need the same

5

This needs to be included. How can we tie rem adjustments when our teams use this for padding and margins but we cannot reflect these ties in our own designs.

If we adjust the base rem = 16 to something lower or higher, our designs need to be readjusted manually… for every screen… every component… it’s a massive undertaking.