FlairBuilder 4 has been here for a while!

Hello everyone!

It’s been a while, but here I am again. For the past few months I have continually update FlairBuilder 4 to bring it to the same set of awesome features that FlairBuilder 3 had, and also go beyond that. Today is one of the days that make me say that FlairBuilder 4 got pretty far. So, let’s get right into what’s new.

New Features

Draw a flow of the interactions in the project

Now pressing Ctrl/Cmd+F will display a nice sitemap of your project computed from all page transitions. The pages that are not linked from anywhere will not be visible. The sitemap will also be included in the PNG export.

Create a quick add action shortcut

It’s now easier to create a link to a different page thanks to a quick link short cut in the interactions panel. After the link is created, FlairBuilder will enter in action editing mode so you can choose a transition animation if you want.

Duplicate actions

You can now duplicate actions which can be useful when you want to create a sequence of animations/transitions on the same components.

Lock components

It’s now possible to lock components into place. Just select as many components as you want to lock, and click on the little lock icon in the properties panel.

Preview layer/page transitions in the dropdown

When selecting an animation for page/layer transition, you’ll get a nice little preview of how that animation looks like. Right there, in the dropdown.

Set breakpoint only for current page and opened layers

This will be visible to you only because things will go much smoother. Previously, when switching from a breakpoint to another, the whole project, with its pages, layers, symbols, would internally switch to the new breakpoint. That was too much. Now only the currently visible elements will switch, and the rest will do that only when needed.

Shift+lasso selection should add to existing selection

Hold shift to add to a selection. Hold Ctrl/Cmd to substract from a selection. That simple.

Add navigation dots to the card stack view

Card stack component now has an option to display iOS like dots at the bottom. They are automatically in the same number as the views in your stack, and clicking/tapping them will switch to the corresponding view.

The window component is back

It’s simple and rough, but should be enough for quick wireframing and UIs that have window like components, specially for popups and notifications using layers. In the future I will consider adding more features, like embedding content into the window component, scrollbars and so on.

Bug fixes

A whole slew of bug fixes also made it into this release. Listed here.

* Close layer when editing a show layer action if layer is opened.
* After save, file menu is not correctly enabled
* Can’t select a locked component that is off the main screen
* Comments on layers are not viewable in the shared web viewer.
* Copy/paste is not possible in the comments box.
* Copy/Paste is not working in Page name editor
* Copy/pasting interactions does not show them in the target component instantly
* Don’t undo/redo if already undoing/redoing something
* Duplicating a page does not copy top/bottom bar settings
* Duplicating a page that has two components linked by a move action, will issue an error.
* Hovering a color in the color picker at the last moment sets that color temporarily
* LinkBar and breadcrumbs separators are underlined and color is off
* Locked components can not be selected as targets for actions
* Redo stops if there’s a page duplication involved
* Text is cut off at the bottom at large font sizes
* Text styling for accordion labels – bold, italic, underline
* The pages/layers dropdown is not scrollable and inaccessible when larger than the height of the screen.
* Though there is another smaller issue, look at the drop down triangels, ( In the shared html version )
* Undo card/tab move left/right
* Undo/Redo of symbol creation is broken
* Undo/redo of tab add/remove is broken
* When an exception occurs, only save the project if not empty and to a different file
* When exiting an action, move to the correct tab index
* When exiting an action, the selection position is not updated

Thanks so much to everyone that helped with feedback and bug reporting. After 7 years of public releases of FlairBuilder, I am still very happy every time a new email gets into my inbox from a customer. So keep them coming!


  • Meyling Lara

    Hi Cristian,

    I’m trying to hide a component (Label) I clicked on visibility icon in the tool bar for turning off but is not working. I’m using the version 4.2.7, please advise me.

    Thanks! Version: 4.2.7