Skip to main content
Answered

Resize multiple shapes to the same size (not stickies)


Jakob
Forum|alt.badge.img

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. 

 

 

Best answer by Kiron Bondale

@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

View original
Was it helpful?
77% found this helpful

18 replies

Kiron Bondale
Forum|alt.badge.img+7
  • Volunteer Community Moderator
  • 3040 replies
  • Answer
  • June 15, 2020

@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


Jakob
Forum|alt.badge.img
  • Author
  • Beginner
  • 8 replies
  • June 15, 2020

@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. 


  • Contributor
  • 10 replies
  • July 3, 2020

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


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
Forum|alt.badge.img+13
  • Volunteer Community Moderator
  • 7121 replies
  • February 24, 2021

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.


  • New Here
  • 1 reply
  • April 25, 2021

@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!


  • New Here
  • 1 reply
  • July 26, 2021
MIROculous wrote:

@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!!


  • Active Contributor
  • 21 replies
  • December 2, 2021
MIROculous wrote:

@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)


  • Beginner
  • 2 replies
  • February 26, 2022

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!💪🏼


  • Beginner
  • 2 replies
  • September 12, 2022

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


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? 


  • Beginner
  • 2 replies
  • January 18, 2023
  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


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?


  • Beginner
  • 2 replies
  • January 18, 2023

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


Forum|alt.badge.img
  • Active Contributor
  • 38 replies
  • March 10, 2023
nhajratw wrote:
  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.


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. 

 


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
  • 5 replies
  • May 15, 2024

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