Prototyping

Learn how to build prototypes in Lunacy

How it works

You can build prototypes to test and polish UX of your designs before sending them to development.

Prototyping is based on artboards. If you are planning to add prototyping to your project, the use of artboards is a must.

The easiest way to create a prototype is to add a link between two artboards. The procedure is as follows:

  1. On the first artboard, select an object the user will interact with (say, a button).
  2. In the Inspector panel, click + in the Prototyping section. A prototyping link appears.
  3. Point the cursor over the second artboard and click to set the link. To define the target artboard you can also use the Target dropdown list in the Prototyping section (see the demo below).

That’s it. A primitive prototype is ready. To make it a bit more usable, we will repeat the above steps and create a control that will return the user from Artboard 1 to Artboard 2 (see the demo in the next subsection).

Previewing prototypes

To preview a prototype, select an artboard you want to start with and click Play button in the upper-right corner of the interface. The preview window will show up.

In a similar fashion you can link your artboards in the desired navigation sequence and preview your design in action.

Scrollable prototypes

To create a scrollable prototype, you should select an artboard from Artboard Presets and resize it vertically. Alternatively, you can create a custom preset and then vertically resize it. For details, about artboards presets and custom presets, click here.

Resized artboards appear with the word Resized in the Inspector as shown in the figure below. Prototypes based on non-resized artboards won’t scroll.

Resized artboard in the Inspector

Hotspots

You can also use hotspots to create links between artboards. These are a special type of objects that allows you to create interactive zones anywhere on artboards.

Also, hotspots come in handy when the size of an element that you want to make clickable or tappable is too small for convenient use. By adding a hotspot you can enlarge interactive area around the object.

Moreover, you can use hotspots as parts of components and override their targets as needed.

To add a hotspot you can:

  • Use the hotspot tool.
  • Select a linked object, then click Create hotspot icon in the Prototyping section of the Inspector. This creates a hotspot of the same size as of the selection frame around the object. You can resize it by dragging handles, if necessary.

The demo below show both these methods.

The next figure shows how hotspots and linked objects appear in the Objects panel.

Hide/Show hotspot button

To hide/show hotspots and prototyping links on the canvas, use the Prototyping button on the action bar.

Hide/Show hotspot button

To delete a hotspot, select it and pressDel.

Prototyping controls

The figure below shows the controls that appear in the Prototyping section when you select a linked object or a hotspot.

Prototyping controls

  1. This icon appears only when you select a linked object. A click over the icon creates a hotspot over the object. See the Hotspots section above.
  2. The trash can icon. Discards prototyping setting for the selected object/Deletes the selected hotspot.
  3. A click over the arrow will bring you to the artboard which is set as target for the selected object.
  4. Use this drop-down list box to set the target artboard for the selected object (see the figure below). It shows the list of all artboards available in the document. If you have several pages in your document, the artboards will be organized by pages. It is OK, if interlinked artboards are on different pages. Also, the list features two more options:

    • None - sets the zero target.
    • Previous artboard - a click over the object with this option selected will bring you back to the previous view.

    Prototyping controls

  5. These controls allow you to choose how the target artboard will show up on the screen during the preview.
  6. Select this checkbox, if you want the selected object to preserve its position when you scroll the screen (for instance, a floating button).
  7. With this checkbox selected, scrollable artboards will preserve their position during preview of the prototype. When you get back to the artboard, it will be in the same position as you’ve left it.

    With the clear checkbox, the artboard will always return to the top.

Sharing prototypes

You can easily share prototypes with your teammates and customers.

For this:

  1. Click Play button in the upper-right corner of the interface. The preview window shows up.
  2. Click the chain link icon at the top of the window.

That’s it. The link gets copied to your clipboard and you can send it to your recipients.

Sharing a prototype