Skip to main content

Have you ever needed to create frames around multiple objects and found using the right-click → Create frame over-and-over to be tedious and wished you could frame them all in a single click? Now you can using Framer!

Table of Contents

How Framer works

  1. Select one or more objects
  2. Execute Framer from the app/content creation toolbar and how you’ll have a frame around each selected object.

Use cases

  • Quickly present (and collaborate on) a PowerPoint on a Miro board in interactive presentation mode – add your PPTX document to the board, extract all pages, select all pages, and Frame them.
  • Quickly frame and export a number of objects as a PDF, e.g., annotated PDF pages that you had already extracted.
  • Have another use case? Please, share it with the Community here!

Framer in action

In this example, I

  1. Extract all eleven pages of a .pptx file
  2. Frame them using Framer

 

A note on the order in which Framer creates frames

Framer looks at all of the objects you have selected for framing and considers their order on the board from left-to-right, top-to-bottom.

Tip: Use the Auto Layout tool to prep your objects for Framing:

 

A few last notes

  • This app isn’t currently published in the Miro Marketplace, but I plan on submitting it once I add some more features (and a UI).
  • Framer will not put a frame around a frame (we heard it could an infinite loop in the space time continuum, leading to the destruction of the matrix).

Role the credits

  • @Max Harper at Refractive – A HUGE thanks to Max for going above and beyond to build this using the Web SDK v1.0
  • @Jonathan White & Hilary Jenkins at Hiro Studio for providing a number of app icons ideas (we started simple, but will sprinkle in some color down the road).

Install the new Framer

Feedback is always welcome😀

Great! Long sought after. 🙏🏻


Wow!! This is incredible! Really excited to try this out.


Quick question: if I’m the admin for my Miro Team and I ‘install’ this associating it with my Miro Team, does this give all the members of my Miro Team access to use this tool in their toolbar? Or do I need to direct them to install it themselves?


Just tried this out: what a dream! So easy to use. Thank you so much! 


Also, thank you for highlighting the existence of the ‘auto layout’ tool. This is another game changer. 


Love, love, love this!!! Will make creating presentations and exporting docs so much easier!!!!


Quick question: if I’m the admin for my Miro Team and I ‘install’ this associating it with my Miro Team, does this give all the members of my Miro Team access to use this tool in their toolbar? Or do I need to direct them to install it themselves?

@Harry Williams - The app will be available to all team members, but they should need to do a one-time authorization of the app, e.g.:

 


Quick question; I’ve just tried using this with an annotated pdf. However, it is putting frames around each individual mark made by the pen tool too, which is meaning it’s adding thousands of frames! Am I missing a step?

 

Many thanks,

 

Harry


Quick question; I’ve just tried using this with an annotated pdf. However, it is putting frames around each individual mark made by the pen tool too, which is meaning it’s adding thousands of frames! Am I missing a step?

 

Many thanks,

 

Harry

Hey @Harry Williams! Yes, this is expected as Framer will put a frame around all objects.

To target only, for example, pages of the PDF, filter by Document:

 

And to remove all the unintended frames you created around your pen objects, use the filter, select frames, and delete all of the the frames and then repeat by filtering on documents only and then run Framer.


@Robert Johnson Fantastic! Thank you so much for this. 


@Robert Johnson , @Max Harper : wanted to say another huge thank you for this. I have been using this as a way of getting students to digitally write mock exams this week which I can then mark and export to PDF with ease: it is saving me so much time! I see a future where all the students in our online school sit their mock exams on Miro, rather than faffing around with printers and scanners. 😍


  • The Web SDK 1.0 will reach end of life at the of 2023, so unless the Miro Developer Platform team updates the version 2.0 to return document object width/height Framer will stop working near the very end of the year.”

@Max Harper @Robert Johnson 

I am hoping that Framer might find an extended life beyond 2023. Can’t tell you how useful this has been for annotating PDFs and saving the result!


Re Email with subject: Action Required]: Depreciation of v1 Developer Platform

 

