Components
FlairBuilder has a large palette of built-in components, ranging from simple elements to advanced complex components.
Adding components to the page
There are two ways to add components to your wireframe pages. First is by drag’n'drop from the component palette. Also, from the component palette, you can choose one of the shape tools, to actually draw a shape.
The second way, a slightly faster way to add components, is with a keyboard shortcut, namely / or +, which will open a Quick Input box. Type in the first letters of the component you’re looking for and you’ll be offered with a list of matching components. Use UP/DOWN arrow keys to move through the selection. Hit ENTER to pick one.
Working with components
To select a component, simply click it once. Once selected, you’ll be able to resize it, move it, or change it’s properties from the toolbar or from the Interactions Panel.
A selected component will be surrounded by 9 handles. Use these handles to resize the component just like in any other design tool. Hold SHIFT when resizing from the right or bottom sides, or from the left-bottom corner, to maintain the aspect ratio of the component and resize proportionally.
Working with images
FlairBuilder lets you import your own graphics into the wireframes using the Image component. By default it shows the standard image placeholder, but you can replace that with your own image. To do so, click on the image component to select it. Then, click on the little ‘folder’ icon that shows up in the top-right corner. A dialog will show up, allowing you to browse your file system for an image. Currently PNG and JPEG files are supported.
Working with icons
FlairBuilder has an extensive library of icons available (more than 300 icons, actually). Just like in the case of images, to change the default image for the Icon component, click on the little ‘folder’ button that shows up when you select an Icon component. This will open a Icon Palette, just like in the image bellow.
Use the other two controls in the mini floating toolbar to adjust the size of the Icon.
Round corners
Some of the components support some extra handles. For instance, the rectangle bellow lets you adjust the corner radius using the little yellow handle. The same is true for other components, like the Data Grid, the Accordion, the Tabs, and more.
