Import from Balsamiq Mockups, Shapes and more

Hi there,

It’s been two weeks already from latest release. Although last week I haven’t made a release, due to my trip to European Software Conference in Berlin, this week we have some very, and I really mean very exciting updates.

Something that has been announced previously in the “Coming soon…” section of the features page, well, that is now available as a beta version of the feature. Which is… 🙂

Import from Balsamiq Mockups

Starting this version you are now able to import a set of mockups created with the excellent Balsamiq Mockups and group them into a new FlairBuilder project. Now there are several exciting things about this, which I’ll try to point out briefly:

Multi page prototypes

Balsamiq Mockups can be grouped into a single folder, for instance, and linked together through links attached to certain elements. FlairBuilder will make this grouping more apparent with its explicit support for projects and page grouping in folder and sub-folders, right into the application interface.

Master pages

A great way to reduce duplication between pages is by using so called masters, pages that are used as background to other pages that have elements in common. FlairBuilder offers you a very flexible support for masters as you are able to define an indefinite level of masters for your prototype pages.


While Mockups interactions are reduced to page-to-page navigation (which is great, given the intentional simplicity of the tool), FlairBuilder goes one step further into prototyping by offering a set of fully interactive components and widgets. All those static components from Balsamiq Mockups will now turn into real, interactive components. Besides that, where it makes sense, FlairBuilder will also import links between pages. The most basic examples are buttons, links, button bars and link bars.

More than mouse clicks, FlairBuilder also supports events as double click, mouse hover/enter or mouse out, focus on/out and even keyboard events. There is a wide range of possible things that you can prototype using these events. Plus, FlairBuilder comes with an extended set of actions such as opening/closing pop-ups, displaying floating panes (or drop-downs, as you may also call them), browse through tabs or view/card stacks etc.  If you’re coming from Balsamiq Mockups world, you should definitely take a look and give it a try.

Conditional Behavior

Once you imported your mockups into FlairBuilder, there are extra things that you can do for a better experience. One the these things is defining conditional behaviors. You can restrict an action to be performed only if a set of conditions are satisfied. Certain components can be named and their properties will be used in building such conditions. I tried to make the process as intuitive as possible so defining conditions should be easy enough.

Beta limitations

Yes, this feature is still in beta stage. There are few limitations, some inherent to the difference between Mockups and FlairBuilder, others that will be removed soon.

While most of Mockups widgets have been matched against the set of widgets offered by FlairBuilder, there were also some that didn’t make sense to be imported. I skipped components as Red X, accolade or Scratch-Out, as well as iPhone components, for instance.

Images will be imported as image component but not yet the source of that image. All you have to do is double click the image place-holder and browse for the image, which usually resides in the same folder as the imported files.

I still have to match the set of icons supported by Balsamiq Mockups against that from FlairBuilder. Also Balsamiq Mockups supports multiple sizes of images and that’s something that I got to add to FlairBuilder, too. These are things that I intend to finish in the upcoming weekly releases, so hang on! 🙂

I am so excited about this new integration feature. It’s something that I had on the pipe-line for quite sometime and I finally found the time to get it out to you guys. So feedback is most wanted, needed and welcome. 🙂

I absolutely need to thank Peldi of Balsamiq for his openness and for sharing the BMML file format with everyone. This integration would not have been possible without his awesome way of doing business. Being open is the way to go!

I also need to thank Enrico, the creator of Napkee, the other tool that lets you turn Balsamiq Mockups into interactive Flex or HTML prototypes. He helped me along the way in developing this feature. He actually shared a code snippet with me. Isn’t it just awesome? 🙂

New Components: Triangle and Ellipse Shapes

Following a ping from Caroline, I added two more shapes to the set of widgets in FlairBuilder: Triangle and Ellipse. These two shapes, together with the existing rectangle shape, should give you more options in mocking up components that are not supported by FlairBuilder. I also made these shapes interactive, so you can attach events to them (mouse click and double-click, hover and mouse out). Enjoy!

Tootips for (almost) every one!

Thanks to Andrey‘s request, I changed a bit the properties panel and now I let you add tooltip to more components. Actually most of the components now support tooltips. If there’s still something you’d like to ‘tooltip’, just let me know.

Back and Home Buttons in the Viewer

One of the most awesome things that happen in a microISV is when a client comes to you and says: “Man, your tool is great but here’s a pain I have…”. Even better is when you are able to easily solve that painful problem (especially if it’s a pain created by your tool :p ). Anyways, here’s a recent request from Karl Gilis:

“Add Home and Back button to free viewer. This would make Flairbuilder not only the ideal tool for creating mock-ups / wireframes, but also make it very usable to do real user testing.”

And a reply from Will Sansbury reads as:

“I completely agree with this. In complex workflows, demoing wireframes to my team, the simple request to “back up a screen” means 30 seconds of dead time while I start the workflow over from scratch.”

And if it ends in something like “I’m embarrassed in front of my team.“, than you shouldn’t need more to start seriously think about it. 🙂
Forturnately, this only took me about an hour to implement, so here you have it: Home and Back button in the online and desktop viewers.

Back and Home Buttons

Bug fixes…

We have a couple of those, too.
First, the floating pane was transparent in the sketch theme. Thanks Gerhard W. for helping me on this one.

Secondly, it seems that master pages were broken when used for pop-ups. That’s embarrassing, but thanks to Lauran (from email conversation), this is all fixed now.

Until next time, I hope you’ll enjoy the exciting additions in this release. As usual, I’m all open for conversation so do let me know how can I make FlairBuilder work better and best for you.

Unkown, here I come!