## User Interface

The User Interface tab holds all the tools and views necessary to define the contents and the interactions of your prototype. In this section we will detail each of the panels inside that tab. All the views can be displayed or hidden using the main menu option 'View'.

Widgets

These are the widgets that can be used to build the content of a screen. They are detailed one by one in the Widgets section

Properties

This panel shows and edit the properties of the component selected in the canvas. If no component is selected then the screen properties are displayed. You will find a detailed explanation of each property in the Formatting section.

Contents

Located at the top right inside the User Interface tab, the Contents panel lists all the screens, templates and masters created in the prototype.
The Templates panel lists all the created templates of the prototype. By default a prototype has one template but you can create as many templates as you need. The panel has one button to create templates and if you click on one of them in the list the contents of that template are displayed in the canvas. Check the Templates section for further information.
The Masters panel is very similar to the Templates panel. In both an options menu is displayed when either a master or a template is selected using the right mouse button (or ctrl+click in OS X). The masters can be dragged to the screens. You have further information in the Masters section.

Canvas

The central section of the User Interface tab is the canvas. Displays the content of the current screen, template or master and allows to edit it.

Events

The events panel lists all the interactions defined in the selected component in the canvas. More information about how to define events can be found in the Events & Interactions section.

Comments

This panel lists all the comments associated with the selected component in the canvas. A comment can be dragged to another component to change that association.

Data Masters and Variables

The Data Master panel lists all the Data Masters created in the prototype. Drag them to the canvas to build an input form automatically. If you right-click on one of them an options menu will be displayed. Click on edit and the next screen will appear.
Click the Import Data Master from CSV button in the Data Master panel list to create a new data master using the structured data of a CSV file in your file system. This functionality is explained in detail in the Importing Real Data section.
The Variables panel lists all the variables created in the prototype to that moment. Create variables using the + button on top of that panel. These variables can be used in the interactions to simulate data interaction.

Outline, Navigator and Notes

- Outline: display the list of the components that are currently in the canvas. You can define the order of that components by drag and drop or using the arrow buttons at the top. Click the eye icon next to a component to hide its corresponding widget in the canvas. Click again to redisplay the widget. Changing the widgets visibility allows you to simplify the view of your prototype while you are designing it, but does not have an effect when you simulate it. Drag through the eye column to change the visibility of multiple items.
- Navigator: shows a preview of all the contents in the canvas and highlights the area that is visible at that time.
- Notes: write your own notes about the screen visualized in the canvas in this panel. These notes will appear in the exported document too.