Hello. I was wondering if it is possible to have percentage values in variables, like setting percentage value for frame widths or shape sizes (etc.) that have variable modes applied to them? Percentage values could respond better to content that varies within a frame or frames within frames.
- Home
- Forum categories
- Share Your Thoughts
- Suggest a Feature
- Use percentage for size variables
Use percentage for size variables
- June 27, 2023
- 65 replies
- 23371 views
- Active Member
- 28 replies
- Marie_Siljan1
- Revital_Hasenfratz1
- hilyaf
- Kate21
- Cornelius_Kluge
- Brett13
- LXNDR
- _Platform_Design
- Erin_Pitts
- Martin_Schilde
- anonimo
- Jackie_Babe
- Dirk_van_Veghel
- Michael_Staton
- mark.langer
- ahhampto
- Matthew_Cassar1
- Mattsson_Ludwig
- Phil_Larsen
- Daniel_Otterbein
- Istvan_Tutto
- Ralf_Hoefer
- Morten_Larsen
- Miguel_DOMO
- Miguel.Tavares
- Kevin33
- Marcio_Gutheil1
- Fusato_Alyssa
- Gabriel_Brito1
- Aaron_Cabrera
- adam_asseraf
- SteffMueller
- Gauthier2
- Alexey_Sholohov
- Sven_Grutzmann
- Martin_FM
- david.sharpe
- Aguiar_Leonardo_extern
- Slava_Bronevitskiy
- sethpohler
- Sharon_Toi
- Tom_Hendrickx1
- Maggie8
- Valentin9
- Lokfu
- Chien-Ju_Peng1
- Alexandra_Gruenagel1
- Martin12
- Lukasz_Datkowski
- Paulina_Szuscik
- Rui_P_Cabrinha
- Rodrigo3
- Kim_Meyer
- 1111071
- Akil
- Ruben2
- Ish
- Manuel_Calero
- martiankid
- Raz_Pulurian
- Ioana_Ionescu
- Nils_Nowacki
- Nico12
- Marie13
- Ara_Garabedian
- Morris_Joe
- Greg_Huntoon1
- Chaz_Gatian2
- Jithin1
- Moritz_A
- Elyriades
- Daniek
- Jan Niklas Hellenbrandt
- jajamojo
- Liss Banks
- hilyafesima
- ErikW
- MARIA DE LA PAZ GRAZIANI
- Elizabeth Moroz
- Timo Mönninghoff
- sarweshshah_druva
- Seth V
- Levu
- Mindaugas Narbutas
- claudiaf24
- MatheoAsk
- Fabian_w
- Shukri.brewer
- vivó eusébio
- Reiner Schengber
- Marc Hauser
- juicedesigns
- AleNoir
- Brandyn
65 replies
- 4 replies
- May 30, 2024
To have percentages in autolayout would also be great. Or maybe you can make this dependent on grid, so that you can specify a number of columns for example in a grid of 12 columns. You would als have to take the gaps between columns into account so that is a little more complex.
- New Participant
- 30 replies
- June 12, 2024
- 3 replies
- June 30, 2024
+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 😇
- New Participant
- 60 replies
- July 2, 2024
Please dear God, prioritize this. It would save SO much work.
- New Participant
- 60 replies
- July 2, 2024
Yeah that’s how it should actually work, but that’s not the way it works in Figma. Causes so much pain and violations of the DRY principle.
- 1 reply
- July 5, 2024
I don’t understand how this is still unsupported. Figma has built in percentage support for things like line height. Why in the world would they release variables without supporting percentages?
- 8 replies
- July 23, 2024
Another +1 here.
Tried to save line-height percentages as variables (i.e. "loose": "200%"
) and it seems they are unsupported, even as strings.
- 7 replies
- August 1, 2024
Upvote for variables using percentage. Would definitely use this feature.
- New Participant
- 7 replies
- August 4, 2024
Absolutely +1 for this feature
- New Member
- 2 replies
- August 6, 2024
+1 also for the Topic and there are many more ideas around percentage: Fr/Percent units for more control over auto layout content
- 2 replies
- August 30, 2024
@atien +1 for this feature. Will also be especially useful for things like line-height and letter spacing. We use unitless values in CSS not fixed px values which could vary between fonts and modes.
- New Member
- 8 replies
- September 2, 2024
Absolutely a good idea. Need it for line height and letter spacing.
- 3 replies
- September 12, 2024
I feel like this feature is almost a requirement to have considering modern webdev principles. Percents should also be applied to the Variables features. Currently there is only a “Number” variable, which is just limited to floating point numbers, very limited application.
The only cases I can see that it may cause issues is for values that aren’t entirely tied to dimensions, but for line-height. This kind of case, should always be relative to the font-size (e.g. if Variable-A = 150% or 1.5x, and another variable Font-Size = 16, a third variable Header = Font-Size * Variable-A wold result in Header = 24)
This could also help with opacities in colors and pass through %.
Overall, the feature would help to streamline not just the concern for responsive design, but also unify other features as well.
- Active Member
- 30 replies
- September 18, 2024
Yes, this is needed! Also seems to tie in with these threads about % as well:
- 2 replies
- September 24, 2024
+10000, I find responsive designing for handoff to devs SO tedious, borderline unusable in Figma, without a whole lot of variable malarky to set up breakpoints with max & min widths for like 5 screen sizes.
If percentages were just a thing, it could be truly fluidly responsive for maybe just 2 screen sizes, mobile & tablet+, and usable outside of the flexbox ‘fill width’ model which doesn’t allow for fully custom design by a grid (5/3 columns designs on an 8 column grid, 6/3 columns on a 9 column, etc).
- 1 reply
- October 7, 2024
This is needed! Any progress Figma crew?
- New Member
- 7 replies
- November 5, 2024
So development time from Figma was used on a new UI that is not as functional as the previous UI was, but percentages STILL haven’t been added?! Come on Figma! Get your priorities straight. Give the users what they are ASKING FOR, not what you hope they will like.
- 1 reply
- November 8, 2024
+100000 This would definitely help when designing data tables especially when you want a column to have a specific percentage based on the table’s width.
- New Member
- 2 replies
- November 8, 2024
Needed here as well - be it allowing float values (e.g. 1.2) or even 100% as string would do. But strings are not allowed - why? . Now we need to manually convert all values later in deployment have another manual conversion sheet for all the font styles…
- 1 reply
- November 14, 2024
Does Figma developing a percentage for size variables?
It is crucial for building cross-platform applications as there are countless screen sizes…
- 1 reply
- November 21, 2024
this is crucial. use cases are endless. Especially since designing fluid layout’s is becoming more and more crucial with the rise of foldable devices
- 1 reply
- December 4, 2024
Not being able to use percentage in variables for line height is a huge blocker. Could you flip it around and instead make it possible to interpet numbers as a percentage value if used in line-height? I mean, we already have the possibility of defining percentage in the line height field. Please look into this 🙏
- 8 replies
- December 17, 2024
This is such a frustrating gap in Figma’s abilities. I can’t fathom why it’s not a priority.
- New Member
- 3 replies
- January 23, 2025
We are building the design system using variables, and we need letter spacing to support the percentage value variable because we need to quickly convert from percentage to em instead of using the pixel.
Hello. I was wondering if it is possible to have percentage values in variables, like setting percentage value for frame widths or shape sizes (etc.) that have variable modes applied to them? Percentage values could respond better to content that varies within a frame or frames within frames.
To have percentages in autolayout would also be great. Or maybe you can make this dependent on grid, so that you can specify a number of columns for example in a grid of 12 columns. You would als have to take the gaps between columns into account so that is a little more complex.
Kind of weird, because there are some cases where relative values (%) are possible like here (letter spacing):
And when appling a variable it only supports pixels:
That’s bad and should be supported.
+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 😇
Please dear God, prioritize this. It would save SO much work.
Yeah that’s how it should actually work, but that’s not the way it works in Figma. Causes so much pain and violations of the DRY principle.
I don’t understand how this is still unsupported. Figma has built in percentage support for things like line height. Why in the world would they release variables without supporting percentages?
PLEASE for corner radius and stroke, too.
Another +1 here.
Tried to save line-height percentages as variables (i.e. "loose": "200%"
) and it seems they are unsupported, even as strings.
Upvote for variables using percentage. Would definitely use this feature.
Absolutely +1 for this feature
+1 also for the Topic and there are many more ideas around percentage: Fr/Percent units for more control over auto layout content
@atien +1 for this feature. Will also be especially useful for things like line-height and letter spacing. We use unitless values in CSS not fixed px values which could vary between fonts and modes.
Absolutely a good idea. Need it for line height and letter spacing.
I feel like this feature is almost a requirement to have considering modern webdev principles. Percents should also be applied to the Variables features. Currently there is only a “Number” variable, which is just limited to floating point numbers, very limited application.
The only cases I can see that it may cause issues is for values that aren’t entirely tied to dimensions, but for line-height. This kind of case, should always be relative to the font-size (e.g. if Variable-A = 150% or 1.5x, and another variable Font-Size = 16, a third variable Header = Font-Size * Variable-A wold result in Header = 24)
This could also help with opacities in colors and pass through %.
Overall, the feature would help to streamline not just the concern for responsive design, but also unify other features as well.
Yes, this is needed! Also seems to tie in with these threads about % as well:
+10000, I find responsive designing for handoff to devs SO tedious, borderline unusable in Figma, without a whole lot of variable malarky to set up breakpoints with max & min widths for like 5 screen sizes.
If percentages were just a thing, it could be truly fluidly responsive for maybe just 2 screen sizes, mobile & tablet+, and usable outside of the flexbox ‘fill width’ model which doesn’t allow for fully custom design by a grid (5/3 columns designs on an 8 column grid, 6/3 columns on a 9 column, etc).
This is needed! Any progress Figma crew?
So development time from Figma was used on a new UI that is not as functional as the previous UI was, but percentages STILL haven’t been added?! Come on Figma! Get your priorities straight. Give the users what they are ASKING FOR, not what you hope they will like.
+100000 This would definitely help when designing data tables especially when you want a column to have a specific percentage based on the table’s width.
Needed here as well - be it allowing float values (e.g. 1.2) or even 100% as string would do. But strings are not allowed - why? . Now we need to manually convert all values later in deployment have another manual conversion sheet for all the font styles…
Does Figma developing a percentage for size variables?
It is crucial for building cross-platform applications as there are countless screen sizes…
this is crucial. use cases are endless. Especially since designing fluid layout’s is becoming more and more crucial with the rise of foldable devices
Not being able to use percentage in variables for line height is a huge blocker. Could you flip it around and instead make it possible to interpet numbers as a percentage value if used in line-height? I mean, we already have the possibility of defining percentage in the line height field. Please look into this 🙏
This is such a frustrating gap in Figma’s abilities. I can’t fathom why it’s not a priority.
We are building the design system using variables, and we need letter spacing to support the percentage value variable because we need to quickly convert from percentage to em instead of using the pixel.
Reply
Related topics
Separate components and plugins/widget panels for easier access
Suggest a FeatureAssets panel should reflect background color of pageicon
Suggest a FeatureIssue: Component Search Returning No Resultsicon
Ask the CommunityAdd haptic feedback to your prototypes
Showcase Your WorkHow can I optimize Figma performance when working with large design files?icon
Ask the Community
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
Scanning file for viruses.
Sorry, we're still checking this file's contents to make sure it's safe to download. Please try again in a few minutes.
OKThis file cannot be downloaded
Sorry, our virus scanner detected that this file isn't safe to download.
OKCookie 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
We use 3 different kinds of cookies. You can choose which cookies you want to accept. We need basic cookies to make this site work, therefore these are the minimum you can select. Learn more about our cookies.