Pages

Pages can be managed from the 'Pages' panel in the sidebar of the application. You can create a new page, duplicate an existing one, delete the currently selected page, and also reorder pages. To rename a page, just double-click it in the list of pages and edit its name.

When duplicating pages, layers, or symbols, interactions that target components on those page/layers/symbols will be updated to target their copies. Just as you'd expect.

The first page in the list will be automatically displayed as the 'home page' of your project in the online viewer. When exporting your project to PNG, each image will take the name of the corresponding page. Just make sure no two pages have the same name, otherwise images will be overwritten by subsequent pages with the same name.

Setting a page as the master of the current page, hold Ctrl or Cmd key, if you're on OS X, and click the page you want set as master. The master page will be then displayed behind the current page. You can not edit the components on the master page, that's why the master pages is displayed with a reduced opacity. To edit the components on the master page, just head to that page instead.

Layers

Layers are pieces of content which you can display in your prototype using the 'show layer' action. They're useful when you have content which doesn't belong to a certain page, such as popups and modal dialogs. To manage layers, similarly to managing pages, use the toolbar in the 'Layers' tab. The same as with pages, you can reorder layers, duplicate existing one, rename them, and so on.

You can select to open as many layers as you want. Layers will be stacked one on top of each other in the order you open them. You can see the opened layers in the breadcrumbs showing up in the top-left corner. When you click a layer in the breadcrumbs, following layers will be automatically closed for you. You can also close opened layers using the 'ESC' key.

Layers' content is breakpoint aware, meaning that you can specify the position, size, and visibility of each component on a layer for each breakpoint in your project. As you change the breakpoint with a layer opened, the content will automatically readjust.

Symbols

Symbols are pieces of content you can place anywhere in your project. They are custom components which you can build from components in the FlairBuilder's palette. The process of creating, duplicating, reordering, renaming, and removing symbols is the same as with pages. To edit a symbol, you just need to select it in the list. Only one symbol can be selected at a time. However, you can have all symbols visible at the same time. To do that, press the little eye icon in the Symbols toolbar. This will enable a 'library' view, where all symbols are visible at the same time, giving you an overview of all symbols in your project.

Symbols are breakpoint adjustable too, just like pages and layers. You can design each symbol for each breakpoint in your project. This is in line with what's called 'responsive components', meaning components that adjust their size and layout to the device size. This is great when you design reusable components for responsive websites or apps.

Each symbol you create will automatically show up in the component palette, from where you can drag'n'drop it into your pages or layers. When you change to a different breakpoint, the symbol's image in the palette will adjust to its shape on that breakpoint. That way you know exactly what the symbol looks like for the current breakpoint.

Symbols, of course, can be interactive. You can attach interactions to their components, and interactions definitions will be adjusted to the place where the symbols are placed. The targets of actions like 'show', 'resize', 'style', and 'update values' will be automatically transfered to components into the copy of the symbols. If it sounds complicated, just trust that interactions will work seamlessly into each symbol copy.

Project Sitemap

FlairBuilder can generate a sitemap for your project by analysing the links between your project pages. To see the project sitemap, simply press Cmd/Ctrl+F and the sitemap will open in a full page view. The project sitemap is also included in the PNG export of your project, so you can print it.

Project Preview

There are two ways to preview your wireframe/prototype. The first is a quick one for the current page and opened layers. Simply press the TAB key to activate it, and press TAB again to get back to design mode. This preview is static, meaning that you can't click any of the components on page.

The second preview mode will open your prototype in a new window, and it's actually an interactive preview. All interactions are active as you set them in the design mode, and you can navigate through the prototype. To preview in this mode, press Cmd/Ctrl+J, which will start the prototpe with the default page. If you want to start the prototype from the current page, press Cmd/Ctrl+Shift+J.

Project comments

You can add comments to each page or layer in your project by pressing 'c' on your keyboard, or by clicking on the comments icon in the application's toolbar.

To add a comment, drag and select an area on the page/layer which you'd like to comment. A text box will show up, in which you can enter the text of your comment. Afterwards, click outside that box to move to next comment. Clicking the comment badge, will change the type of the comment, a simple color code which you can signify any way you want to.

To change the area of a comment, drag it around to change its position. You can also resize it by using the bottom-right corner. To remove the comment, click on the 'close' button in the top-right corner.

Finally, comments will be automatically ordered by their position on the page, starting from the top-left corner horizontally, first, and then vertically. You'll quickly get a handle of it.