I’d like to use border radius to make a frame into a circle by just entering 50% (preferably as a variable). That way, if the frame is made larger at some point later, it would still be a circle.
I do have a workaround for now, which is just to put a really large border radius value, but this seems like a hacky way to do it.
Because all the new variables being introduced it has encouraged me to add border-radius to the library, but again like yourself, it would be great to add 50% for full cornered
buttons.
Hey there @Michael_Swarts. This feature seems to be helpful but there is a problem. all of the properties we are using have a meaningful translation to CSS. this also applies to border-radius.
Read this post in stack-over-flow to learn more about how border-radius works in CSS or similar languages that are used for UI.
In the CSS, the percentage doesn’t work the way you expect. In a circle, the radius is a constant number r. But in an oval, there are two main radiuses for each axis (r1, r2). The percentage defines the ratio between these two radiuses. In CSS, they use integers for circular borders and percentages/fractions for oval-like arches. Your suggestion for borders can cause confusion or conflict in communication between designers & programmers or even might not be achievable at all (because whether you want it or not, the programmer should use a large number instead of 100%, they have no other option).
Since the screen size has a limit, people usually set 999 to indicate a circular corner. I believe the design tool should also match with the production tool. we need to be synced with programmers.
I hope you find this helpful.
When it comes to border-radius, CSS accepts percentages.
There is communication breakdown if a DEV inspects the object in Figma and sees a pixel value
I’m also having this issue with inconsistency between design and code. I am using 999px in Figma but when dev used 100% it produces a different result I didn’t expect.
Please add this feature; px scales horribly and is hard to use for a design system for consistency.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
