FlairBuilder: a cross–platform prototyping tool

FlairBuilder is a cross–platform prototyping tool from Cristian Pascu. It is made for interface designers to simplify their work on designing pages and interaction between pages or page elements.

FlairBuilder is an AIR application. This means that you need to install Adobe AIR runtime. There are chances that you already have AIR runtime. You may be using Adobe Digital Reader or TweetDeck or Toggl Desktop or Ext Designer. All of them are AIR applications.

When you launch FlairBuilder, it prompts you what do to.

I like when applications do this. You need some point where you can start. In many cases when you start the application for the first time, you have to go through menu and find how you can start a new project or file. Not in this case. FlairBuilder presents you with a set of options that include starting a project, opening existing one or importing from other software. You can also view a sample project or watch an introductory video. Nice.

I decided to go with the introductory project because it is the easiest way to become familiar with FlairBuilder quickly. Here is what I got after opening the project:

So we have a central part where we obviously can draw. It takes most of the screen at left–center. I immediately named it as a “main design area” to myself. Some modeling applications occupy left part with sidebars or tools, which I do not like. I am really used to have left–center part of the application for the actual work. Your mileage may vary but I like it from the first glance.

On the right we have some more. We obviously have element that we can put on the page (“Components”) and we have a library. Most likely it is where I can store custom components. Quick click on the “Library” confirms that.

Below we got “Properties” and “Events”. Ok, that'c clear. Properties now show properties for the page and events will be something related to what happens on the page or element. A click on the “Get started” confirms my expectations: properties tab change to show button properties and events tab offers to add “On Mouse click” event. Good!

At the bottom right we got “Pages” tab with some items in it. Some of the are speaking to me (like “Media components” or “Interactions”), others were unclear for a second (such as “Containers” or “Home”) but then I realized that those are pages in this project. Clicking on each of them shows that I am right. The image below shows what I got when I clicked on “Containers”. Obvious.

As you see in the video, there are lots of components and you can have interactions. Impressive! If went to a café to write this review, so I did not have Internet connection. If I had, than Google Maps and video players would show up as well.

So, you got the idea what FlairBuilder can do. But there is one more thing that I did not tell you yet.

When you design multiple pages that share the same common theme (design or sidebar elements), you typically will have to copy those common elements. Next, if you decide to change any of them, you will need to go through all your pages and change it everywhere. Not with FlairBuilder! FlairBuilder allows you to have master pages where you put reusable components only once. Then you specify that page as a “master page” to the current page: