Although people don't recommend using viewport for font scale, I saw a trick that you can change the root's font size to viewport and use EM to change the scales. Here is the video: youtu.be/6wD3Ul6L3Oo?si…
Thread
Has anyone found a good way to work with fonts that scale with the viewport width (vw) in Figma? I'm trying to figure out the best way to handover Figma files for dev. with the vw-scaling.
Nice William. Really helpful for understanding how to work with it in webflow. In the end I’ll probably go with a combination of designing for different breakpoints in Figma and then having a good conversation with the devs on how I can help them translate that into code.
If you guys agree to use REM, you can use the Developer Mode on Figma to save time when converting pixels to REM (it's bugged somehow for me, but you can just click on the canvas and change the CSS from PX to REM) :)
Figma still doesn't support vw/vh but if it helps 1vw is equal to 1% of the screen width. Not ideal, but if you calculate the percent of the width of your text to the width of your screen that should give your dev a general starting point - though they will need to fine tune it
Thanks Molly. You're totally right... it will need some fine tuning regardless of the approach, I think. Maybe it's actually most effective to code some simple prototypes a proof-of-concept. I would just rather keep it in a Figma system approach. 😅
Even when I'm developing my own design and know exactly what the viewport *should* be, it still takes some testing and adjustment to ensure that scale works across all viewports/resolutions/etc.
I think giving a starting value and expecting the developer to adjust as necessary is not unreasonable! If you're looking to represent it across desktop and mobile screens try to keep that scale within your designs and make it very clear if + when the scale changes for the design