Skip to main content

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.

I configured similar issues, wondering how to solve it

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 😃

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

Reply


Terms & ConditionsCookie settings