Skip to main content
Answered

Resize multiple shapes to the same size (not stickies)

Hi, is there a way for me to resize multiple shapes to the same size? We didn’t think through our process thoroughly enough at the start, and now have 1000+ shapes that need to be resized to the same size for clarity. 

If there is no feature for it, is there a way to script it? I’ve done similar scripts for illustrator but don’t know how I would go about running them within Miro. 

 

 

18 replies

Kiron Bondale
Userlevel 7
Badge +6

@Jakob -

In your particular case are these all the same sort of shape - it is hard to make out from the image? If so, one approach might be to select all of them, transform them into sticky notes, set the sticky note size and then transform them back into the original shape.

Kiron

Kiron D. Bondale, PMP, PMI-ACP, PSM II, ICP-ACC, DASSM, DAC, DAVSC, PMI-RMP
Jakob
Userlevel 2
Badge

@Kiron Bondale Thank you, this works! Yes, they are all the same shape, rectangle with rounded corners. Unfortunately, the texts lose their formatting when transferred to stickies, so I still need to go through every element to correct that. It’s much less work than resizing all manually though. 

S
Userlevel 2

would be nice to have this as a feature and not a workaround :)

L

This should be a feature.  I don’t want to have to make something a stickie in order to resize it.  There are lots of shapes available in Miro and when making rounded rectangles I would like to make them all the same height.  This is a standard feature in similar tools.

Robert Johnson
Userlevel 7
Badge +12

Someone with the right development background and experience should be able to create a simple web-plugin in a few hours that would basically allow someone to set the width and height of a selected group of shapes or sticky notes.

Have a developer check out the Miro Developer Platform documentation for more info.

Visual Thinker | Volunteer Community Moderator
M

@Jakob Have you tried SHIFT + selecting the items and dragging the box that appears around the grouped items? Just had the same issue and it resized all manner of objects equally. Hope this helps!

G

@Jakob Have you tried SHIFT + selecting the items and dragging the box that appears around the grouped items? Just had the same issue and it resized all manner of objects equally. Hope this helps!

I was looking exactly for this solution, thanks!!

R
Userlevel 2

@Jakob Have you tried SHIFT + selecting the items and dragging the box that appears around the grouped items? Just had the same issue and it resized all manner of objects equally. Hope this helps!

Doesn’t this resize an equal amount to all objects?

I have a mix of different sizes (all of rounded rectangle shape) and want them all to end with same height and width. I don’t think what you’re suggesting does that. Yours can make a same size set all bigger or all smaller.

Converting to sticky notes and back did not work well for me (ends up with different color and different shape)

G

I’m using the clusterizer add-on, which doesn’t allow me to change the shapes into sticky notes … so this workaround doesn’t work in my case. However, agree with the rest of the responses here - it should be a feature, mainly if it was done on sticky notes. 
As I work in a product company, I understand product roadmap, and sequencing of features to get the right bang for the buck. Assuming you also have stats about this need vs others. 
Furthermore, I don’t like to presume the effort and complexity of making this feature a reality. However, I’m curious as to how much of effort and complexity as you’re already created this behaviour to one of your objects - sticky notes. 

Also would like to recognise that Miro is one of the best tools I have ever encountered for a very long time! So, while I’m ranting above, I also like to tell you guys that you’re doing an awesome job!💪🏼

G

The workaround is pretty good, but a “paste size” would be better. 

M

THIS!! It’s a huge pain to have to eyeball and resize each item individually. Can there be a numerical size field where we can select multiple items and type in the size manually to apply to all selected? 

N
  1. Go to your Miro board
  2. Open the browser Developer Tools (usually under the View → Developer menu or cmd-opt-I)
  3. Click on the `console` tab.
  4. Select the items you want to resize.
  5. Paste the following code in the console & hit enter:
const selection = await miro.board.getSelection()

const shapes = selection.filter(shape => shape.type = 'shape')

shapes.forEach(shape => {
  shape.height = 81 // Set the height you want here
  shape.width = 240 // Set the width you want here
  shape.sync()
});

Hope this helps!

Some reference info: https://developers.miro.com/docs/update-and-sync-item-properties

M

Thanks. This still seems a bit difficult for something that should be inherent to the tool. Also, is there a way to do this using the desktop app if that is what I were to primarily use rather than the browser version?

N

Michelle, I have no idea -- i literally just started using Miro and immediately ran into this problem. :)

G
Userlevel 2
  1. Go to your Miro board
  2. Open the browser Developer Tools (usually under the View → Developer menu or cmd-opt-I)
  3. Click on the `console` tab.
  4. Select the items you want to resize.
  5. Paste the following code in the console & hit enter:
const selection = await miro.board.getSelection()

const shapes = selection.filter(shape => shape.type = 'shape')

shapes.forEach(shape => {
  shape.height = 81 // Set the height you want here
  shape.width = 240 // Set the width you want here
  shape.sync()
});

Hope this helps!

Some reference info: https://developers.miro.com/docs/update-and-sync-item-properties

That’s what I call a top tip. Kudos to you.

S

Thanks - but I don’t think I have access to the Developer Tools you are mentioning. I’ve looked on both the desktop app and the web app interface and neither has a Developer menu. It’s odd that this would be something that would require “Developer” access when this is the type of functionality that is just inherent to other tools for any user. 

 

J

The Developer Tools is part of your browser, not Miro. How you access it varies by which browser you are using, but for many it is by hitting the F12 key on your keyboard.

JBCAD
Userlevel 1

Wow nhajratw, that was a game changer tip!


I am NOT a coder so please use this at your own risk, but I managed to modify your code to change a bunch of selected pictures to all have the same, specific height, as opposed to the not-as-useful-as-it-could-be “Match Height” command under the “resize image” button in the contextual popup. You could use width instead of height just as easily I assume. “3300” is the height in pixels FYI, you can change that to whatever you want.

Thanks so much for posting!

const selection = await miro.board.getSelection()

const images = selection.filter(image => image.type = 'image')



images.forEach(image => {

  image.height = 3300 // Set the height you want here

  image.sync()

});

 

Reply


Terms & Conditions