👋🏽 We wrote a book! Order Wireframing for Everyone today →

Balsamiq

Toggle navigation

[Pre-Release] Better Image Handling, Assets Folders...

Hi all. I hope this finds you well.

We have decided to not do an official release this week because we made some pretty big changes we need your feedback on before releasing them.

The changes have to do with how we handle images in Mockups for Desktop, but they are steps in the direction of bringing the concepts of "Projects" and "re-using of UI Controls / Custom Controls" which so many of you have asked for.

Let's go through what's new this week in detail first:

The Account Assets Folder

We moved the "global" assets folder from its obscure location we announced last week to the more discoverable (and more standard) <user home>/Documents/Balsamiq Mockups/assets folder. We are calling this folder the "Account Assets Folder", since there's one for each user account on the computer.
accountassetspath
Any image you place in this folder (manually) will be visible in your Image pulldown in the property inspector:
accountassetloaded
This folder is great for images which you re-use all the time, like your company logo or social media avatar for instance.

BMML file format change warning: when an account asset is used, its path will be saved in the BMML as $ACCOUNT/filename, a new shortcut we added.

The Project Assets Folder

A best practice which emerged from how most people use Mockups is to keep all related files in a "project directory" on your hard disk. We also work that way, and usually also keep all images, PDFs, PSDs and other assets related to the project in an "assets" subfolder next to our BMML files.

With this release we have added a couple of little features which support this best practice, introducing the concept of a "Project Assets Folder".

This is simply a folder called "assets" that sits next to the BMML file you're editing.

If you place an image in that folder (manually), it will show up in the Image pulldown in the property inspector for you to use. Similar to how the Account Assets Folder described above works.

Copying files manually is a bit cumbersome though, so we have enhanced the Import Image dialog with a new "Copy to Project Assets Folder" checkbox:
copytoassetsfoldercheckbox
If you uncheck the checkbox, the image will be linked in (with relative path) and left alone, just like today.

If instead you check the checkbox, a copy of the image will be saved in the current Project Assets folder, and linked in as "./assets/filename". All nice and clean, for easy zipping, moving and sharing of whole projects.
imageinprojectassetsfolder
The dialog's button changes from Load to Import depending on what you're doing, and you'll also be able to (optionally) rename the image file if you want - useful for those crazy Flickr image names!

The state of the checkbox is remembered across sessions, so if you like to always import, you won't have to do check it each time.

But wait, there is more!

Introducing a standard place to keep assets lets us add some fancy new features that take advantage of it.

The first one is...

Paste Image into Mockups!

Say you have an image in your clipboard (maybe a screenshot?), or want to use an image from the web. You can now simply right-click on it and copy it to the clipboard:
saveimage
Then go to Mockups and hit CTRL+V or Paste using the menu or the toolbar icon:
pasteimage
Mockups will notice that your clipboard contains an image, and will ask you to give it a name:
pasteimagedialog
Hit "Paste" and voila', 3 things happen:

  1. the image is saved in your Project Assets Folder with the name you gave it
    pastedimageinprojectfolder
  2. an image control is added to your mockup
  3. the new image file is chosen to fill the new image control
    pastedimage

Bingo!

Try it out, it's really powerful, especially for screenshots (on OS X, use CTRL+COMMAND+SHIFT+4 to select a region of your screen and place it in the clipboard). It's awesome. 🙂

But wait, there's one last little feature to talk about!

Pasting text into Mockups

Since we reworked how we treat the clipboard because of the feature above, we thought we'd make it easier to also paste text into Mockups.

It works just as you'd expect: select some text:
copytext
Switch to Mockups, hit Paste and voila', a new Paragraph of text control is created for you, with the text in it:
pastedtext
Nice huh?

So what's next?

A few things: we're going to add a "Consolidate Assets" command in the File menu, which will look at all the images in the current mockup, copy them into your Project Assets folder if needed and update the references in your BMML file. Think of this as the "Consolidate Library" feature of iTunes.

Another thing we're contemplating is to add a tab to the UI Library for the Project Assets and Account Assets folders, so that you'll be able to drag and drop images from there directly.

As to where we're headed...

...go back and re-read this whole post swapping out every mention of the word "Image" with the words "External Custom BMML Control". That's right. We're excited too. 🙂

Also, the concepts of Projects, Account Assets and Project Assets folders are already present in the web app's beta. Can anyone say "Sync this project to the web"? 😉

How can you help?

This was a deep change in how we handle images. We'd love it if you could try to break it, ehm, take it for a spin this week so that we can publish it into the main 1.6 branch next Tuesday.

The build is already live here. Let us know what you think!

Onward!

The Balsamiq Team

P.S. On to other news, Mockups took 2nd place at the O'Reilly "Best Rich Internet Application of 2009" contest. Thanks to all of you who voted for us! 🙂

Peldi for the Balsamiq Team

Leave a Comment

Comments (7)

  1. Quick question – might have missed it, but is there a global assets folder location for Windows Desktop/AIR versions of the application? I’m not finding it.

    [Yes, it should be in your Documents and Settings folder]

  2. Hi! This new feature really got me thinking about an issue that got on my nerves for some time now: Pasting Images into the browser.
    Therefore I hope you might write a little bit more about how you managed to add this functionality to balsamiq desktop. Or maybe you can point me to some other ressource?

    I asked Aza Raskin why Browser like Firefox doent support Image-Pasting (http://twitter.com/tordans/status/4732596034). Until know he just answered asking for more concrete ideas (http://twitter.com/azaaza/status/4745432507).
    Appard from Jira (using Java) I dont know any Webapp that supports Pasting Images… I wrote about it here http://twitter.com/azaaza/status/4745432507 in german.

  3. Have to agree with Jon Keener – this is great new functionality, but I’d like to be able to set a custom global assets folder too.

    In my case, the C: drive on my laptop is only 40G and is almost full (I’ve got less than 5G available right now) so I us a portable hard drive with much more space that I store all new data and even install all new applications on. So as the user’s folder is on the C: drive this means I can’t really take advantage of the global assets folder feature since I don’t have the space to store images on my C: drive.

    :-j(enni)

    Jenni Merrifield
  4. What can I say…
    It’s AWESOME. Pasting of images is a long awaited feature and I’m glad it’s finally there.

  5. I’m really loving this new functionality!!

    The one thing I’d like to see though is the ability to specify a custom “global assets” location via a config file that resides in the same path as the application.

    The reason for this is that most of the time I am running the desktop version of mockups from a USB stick and this has been working perfectly so far (granted, I know it’s not supported this way)

    Based on a conversation on this a while back,

    http://getsatisfaction.com/balsamiq/topics/is_balsamiq_a_protable_app_i_e_does_it_rn_well_from_a_usd_drive

    I’ve been successfully running this way for a while. Having an optional “config.xml” file in the applications path that provided override paths for items stored based on system variables would easily make this portable. (The two items now, “Global Assets” and the registration information for mockups, which I’m less concerned about since it’s a one time thing per machine)

    Granted, the web version of mockups might private a better solution longer term, but since my assumption is that there will be additional costs for the cloud version I’ll have to wait and see.

    I am loving the direction the tool is going! I can’t wait to see the “External Custom BMML Control” functionality implemented!!

    I just wanted to raise this item up just so that it might be considered early on, whether implemented or not, since I would expect that some of the future functionality would be stored the same way.

    Jon Keener
  6. That really looks great!!!

    Thanks 4 your great work guys

  7. These changes look great! I’ll certainly kick the tires this week.