Change a rectangle to a circle

Ask the community
1

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

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();
	}
}
1 Like
3

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

1 Like