Working with Omnigraffle and InVision

Yes, I’m a little old school when it comes to wireframing and prototyping: I use Omnigraffle. During the years I’ve accumulated a lot of Omnigraffle stencils and templates, and I know a nifty shortcut or two that speeds up my work flow. Lately, I’ve been using InVision for web, mobile, and wearable prototypes. However, exporting my graffle screens to png:s has turned out to be a little tedious since the option of exporting “Entire document” usually gives a lot of whitespace on each screen, which looks bad in the InVision experience. And manually exporting 30+ screens several times a day is just a waste of time. So, I wrote a little AppleScript (see, I told you I was old school) that automatically exports individual Omnigraffle canvases in the right size to png:s.

You can probably get more fancy and use this in Automator sequences, or if you have the AppleScript icon in your menu bar, you can start your scripts from there. I often run the script right from the Script Editor app. Oh, well, here’s the script. Enjoy:

 — Choose the output folder. Script ends if cancelledset strOutputDirectory to choose folder — Export each canvastell application “OmniGraffle Professional 5” — Initialiseset objOmniGraffleFile to front documentset canvas of front window to canvas 1 of objOmniGraffleFileset intCanvasCount to count of canvases of objOmniGraffleFile — Iterate through each canvas and export it to the specified folder — File name will be the file name of the name of the canvas — Files saved in PNG formatrepeat with intCurrentCanvasID from 1 to intCanvasCountset canvas of front window to canvas intCurrentCanvasID of objOmniGraffleFileset currentCanvas to canvas of front windowset strOutputFilePath to strOutputDirectory & name of currentCanvas & “.png” as stringsave objOmniGraffleFile as “png” in (strOutputFilePath)end repeatend tell

Director of Service Design and Human-Centered AI at inUse. PhD and Associate Professor at Halmstad University. Father of two. I ride my bike to work.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store