It’s been a while. Actually, it’s been too long. 6 years ago FlairBuilder 1.0 was launched. A long ride and a lot of fun. For the past year or so, I have been working on an entirely new version of FlairBuilder, updated for today’s prototyping needs. That is, mainly, mobile apps and responsive design. But besides that, I wanted to make what was an easy to use and powerful tool, even better. I hope I’ve maded it, but you’ll be the judge.
To download the new version, just head to the download page, there’re links for Mac and Windows in the right side of the page.
To be honest here, this release is not production ready but I wouldn’t call it a beta either. Over the next few days I will polish missing or broken things as I still find them or as they’re reported. I am still working on import from previous versions of FlairBuilder, and I hope to have it ready in a week or two. Tops.
I won’t take long and detailing the whole list of new features in FlairBuilder 4.0, but I would still like to point out some of them.
(Re)built with web technologies
Previous versions of FlairBuilder were built in Flash. That meant that exporting for mobile devices implied a new layer of abstraction and actually reimplementing every single component and interaction for HTML. Not ideal. Not anymore. Now HTML export for mobile devices is as natural as drinking water.
Responsive and mobile app prototyping
It’s now possible to wireframe for three different breakpoints, or just one of them, your choice. You can choose which components are visible in which breakpoint, their position and size. Also, interactions are set independently for each breakpoint, just so configuration is easier. Attach a nice app icon to your prototype, which you can also do, export to HTML and open your prototype on your mobile device for testing.
You can also set a top/bottom area that will be fixed on mobile devices. The height of these areas are set on each page, as each page might need different settings. The content area will scroll, of course.
Cool page and layer transitions
When switching to a different page, you can choose different transitions for that. Opening/closing layers have even more options, like flip, swoop, expand and what not.
Better move, resize, style interactions
Interactions that change the state of a component can be animated, allowing you to set animation duration and easing.
Card stacks can also be animated when browsing their tabs.
Quick wireframe and prototype preview
Previewing your work was easy. Now it has become any harder. Pressing tab will preview the wireframe, with no interactions. But you can open a new window with the full interactive prototype for you to play with it. Previewer will open the current breakpoint.
As you configure a set of interactions for an event, they will actually sort of play so you can preview their effect. The next action will upon the previous action and so on.
If one action navigates to a different page or opens a layer, next actions will be able to target components on that new page. Which is kinda awesome if you ask me, but you don’t have to ask. You’ll see it’s awesome.
Per project layers and reusable symbols
The list of layers are now per project and not per page. It’s only natural and easier to reuse layers for different interactions on different pages.
Symbols are reusable widgets which you can create and, obviously, use in differt corners of your wireframe while being able to update them all with one finger snap.
Editing tabs content
When editing tabs content, FlairBuilder will sort of dive into that tab, so you can focus on its content. It’s like when editing groups, but more cinematic.
Icons, icons, icons
Included now are two sets of icon fonts, FontAwesome and Ionicons. They both contain a whole bunch of nice icons, with some of the overlapping here and there. But Ionicons icons contain a lot of Android and iOS specific icons which will help you, my friend, prototype mobile app in a snap.
Design, design, design
Now FlairBuilder sports a cool CSS grid, baseline vertical rhythm and the good old 10px grid. Which you can toggle out of you want, one by one.
Little yellow knobs for round corners, line height, group 9-slicing, and what not, now actually display the current value. Labels are editable in place, most of the time now, like for buttons, labels, or links.
As I said, features will be detailed (with pics!) in future post, but for now I hope you’ll find the time to give this release a try and tell me what you think.
Talk to you next week. Have a nice weekend, y’all! 🙂