Support for relative size units (vw, vh &c)?

There is no way to do that, so feel free to change your topic to a feature suggestion and move it into #product-ideas or just create a new topic there.

Seems like the plugin linked below is your solution.

• Text Resizer helps you update your designs quickly and flexibly with respect to the base font size defined for 1rem …

Hmmm, wait a moment, maybe you mean fluid resizing font relative to the container size. I haven’s seen support for this in html/css either, so doubt it will be possible in Figma. I may be wrong.

The vw, vh, vmin, vmax units define font sizes in relation to their viewport sizes. For example, if the viewport width is 1600px, 1vw equals 1600/100 = 16px.

+1 - I do have the same issue. I would love to have a better auto-scale (fluid) fonctionality in Figma… and not just fonts, but padding, containers, border-radius, etc.

I would add that being able to set a base px value equal to 1em and then use ems/rems when designing, we could save a lot of time not having to redesign in for all screen sizes. It would be nearer what a developer would have to build.

Imagine setting this is your design library and make it work for anything you build.,.ahhhh, a dream.

+1. This is a badly needed feature. Why have to leave it to the developer to calculate these things?

Agree, it would help a lot! Designing with pixels and coding with relative units creates a big disconnect between design and engineering, and makes at least one of these teams’ life harder.

+1 this, fluid font size

Hi, I ran into the same problem. I got tired of doing it manually, so I wrote a python script that converts px to vw or vh and saves it as a new file . You can find it on GitHub at nicstephens/pxtovw

Yes relative size would be very usefull.

Would love to set sizes based on rem’s, vw’s or grid %'s. Text block 70% of div.

Would love this too. Not just for font size, but for everything. So many of the web elements I design are dependent on the screen width, like setting a container to 90vw, an image inside it to 25%, etc. Things are hardly a defined pixel size if you want a responsive design.

Is there a possibility to see support for vw, vh and set unit scale for rem in vw and vw in the future?
Without this, it is impossible to make a modern layout of applications.
It would help a lot.

Yes, please !!!

weird its not supported by default
100% needed feature

+1! Three years and still going.

@Peiran_Tan Would it make sense to update the title removing “fonts”? I understand that your case was initially related to fonts, but in CSS these units are for most elements, as many have already pointed out. I think it would broaden the scope of the feature and perhaps gather even more votes?

+1 really needed

Relative units are already introduced in Elementor, Framer. Why is Figma so late, I can’t stop wondering. Introducing em, rem, %, vh, vw for whatever object with editable base of 16px will make responsive design a walk on the clouds for both designers and developers. Now it’s quite a struggle and very time consuming. Has anyone seen any comment from Figma on this? Do they plan to upgrade to relative units ever?

I’m still dumbfounded this hasn’t been deployed yet.

This is a very necessary feature.

+1 Strongly needed. For instance, during development, I always use the ‘calc’ function for mobile sizing. For example:

@media screen and (max-width: 479px) {
    html {
        font-size: calc(0.75rem + 0.42vw);
    }
}

This method is efficient and generally ensures that everything fits perfectly with minimal adjustments. The challenge, however, is keeping the mobile designs in Figma synchronized with the actual scaling used in the developed version. Therefore, utilizing relative size units would be optimal, especially when combined with ‘calc’ to mix different size units. Additionally, incorporating the frame width as ‘vw’ should be quite feasible. It should also be possible to set a base font size in Figma for specific frame widths.

Please add 😇

Hey All, thanks for the feedback and sorry for the lack of acknowledgement here!

We’ll pass this thread onto our team for future consideration.

It’s not for Figma but we have a JS script that does this very thing, typesetting based on container width:

textblock.io

And we’re currently working on a release candidate that works properly in React.