Update: New version, 2.0 Beta 2, is available. Read the announcement here and then head to that release post, too. This badge bellow will install the newest version anyway. Enjoy!
Hello everyone!
Here it is, that day, the big one, the one I’ve been looking forward to for the past few months. I worked a lot and it’s been too long, but I’m surely proud of this release. Not because of all the new cool stuff that got into, but rather for the state I finally managed to achieve quality and consistency wise. But more about this in the official release, in a few weeks.
Warning: Please back up your projects before opening them in this new version. Thanks!
Now, let’s see what’s new and awesome:
New User Interface Layout
FlairBuilder got itself a makeup and it’s now prettier and, more important, easier to grasp and use, especially for first time users.
Most of the controls in the Properties panel have moved to a top toolbar with more compact, visual and intuitive controls. Take a look!
NEW: Now you can select a specific font face for a control that supports it (most o’them do). This is huge! Lots of new possibilities here.
A new color picker. Larger palette, easier to use and, specially, easier to input your own color code. The old one was a drag.
Some of the options have gone or transformed. I talk about, for instance, the Grid options like row colors, scrollbars. Scrollbars are a must so I’ll added them back, for sure. As for the row colors, I’m not sure yet how should I put them back in the new context. I need your HELP here! 
Better Interactions Everything
Quick, as in super fast, link to other pages set up for all controls that support mouse click. This is, again, HUGE, and will make your prototyping many times faster. It’s now as easy 2-3 close clicks to set a link or to change it. Take a look and try it yourself.
The events panel has moved into a floating popup, which can be opened from the toolbar. It will not be opened by default. Not sure if this is a good thing, but I wanted to clear up the interface a bit. Too many options upfront might make learning harder, isn’t it?
The new interactions popup also contain some of the controls related to interactions, such as the name of currently selected component, its position, whether it’s visible or enabled.
Then the usual interactions tree, for each event and case.
NEW: A new interaction in this release is ‘Move/Resize’ a component. It’s a duo, meaning that you can set up both moving and resizing of a component in one shoot. And, the sweet part, you can make an animation if you want. Just tell it for how long, in seconds, and FlairBuilder will animate both the resizing and repositioning. This is AWESOME, if you ask me!
NEW: A long requested feature has been a form of autocomplete for behavior cases. When you have a complex component like a Button Bar, Link Bar, Tree, List, Tabs etc., you can make a case out of each item in that component, and specify actions for each. Now you don’t have to remember which is what, because FlairBuilder will give you a list of option. I guess that it’s not a gear shifting feature, but for sure it pumps the gas a little bit!
Simpler Component Palette
The icons for components in the palette are now big. Really big. And I hope they are more intuitive, too. I crafted them myself, so they could hurt the eyes of you designers, so feel free to critique.
There are fewer icons, too. Don’t worry, all components are still there. It’s just that several components have been merged or transformed. Take, for instance, the carts. Now there’s a single chart component that supports all 4 variants: Bars, Columns, Lines and Pie. The same with Horizontal and Vertical Slider, merged into one component. You can choose the variant from the new Style button, as I call it. Always look for it near the Events pop-up button, to the far right side of the toolbar.
The geometric shapes, rectangle, ellipse, vertical and horizontal rule, pointy rectangle, triangle, have been removed from the palette, and now they stay at the top. Handy, isn’t it? Triangle will be gone, but now you have the Polygon Line shape. Which is like totally AWESOME. The caps and bold are like totally mine. 
In other news, the Tabs and the Accordion have been completely re-written. They are 100% customizable right now: border, background color, font face, color, style, text alignment, everything. Plus the custom icons which are, of course, now supported. I so happy about this! They were so inconsistent with other components, and I felt so miserable about it for so long. Too long, but it’s finally gone. The misery. Take a look!
Oh, oh, oh! And check this out! The Accordion header height and Tabs height/width are now customizable thanks to these yellow handles. You’ll notice them in other controls, too, like for rounded corners and paragraph line height. It’s so much easier and straightforward to work with them. Check. Them. Out!
And I’m not done yet! Not at all.
Design Stage Improvements
So, starting from the top left corner, all page settings like size, master, grid, have moved into this collapsible panel near the Page title. Check it and let me know what you think! I beg you.
Rulers and Guides
Requested for a long time, it’s finally here. It’s not done yet, cause I need you feedback! There’s a known bug, where the top horizontal rule doesn’t refresh when you come back from Preview mode. You have to nudge the scrollbar a little.
The horizontal and vertical guides are incomplete. They will not be remembered upon restart. That’s because I have a design problem and I NEED YOUR HELP on this one, too. Basically I don’t know if I should make the guides per page or per project. Hm? What’s your take?
Better resize/reposition handles
Inspired by Google Docs Drawing app (like in case of other features new in this release), I’ve changed the handles. Now they are round and there’s now a yellowish border which lets you clearly see which are the margins of the control. Plus, whenever you resize or move around a component, the handle will hide so you’ll clearly see the surroundings and be more precise on your action.
Component Groups
I want to make component groups as editable as possible, so you won’t have to keep on grouping/ungrouping them for small changes. So now groups are resizable. Plus, there’s also a first attempt of letting you edit the content of the group. Just double click one and see what happens.
Tons and tons of bug fixes
I don’t even remember the full list. The bottom line is: if you every reported me a bug, it’s most probably fixed. You can check and if I forgot about it, it’ll sure get fix before the final 2.0 release.
However, there’re still some major issues like Export all snapshots… Which I’ll try to address, somehow, as soon as possible.
As for future plans, I’ll keep them for another post. I’m tired now and the weekend is coming!
Thanks everyone for your patience, will talk to you really soon.
Have a nice weekend!
Related Posts
No related posts.
Related Posts
No related posts.
Get the latest updates from this blog by subscribing to the RSS feed using your favorite reader.
This article was brought to you by the creator of FlairBuilder, a prototyping/wireframing tool for websites and iPhone applications.
{ 19 comments… read them below or add one }
Cristian,
FlairBuilder 1.0 itself is an awesome tool, in it’s class, even with it’s limitations. It was the basis for a MAJOR project for TX! Now we got this bonus from you. THANK YOU SO MUCH! I will definitely upgrade and post bugs and such. Hope this new version has some form input validations in built (even rudimentary/fake ones).
Have a relaxed weekend.
Thank you, too, for helping me make a better product.
I’m afraid no out-of-the-box validations yet. You can do them yourself, but still I know built in ones would be nicer…
Hey Cristian, maybe off topic but your ‘follow me’ link in WP Greet Box is not linked to your twitter page
Thanks Jamal, I’ll take a look and fix it.
Nice update,
A few issues:
– in the components tab, the small rectange and speech bubble (btw. you misspelled it ’speach’) can be pressed in the same time
– if you click a component (not drag), sometimes it stays selected, and cannot drag any others..
– ribbon component (by default the groups are labbeled “Group 1″, “Group 2″… but if you create new ones are “Group3″ (no space).. also on the hover toolbar there is a number label that doesn’t seem to make any sense (debug?)
– it’s possible to move items in containers outside their clip area (basically lose them)
– settings > large palette buttons – just adds a label (icons same size)
– you might want to increase the frameRate of the application (now I guess it’s around 20FPS and feels rather slow).. make it at least 30/35 fps
– sometimes placing a MenuBar, after drop, the items disappear, making it unusable.
– also, if you change the theme, the MenuBar (maybe other components too) doesn’t update (always keeps the same style as when dropped).
– group 2 components.. then add another one, and group them all again… [A [B C]].. if you keep double clicking twice, to edit B or C, when you click outside it seems to get back to the root, but you can still edit first group’s components A and [B C]
– i feel (just FEEL :p) the components should be ordered more natural (standard components first, not by their name)
– a design issue: the undo/redo seems to look like back/forward navigation buttons (also because of their position)… when you go to design, and change the page, I kept seeing myself pressing the back button. usually that means I kept undoing some things in another page that I didn’t even see.. At least undoing an action in another page should immediately switch to that page.
A better idea would be to have the undo/redo manager per page (this is what normally happens in other IDEs / editors). Also, maybe disabling undo/redo in preview mode will be a good idea :p
- changing the font family doesn’t seem to work in a lot of components.
- place a DataGrid so that the right edge of the grid is outside the viewport.. the datagrid will not be rendered correctly, and the app crashes.
- In the same problem, I guess, it’s when you place a paragraph text (most components) so that the right edge gets outside the container/viewport then the new width is not computed properly.
- in the sample project, in the [Components] page, clicking the [iPhone] link goes to [navigation].
Too late now, going to sleep..
Wow, Cristi! This is so nice of you. Some of the bugs have been there before 2.0 but will get them fixed anyway.
Thanks so much.
The MenuBar seems to have cause you more problems. Good news is that I have a remake on the way, a component I built myself from scratch. Hopefully that’ll behave nicer.
Thanks once again!
2 Feature requests
Wondering if data grids can link to a database?
Flash or AJAX style transitions?
Hi David,
No, the datagrid can not connect to any external service or database. I know a $6000/seat prototyping tool that does that.
Maybe if someday FlairBuilder will support plugins, that’d be possible, too.
In 2.0 I just added resize/move actions that allow you to do some kind of transitions. You can resize/move any component, so… Write me an email with what you want to do and I’ll give you more hints.
Thanks!
I did not like. All the ease of the previous version, simply vanished. If you would like to “boot”, I would choose the program to more powerful (like axure).
Algor, could you please point me some UI features that have lost their ease of use? Maybe I got it wrong, feedback like yours would help. Thanks!
Hi Cristian, I’ve been evaluating 1.9 and saw 2.0 beta available so had a look. Some small things seem to have been lost between 1.9 and 2.0. e.g. hover effect when mousing over according headers and tabs is gone, ability to set row colours on data grids, rounding of button corners. These are just some things that jumped out at me. In general I would have thought that all widget properties would have been kept?
Apologies if I’m missing something here as I’m not an experienced user, like I said, I’ve just started evaluating the product.
Thanks
Indeed, as I mentioned in the blog post, there are few properties that haven’t yet made it to the new version. I actually forgot about the button rounded corners and I can put that back, no problem.
The accordion and tabs hover effect hasn’t been yet implemented in the new version. I initially used the built in components provided by Adobe, but these are created by me so they have the minimum set of features. I wasn’t actually sure if the hover effect is really needed.
As for the row colors of DataGrid and List and the Tree, I’m not sure about how I should let you select 4 colors. I’ll see.
I guess the button corner property isn’t too important, but it’s nice to have control of the level of detail in your prototype if you decide you need it.
The hover effects are only important depending on the level of prototype we want to provide our clients. User feedback like hover effects are an important part of the UX in the finished product so I guess if we can show it in our prototypes then it makes for a richer experience for clients when looking at a prototype.
With the grid colours, it’s really only the ability to candy stripe rows that I care about. Our clients really seem to care about this
Thanks for your reply, it’s good to see someone want and take feedback seriously. I eval’d a lot of proto tools in the last couple of weeks (and I’m not done yet!) and Flairbuilder really stacks up for our purpose.
Please add 75% to the zoom. This is the most common one I would use.
Good point! Will put that right away into the zoom dropdown.
Hi Christian,
Not sure I like the new Interaction dialog. It’s not dockable, and you can only close it from the main menu so I find myself having to constantly move it so it doesn’t obscure the views.
I do think the new icons look much better than the old version!
Thanks,
Hey Gil, thanks for your feedback. Yeah, the Interactions dialog is work in progress as I receive more thoughts about it.
I’m glad you like the new icons!
When installing on Windows 7 getting Application install error Error #2032
Hey Matthew, please make sure that your internet connection lets you download files. Are you behind a proxy, or something?