Skip to main content
Solved

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

pierrelord

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?

Thanks

root

Best answer by dvaliao

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:

github.com

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.

View original
Alok
1 person likes this
  • Alok
    Alok
This topic has been closed for comments

3 replies

pierrelord
  • pierrelord
  • Author
  • New Member
  • 15 replies
  • July 8, 2024

@Josh @dvaliao Any thoughts on this? Thanks

James_Newton1

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).,

dvaliao
Figmate
  • dvaliao
  • Community Support
  • 4695 replies
  • Answer
  • July 11, 2024

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:

github.com

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.

Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings