FlairBuilder 4.0 is (almost) here!

Hello everyone!

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.

Interactions preview

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! πŸ™‚

  • Jonathan

    This sounds awesome. But I just bought FlareBuilder! Will this be a free upgrade for very new users like me?

    • Cristian Pascu

      As promised, upgrades will be free. At least for all 4.x releaase. When we’ll get to 5.shiny, we’ll talk. But for now, updates are free!

  • Jon E

    I just wanted to say thanks for making FB better than ever and I sent you my feedback via Twitter.

  • Walid

    Nice to see a move to another backend technology … What about Linux version ?
    I’m stuck with 2.9 due to Adobe not supporting AIR on Linux for a while, still loving it but as a regular FB user, I’d love to take benefit from the latest releases especially if AIR is not required anymore …

    • Cristian Pascu

      Linux should be possible too, but I simply had to restrict myself to only two platforms due to time issues. For now.

  • Ravindra Papineni

    Great news! Good to know that FB is still alive and kicking. I have been using it for last 4+ years. You have a great passion about this product, making it for current tech. Keep up the good work!!

    • Cristian Pascu

      Thanks Ravindra! I sometimes smile to myself thinking that after 6 years I am still so passionate about it. No plans to stop. πŸ™‚

  • Jonathan Ruzek

    Great product and been loving it so far. BUT I just bought it very recently and now v4 has been announced. Will there be an free upgrade for users like me? Or at least an upgrade path??

  • AndrΓ© Kuntze

    Really great news! My work depends a lot on your work so go for it πŸ˜‰

    • Cristian Pascu

      Thanks Andre!

  • Peter

    When do you expect the final production ready version of 4.0 to be out?

    Will I be able to load my existing *.fbp’s?

    Thanks and love your app.
    Peter

    • Hi Peter,

      I’m back, sorry for the delay! Hard at work on version 4. Importing older files is still work in progress, many things have changed. Depends on the complexity of your wireframes. Please back them up first and try to open them in the new version. If everything looks cool, then there you go. Otherwise, you can run both versions side by side.

      Cristian

  • Nathalie

    Hello Cristian,
    It’s great news ! My actual version is number 3.9.72, and it says “Eligible for free updates until forever.”
    What is the process to download the number 4, cause on the dowload page I don’t ? I also wonder if all my project will keep the same, cause I’am working on them for few months and do not want to loos them. Thanks a lot for your great job and your answers πŸ˜‰ Nathalie

    • Hi Nathalie,

      Version 4 is finally out. Importing older projects is still wip, so I don’t recommend working on them in the new version. You could try it, after you back up your files first, and see how it goes.

  • Nice to see some real development on the desktop version too! Is it supposed to be fully file compatible with past version? At least I got a spectacular error messages when testing it with a very large file that works in version 3.9.72.

    • Hi Mikael,

      Yes, there are still problems importing older files, specially large ones. Working on it!

  • Alex

    Hi, I am in trial period, testing both 3.9 and the new 4 version. Of course I’m still learning, so please keep in mind that all I write here are impressions and opinions of a new user not a master one. In new version I cannot find the components, there is just some of them, for example group box is not there anymore, there is a shortcut or trick to find the components for desktop? The shortcut “/” for search components in my opinion is worst in new version in terms of productivity. In 3.9 I can search and press ENTER to add component, in version 4 it’s not possible. Every time I use the shortcut, the last search I made comes in search box and It’s not good in my opinion because I need to clean the search box first to make a new search. At end, I feel 4.0 lower than 3.9 in every task, especially to preview the project. Maybe it’s caused for Rebuilt with web technology, once app size was from 5.1MB in 3.9 to more than 100MB in version 4. Thank you.

    • Hi Alex,

      Version 4 is a whole new thing in many aspects, and it’s catching up with the previous version. Meanwhile, since writing this post, a lot of improvements have gone into the new version. Including the quick insert thingy. πŸ™‚

  • Simon S.

    Am I stupid or do have Attributes gone in Flairbuilder 4 ? I’m trying my heck to figure out where to display/edit coordinates and size especially with the Mobile and Tablet view. I can’t even figure out how to create an Rectangle that has 100% width rather then a fixed pixelbased width.

    • Hi Simon,

      They’re supposed to be displayed in the left-bottom corner, but there’s a bug right now and coordinates simply dissapear from view. I’m working on making them more visible and editable. Stay tuned!

  • Ryba

    This software is great. Is there a place where I can add some suggestions or report small glitches?