It makes your mockups alive, so you can test and present your screen chaining.

Here is a video presenting the App running from iPhone :

It also runs on iPad with a second screen connected (the iPhone 4 can also have a second screen) :

Prerequisites on your computer :

  • Balsamiq Mockups
  • Our LiveMockupsMaker App (built using Java)

On your mobile device (iPhone, iPod or iPad ) :

  • Just the LiveMockups application
  • Falcultative : a dock-vga adapter for showing your mockup on a video projector (for example).

How the magic is done / how to create your own livemockup.

  1. Just create your mockups using balsamiq and set some links between them.
  2. Then export your mockups to PNG images (same file name), balsamiq let’s you do this simply via File -> Export to PNG Image.
  3. LiveMockupsMaker needs to know the area of the device screen (so you can keep the sketched iPhone, and it will not be shown in the livemockup). To do so just add a custom id “iScreenPortrait” or “iScreenLandscape” to the control corresponding to the area of the portrait or landscape screen (this ids are set on a component inside the group that forms the iPad in the exemples). We choosed to have both orientations mockup in the same mockup file (as these screen should present same elements, it should not be a big limit).
  4. setting a custom id for livemockups in balsamiq mockups

    Setting a custom id for LiveMockups

    A custom control ID is an custom property you can by right clicking an element of your choice.

  5. Open LiveMockupsMaker and set your options, then click the generate button. A lmml file may have been generated.
  6. LiveMokcupsMaker Java application

    LiveMockupsMaker let you generate LiveMockups files from your mockups

  7. To use this file in the app, just send it by email (mail will propose you to open it with LiveMockups) :
    Opening a LiveMockups file from Mail on iPhone

    Opening a LiveMockups file from Mail on iPhone

    Or use iTunes file sharing to transfer it to your device :

    Adding LiveMockups files from iTunes file sharing

    Adding LiveMockups files from iTunes file sharing

Have fun !

LiveMockups is on the appstore

Go to the App Store

13 Responses to How to use LiveMockups ?

  1. Joseph Hewitt says:

    You really need to break out instruction step 2 a little bit better. As it is if you are not familiar with Balsamiq, statements like ” just add a custom id “iScreenPortrait” or “iScreenLandscape”” are a little vague. Took me awhile to find out where that setting was.

    Also, once I finally got it working, I went back to Balsamiq and corrected some errors and added a bunch of new stuff. I swiped and deleted my previous file on the device and then emailed my self again using the same file name. I noticed that even though I had deleted the file on device, it still added a “-1″ to the end of the file name. I hope it isn’t leaving files on the device. And if so, that they are sand-boxed so that if I delete the app they will get cleaned-up.

    • admin says:

      Just updated the page to be more precise : right click -> custom properties on the element of your choice to set a custom ID on it.

  2. peter says:

    As the convertion application crashes I would need support on this but I do not see any mail adress or support area on this site.

    so, where do I get support?

    • admin says:

      We were having an issue with the support email address. It’s now corrected. Sorry for the inconvenience.

  3. Chris Lees says:

    I’ve just downloaded (and paid for!) this app which sounds great. However, the very first Balsamiq model I try to convert fails! Please help. The error occurs when clicking the “Generate LiveMockup File” and are quite verbose, but the key message seems to be:

    Error message: Cannot construct com.balsamiq.ControlProperties : Class com.thoughtworks.xstream.converters.reflection.PureJavaReflectionProvider can not access member of class com.balsamiq.ControlProperties with modifiers “public”

    Can you help (or provide a refund?) – thanks!

    Chris

    • Chris Lees says:

      Thanks Openium – very prompt response to my issue and a patch issued on the next business day that fixed the app. Just helping me with one other issue, but so far very impressed with the support – thanks guys!

  4. Richard says:

    Hello,

    Can someone please talk me through step by step so that a 6 year old can understand how to export my balsamiq mockup to my iphone app?

    Thank you

    Richard

    • admin says:

      Have you read the steps in the “How the magic is done / how to create your own livemockup.” part of this page ?
      At which step are you lost ?

  5. Cpt says:

    Made a small mockup with balsamiq web app, and when I try to generate the lmml I get:
    error t1.png not found…

    No idea what else to do… XD

  6. Alex says:

    Hi,

    Managed to get it all working but when I run it through on my iPhone its displaying the mock up and including the iPhone sketch on the screen. I just want whats in the screen to be shown and not the actual iPhone sketch.

    Thanks

    • admin says:

      That is explained is point 3 of this page : “To do so just add a custom id “iScreenPortrait” or “iScreenLandscape” to the control corresponding to the area of the portrait or landscape screen”.
      You can also download our sample to see how this ids are setted.

  7. Anna says:

    Hi,

    I just downloaded the LiveMockups and the app. And I’ve been looking long and hard at the How to use Live mockups section, but can’t seem to get step 4 right.
    I’ve managed to export my balsamiq mockups to PNG and I’ve set the custom ID, but when I click the Generate button in the LiveMockupsMaker nothing happens at all. I don’t even get a error message. I’ve searched my computer for a .lmml file, but nothing is there.

    Please help