Skip to main content
Question

Change a rectangle to a circle


Eric10

Is it possible to change one shape into another instantly? For example, I have a 10 x 10 rectangle that I want to convert into 10 x 10 circle by some selection process.

2 replies

ntfromchicago

To do it instantly (and all at once by selecting multiple rectangles), and if you know a bit of TypeScript (or are willing to learn), your best bet is a plugin called Scripter.

Here’s a demo script where every rectangle you select is changed to a circle. Feel free to tweak it as you see it.

for (const node of figma.currentPage.selection) {
	if (node.type === 'RECTANGLE') {

		var circleDiameter = 0;

		// This script will make a circle
		// out of the rectangle's longest side
		if (node.height >= node.width) {
			circleDiameter = node.height;
		} else {
			circleDiameter = node.width;
		}

		// Create circle
		var newCircle = figma.createEllipse();
		newCircle.resize(circleDiameter, circleDiameter);

		// Position circle at same origin as rectangle
		newCircle.x = node.x;
		newCircle.y = node.y;

		// Copy the fills, strokes and effects
		newCircle.fills = node.fills;
		newCircle.strokes = node.strokes;
		newCircle.strokeWeight = node.strokeWeight;
		newCircle.effects = node.effects;

		// Delete the original rectangle
		node.remove();
	}
}


Eric10
  • Author
  • 25 replies
  • March 14, 2022

I see. Yeah, I wanted to verify this wasn’t a built in feature. Thanks for the resource.


Reply


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