Skip to main content
Solved

Dev Mode is showing variable names (instead of absolute values) where variables are not applied

  • September 15, 2023
  • 3 replies
  • 1214 views
Abhishek_Kushwaha

Hello everyone.

I tried the variables feature in Figma and created a variable group of border radius. The values are numeric, following the Tailwind convention (2, 4, 6, 8, 12, 16, etc.)

The problem is that now whenever I apply a padding of 16 it is shown as ‘Border Radius/rounded-2xl’ which is a variable I defined with the value 16. I have not applied this variable in auto layout for the padding, yet Dev Mode is showing the variable name instead of the value ‘16’. Same problem persists if I apply the padding of 8 which is defined as ‘rounded-xl’ in my variable set. If I change the padding value to any other value which is not declared as any variable, say 13, then Dev Mode displays the absolute value 13 correctly.

Screenshot 2023-09-06 144021

The only solution I see to this problem is deleting the numeric variables I have defined. Which basically means that I don’t get to use any numeric variable properties.

Best answer by Abhishek_Kushwaha

Thanks for the reply all. The fix I applied was this: I edited the setting of each numeric variable in my Border Radius group to only show up in corner radius. This way it Dev Mode stopped substituting the variable name everywhere. You can refer the screenshot:

image

View original
This topic has been closed for comments

3 replies

_UED_UX5
  • _UED_UX5
  • New Member
  • 2 replies
  • October 19, 2023

I configured similar issues, wondering how to solve it

Bojian_Liu

I have same issues, and here is one solution I found. and you don’t have to delete your numeric variables.

image

You can add code syntax for each spacing variable. which it means you can rename your variable, and you will see that name when dev mode turn on.

For example, open your local variable & edit your padding of 16 one , and add code syntax say “16px” for your padding of 16px variable. So that way you will see “16px” instead of whatever your variable original name.

hope that will help, and if there is better solution for this issue, let us know 😃

Abhishek_Kushwaha

Thanks for the reply all. The fix I applied was this: I edited the setting of each numeric variable in my Border Radius group to only show up in corner radius. This way it Dev Mode stopped substituting the variable name everywhere. You can refer the screenshot:

image

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