Web Design » Figma » How Do You Cut a Circle Shape Into a Button in Figma?

How Do You Cut a Circle Shape Into a Button in Figma?

Last updated on September 28, 2022 @ 9:43 pm

There are a few ways to cut a circle shape into a button in Figma. The first way is to use the Rectangle Tool to draw a rectangle around the circle. Then, use the Subtract From Shape layer operation to subtract the rectangle from the circle.

The second way is to use the Ellipse Tool to draw an ellipse inside the circle. Then, use the Intersect Shape layer operation to intersect the ellipse with the circle.

PRO TIP: If you are not careful when cutting a circle shape into a button in Figma, you may end up with an uneven or jagged edge.

The third way is to use the Pen Tool to draw a path around the outside of the circle. Then, use the Subtract From Shape layer operation to subtract the path from the circle.

All of these methods will result in a button with a circular hole in it. You can then style the button as you like using Figma’s various styling options.

Dale Leydon

Dale Leydon

Sysadmin turned Javascript developer. Owner of 20+ apps graveyard, and a couple of successful ones.