Defining the Content of a Screens

From the components palette, drag and drop the item you want in the canvas. Once inside the canvas, you can re-size and move it to fit in your design. To move it, select it and drag it to the desired destination; you can also push it with the arrow keys (holding down the CAPS key will speed it up). To help you debug your design, you also have the following instruments:

The automatic alignment system (blue guidelines).
The grid (see Mesh).
The Rules.
The Guides. To position them, click on the rules and drag them to the desired place. To delete them, simply select them and press the "delete" key.

There is a toolbar related to the work area, between the lower part of the canvas and the properties view. The two text fields indicate a reference resolution: you can change it by directly editing these values. The zoom indicator is on the right side: magnify or reduce the size by using this drop-down menu.

The elements on the screen keep a certain order of depth between them. You can see the order in which they are arranged in the Content of the current screen. Thus, the highest ones block out the ones below them. To change this order, right click the item (or select it in the content view) and select the Sort option of your choice.

The Image component allows you to see which parts of the screen will be taken up by images. Or you can replace these pictures with real images by selecting a file from the Properties view.

Create more screens in your prototype by clicking the "+" button on top of the list of screens.
Rename it by right clicking it. Select Edit from the context menu.
If you want to delete one, right click it and click Delete.
And, to edit the content of an inactive screen, double-click it from the list of screens. Its content is then loaded onto the canvas where you can easily change it.
Justinmind Prototyper allows you to copy and paste screen components within the same screen or onto other screens. You can use the options in the Edit menu or the usual keyboard shortcuts of "Ctrl+C" (copy) and "Ctrl+V" (paste). To duplicate elements, drag them to the desired position by holding down the "Ctrl" key or with "Ctrl+D" (Mac keyboard shortcuts are different).

Remember: Whatever action you do, you can undo it or redo it from the Edit menu.

Back to all Tutorials