Different values for each corner in a variable

Work is already being done to adapt the system to Variables, but here and there certain things cannot yet be transferred. Some of our components have different corner radiuses. It would therefore be quite good to be able to create a number variable and in the case of a corner radius to be able to specify all 4 values.

You can break border radius apart and assign different values for each corner

Different varible values to each corner? How?

The same way as you do it without variables. Click that icon to reveal individual corner values, start with “=“ and set whatever values you defined

2 Likes

Yes, we can break the corner radius, but it would be much better if we could have it as an all-in-one variable. it would be handy if you want to create themes or change styles in one click instead of changing all corners for every style.

The variable feature is already helping us to create different themes (like for buttons, etc). this is some part of the big idea behind the variable, which can be useful.

2 Likes

Click that icon to reveal individual corner values, start with “=“ and set whatever values you defined

Thanks, for some reason the = shortcut wasn’t working, now it is.

1 Like

The trick to use the “=” shortcut only assigns a static value to that given corner, but if like me, you are planning to do a major overhaul of the design system appearance in the future, you want that value to be tied to a variable.

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.