Post Config24: Figma's new "Simple Design system" - What are "Root Font size" and "Scale" doing exactly in Responsive variables?

Looking under the hood at Figma’s “Simple design system”, there’s a “Responsive” collection, with variables for “Root font size” and “Scale”… These look like they could be implementing a REM-based font-size approach - if the “Scale” variable could be used in variable calculations, which to my knowledge, it still cannot yet…

  1. I gather that “#Scale03” could be used to change the font size to a different scale variable depending on the mode selected (Desktop/Mobile/Tablet) - but it isn’t leveraging that
  2. “Scale” on the other hand looks like it could be a multiplier, so that (Example: a 16px font size in desktop would be 20px (16*1.25) on mobile… but I’m not sure what this is actually doing here…

I haven’t fully watched all of Config24 sessions yet, so I apologise if this is a dumb question covered in any talks.

Anyone know what this does?


1 Like

@Josh @dvaliao Any thoughts on this? Thanks

I’m also wondering this. It would be amazing to be able to control font sizes across responsive layouts by changing on variable (like REM in CSS).,

Hey @pierrelord, thanks for reaching out and so sorry for the delayed reply!

We’re dealing with some backlog due to Config. To answer your question, we don’t use those variables within the file, but we do have a responsive scale-based system set up on the code side.

You can see the variables here:

While there’s no direct synchronization between the design and code side for Simple Design System, having those variables in there allow us to indicate there is some crossover with the approach for breakpoints within the system.