iPhone prototyping, custom widgets, custom icons and more

Hello everyone,

This day, again, is one of those days. As agile as a start-up has to be, and release as often as possible, there are times when you just have to spend a little more time on something in order to get it out. This is one of those times. 🙂 It’s been a while since the last release but, I’m pretty sure, you’ll be happy enough about what this release brings you.

Among the plethora of little features and improvements that are constantly being added to FlairBuilder, there are some big additions that people have been asking for quite some time. Today I’m happy to mark another one of those items as being officially added to the application. Drums roll….

iPhone Applications Prototyping

Ta-da! Yay! 🙂 So, I’m happy to announce that since today, FlairBuilder comes with dedicated support for iPhone applications prototyping. And by dedicated I mean that there’s now a special type of project, iPhone prototype project, with a fixed width page and a surrounding iPhone picture. Each iPhone project page has also a top and bottom bar which can be toggled visible/non-visible. I didn’t see any use in having masters for iPhone project pages, so I didn’t include this feature here.

iPhonePrototyping - Release 1.8

There is a number of new, iPhone specific, components that have been added: a Button Bar, ON/OFF toggle button, a pointy navigation button, a very flexible tree-table list, a large button, and a horizontal slider.

Custom Widgets Library

You are now able to quickly select a set of components, group and save them for later reuse. Anything you need and can think of, from login forms to specific groups of components that you find yourself implementing again and again.

Custom Widgets - Release 1.8

Custom Widgets 2 - Release 1.8

Coming up soon will be the possibility to share you custom widgets with the FlairBuilder community by uploading them directly from inside the app. You’ll also be able to access the community library from the application as well.

Custom Icons

Custom Icons - Release 1.8

You now have the option to add your own icons to the icons set that comes with FlairBuilder. Just drop your icons into the folder located at USER_HOME/.flairbuilder/icons, and FlairBuilder will pick them up. It should be straightforward. And by the way, when opening the project in the viewer, it will just work. Your custom icons that you used in the project will also be available in the viewer. Enjoy!

Embedded page links

An highly requested features was for some time the ability to specify links to other pages inside components like DataGrid, List, Tree or Paragraph. Well, now you’re able to do just that with a simple syntax: [Page Name#Link Text].

Handy formatting toolbar

There are a lot of places where you double-click a component to edit its content and FlairBuilder supports a custom syntax to help you insert formatted content easily. However, remembering all those formatting options (include the new page link syntax) is not as easy. Add to this inserting icons, thing which, I must confess, was quite painful until now.

Yeah, until now, because now there’s a formatting toolbar to assist you in editing the content of all those components that support formatting. Plus, you know have a drop-down for inserting icons as well as inserting page links. To insert a link, just select the link text, click on the Link icon, and you’ll get a pop-up with all pages in the project to choose one.

Format Toolbar Links - Release 1.8

To insert an image, just click on the Image icon and you’ll get a pop-up with the default icons library plus your custom library. Click on an icon to insert its associated syntax.

Format Toolbar Icons - Release 1.8

Improved Window component: Now collapsible

The Window component got a face lift. Not only that now is much more customizable, but it also got a little feature that some of may appreciate. You can now specify if the window should toggle visibility of its content. For this I introduced a new syntax element, [+] and [-] to specify expanded state.

TitleWindow - Release 1.8

Specify expanded nodes in the Tree component

Using the same ‘expanded’ [+] and [-] syntax used in the Window component, you can now specify which nodes to be opened by default in the Tree. Just use [-] for an expanded node. The other option is implicit.

Change visibility and enabling of components

FlairBuilder prototypes just got a little more interactive. All components now have two new states: visibility and enabling. I also added two new actions that let you change this states for a certain component or group of components. Unleash your imagination! 🙂

Card stack transition effects

This is a cool little addition that will spice up your prototypes: specify that transition between the cards of a card stack should be done with an effect. For now there’re two effects available: Fade and Slide. I think it’s enough for now. 😉

Rectangle transparency

The Rectangle component got a little more flexible by allowing you to change it’s opacity. This will let you add even more ‘flair’ to your prototypes.

Page on load event

For the first time in the history of FlairBuilder, it’s now possible to attach an event to a container. And which container have I had to start with other than the pages themselves? Attach any action you think it makes sense to be performed when displaying a page. I hope you’ll find this helpful.

Other improvements and bug fixes

  • Improved application menu, including on Mac OS X. It used to be half-native, but not it’s fully integrated with the native capabilities of the Adobe AIR platform.
  • Go to page action lets you specify a generic ‘Go to last page’ option instead of specify a particular page. Handy, I’m sure you’ll find it.
  • Bug fix:Action conditions where not correctly saved when specified as being exclusive (OR switch was reverted to an AND).

This release has been by far one of the biggest in the history of FlairBuilder. I guess that only last summer’s 1.7 release could compare with it. A lot of work went into this release and I’m extremely happy and excited about it. I’ll take a short break from development but I want you to start shooting with new ideas and suggestions TODAY! 🙂 There’s nothing more valuable to a tool developer than the feedback received from users. So, don’t hesitate!

Should you find any problems or issues with anything of the features mentioned above, just let me know at cristian@flairbuilder.com and I’ll get fixed in no time.

Until next time, take care and have fun prototyping!

Unknown, here I come!

  • Jim Matheson

    I am very excited about this release! Just a quick note regarding Custom Icons – the option to view hidden folders must be active to view the .flairbuilder folder.

    • Cristian Pascu

      Good point, Jim! I’m actually considering changing the location of that folder. We’ll see. 🙂

  • Pete Gosling

    Nice work ! Looks like you have given us more flexibility and control without adding complexity.

    I am now using “Go back to previous page” for the back button in my mockup web app.

    Thanks !

    • Cristian Pascu

      Pete, I’m glad you like the new functionality. I think it was you that requested the “Go back” feature, isn’t it? 🙂

  • Israel RN


    The long wait was really worth it! The way you worked out iPhone prototyping is terrific.

    Now, I guess it would be really easy to add support for iPad mockups… It would be the first app ready for iPad mockups AFAIK.

    • Cristian Pascu

      You’re right Israel, iPad prototyping is the next natural step. I need to take some time to accommodate with the new UI.

  • Bernhard Oehler

    How can I view the prototype with an iPhone and add it to the homescreen as a “fake” web based app.. just like the UNITID iphone prototype from http://unitid.nl/2009/04/prototyping-for-the-iphone-using-fireworks-cs3/



    • Bernhard,

      I’ll post an article in a few days with more details and instructions. But the basic idea is that you can use this tool, called LiveView, that lets you project a portion of your Mac screen unto the iPhone. Here’s the link to the tool: http://labs.ideo.com/2009/01/20/liveview-an-iphone-app-for-on-screen-prototyping/

      I tested and it works very well. It even lets you interpret touch gestures on the iPhone as mouse clicks/events on the mouse screens, so you don’t look the interactivity of the iPhone prototype built with FlairBuilder.

      I hope this helps!

  • win7guru

    Finally there is a library option, I am so glad. Thank you for also integrating more with Mockups (Balsamiq that is).

    • Cristian Pascu

      Glad you like the library. More things to come. 🙂

  • Howie


    I can’t seem to locate the icons folder, USER_HOME/.flairbuilder/icons. I am sure the option to view hidden folders is active on my end.
    Is it because I am using the trial account?