New app: Framer – create individual frames around each selected object

Robert Johnson
Userlevel 7
Badge +12

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! (now v2.0)

Table of Contents

How Framer works

  1. Select one or more objects
  2. Execute Framer 2.0 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 Framer 2.0

Feedback is always welcome😀

Robert Johnson 9 days ago

We're excited to share that Framer 2.0 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.
  • Renamed app to "Framer 2.0", to help distinguish between the two (will likely rename it back to just Framer sometime before the end of 2024).
  • App icon updated slightly to show a "2" in it.

What you should do

  • Uninstall the "Framer" app from any installed teams (go to Team settings → Apps & Integrations to find and uninstall Framer).
  • Install Framer 2.0 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 Framer 2.0 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!
View original
Visual Thinker | Volunteer Community Moderator

14 replies

Peter Schwöbel
Userlevel 3
Badge +1

Great! Long sought after. 🙏🏻

It's not which way the wind blows, but how you set the sails.
Harry Williams
Userlevel 2

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

Harry Williams
Userlevel 2

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
Userlevel 2

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

Harry Williams
Userlevel 2

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

Jonathan White
Userlevel 6
Badge +4

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

Robert Johnson
Userlevel 7
Badge +12

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

 

Visual Thinker | Volunteer Community Moderator
Harry Williams
Userlevel 2

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

Robert Johnson
Userlevel 7
Badge +12

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.

Visual Thinker | Volunteer Community Moderator
Harry Williams
Userlevel 2

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

Harry Williams
Userlevel 2

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

Harry Williams
Userlevel 2

“

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

Robert Johnson
Userlevel 7
Badge +12

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

 

 

Visual Thinker | Volunteer Community Moderator
Robert Johnson
Userlevel 7
Badge +12

We're excited to share that Framer 2.0 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.
  • Renamed app to "Framer 2.0", to help distinguish between the two (will likely rename it back to just Framer sometime before the end of 2024).
  • App icon updated slightly to show a "2" in it.

What you should do

  • Uninstall the "Framer" app from any installed teams (go to Team settings → Apps & Integrations to find and uninstall Framer).
  • Install Framer 2.0 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 Framer 2.0 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!
Visual Thinker | Volunteer Community Moderator

Reply


Terms & Conditions