For anyone who received the below email, saw an app titled “Experiments”, and had no idea what any of this meant, you are not alone – let me explain.

  • Framer was – and is still running – on Miro’s SDK (Software Development Kit) version 1.0.
  • Version 2.0 of the SDK was a release a while ago and now version 1.0 has become deprecated/unsupported/will eventually completely stop working one day.
  • Framer was also built as an experiment and was, therefore, named as such in some backend code repository – this is why you may have seen “Experiments” in an email.
  • The good news is that Framer continues to work and is being upgraded to work on the new (V2) of the SDK.
  • When the updated version of Framer is ready for use, I will update this post along with an install link.
  • Once you have the new version installed, you can remove the old version (instructions to  come later).

Cheers!

Rob

 

 


We're excited to share that the new Framer is now live!

What's new

  • Updated to use Miro's Web SDK v2.0.
  • Framed objects are now "added" to the frame created around them, meaning when you move the frame, the object inside moves with the frame (as it should).
  • Showing notification of number of objects that were successfully framed.
  • Added error if no objects selected.
  • Added a “2” to the icon of the new app, to help distinguish between the two (I will likely change the icon back, i.e., remove the 2 before the end of September 2024).

What you should do

  • Uninstall the "Framer" app from any installed teams (go to Team settings → Apps & Integrations to find and uninstall Framer).
  • Install the new Framer here.

A note to Enterprise Plan subscribers

You may need permission from a Company Admin to install Framer is app management is enabled.

Here is some information you can pass along to your Company Admin:

  • App ClientID: 3458764594287450620
  • Built using Miro's Web SDK v2.0.
  • Permissions are: boards:read, boards:write.
  • Hosted in Microsoft Azure Static Web Apps apps service.

A huge shout out to

  • @Max Harper at Refractive for writing the first version of Framer.
  • @Vedran at Hookshot Software for the assist in getting the new Framer working in Web SDK v2.0, and for brainstorming some future enhancements.
  • And to @William Bishop@Mettin@Horea Porutiu@Anthony Roux, and the rest of the Developer Platform team for recent additions to the Web SDK v2.0 which made this version of Framer possible!

Soon, Framer will officially be renamed to MultiFrame!

MultiFrame will now have an app panel that will include several framing options.

Beta testers needed!

MultiFrame is in beta and I need testers!

Demo and walkthrough:

 

If you’re interested in trying it out, you can install MultiFrame (beta):

https://miro.com/app-install/?response_type=code&client_id=3458764595591276088&redirect_uri=%2Fapp-install%2Fconfirm%2F

If you're Enterprise and need to approve it, here’s the App clientID: 3458764595591276088

Feedback

Please either use the Comment/Feedback speech bubble at the bottom-right of the app panel, or leave your feedback directly in this post.

Happy framing!


Hey, all. A few additions to MultiFrame (beta):

  • Aspect ratio – By default, MultiFrame that is the same dimensions as the item being framed. I added an option to force the frame to be one of the following aspect ratios:
    • 16:9
    • 4:3
    • A4
  • Functional change – All items on top of what you are framing will be added to the frame, e.g., you frame an image that has sticky notes on top of the image, then the sticky notes will be added to the frame too. It seemed like a no brainer, but it took some effort to implement.

Here’s a Loom of all of this in action:

 


Two updates to MultiFrame (beta):

  1. Changed order of options
  2. Change Padding and Colour to options from radio buttons to select boxes – both to maximize space in the app panel an accommodate another change:
  3. … more colour options.
New order for options
New colour options

 

Note on the colour choices: They are from Miro’s brandkit colour palette: https://brandkit.miro.com/corporate-visual-identity/colors

 

As always, if you have any feedback, please leave it in this post or through this Google Form:

https://docs.google.com/forms/d/e/1FAIpQLSefbARSZr7A0UIX42a-xIbWijXw3RBgrrtXjGbD2WDOV-bYww/viewform


Reply