Prototyping

Learn how to create interactive prototypes in Lunacy

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

Prototyping is based on linking frames and creating interactive zones, or hotspots, on your designs so you can preview how your interface behaves based on user actions.

Creating a prototype

Linking frames

The easiest way to create a prototype is to add a link from one frame to another.

Here’s how it works:

1. On a frame, select a layer for the user to interact with (e.g. a button).
2. In the right panel, click + next to the Prototyping section. An arrow-shaped prototyping link will appear.
3. Point the arrow to the target frame and click or use the Target dropdown list in the Prototyping section to set the target frame. With that, you have a basic prototype with a layer linked to a frame.
4. To make it a bit more versatile, we repeat the steps above and create a link from a layer in the second frame to Frame 1.

Previewing prototypes

To preview a prototype, select the frame you want to start with and click the Play button () at the top right corner of the interface. The preview window will show up in your default browser.

You can link your frames in any sequence you need to test the user flow for your interfaces.

Commenting on prototype previews

To comment on a prototype right from the browser, log in to your Lunacy account. The Log in button appears once you hover the cursor at the top of the prototype window to display the top bar.

To comment, click the Comment button on the top bar, leave a comment, then click or press Shift + Enter to post it.

Scrollable prototypes

To create a scrollable prototype:

1. Create a frame using a preset.

2. Resize the frame vertically. Resized frames have the label Resized in the right panel:

3. Fill the frame with content and link it with other frames.

Preview the prototype as usual and scroll down to test out the interface.

Hotspots

Hotspots are another convenient way to link frames for prototyping. These are special types of layers that acts as an interactive zone anywhere on a frame.

Hotspots come in handy when the size of an element you want to make interactive or tappable is too small for comfortable use. By adding a hotspot, you can enlarge the interactive area around the layer.

You can also use hotspots as parts of components and override their targets as needed.

There are two ways to add a hotspot:

• Use the Hotspot tool.
• Select a layer linked to a frame, then click Create separate hotspot layer () in the Prototyping section of the right panel. This creates a hotspot of the same size as the selection frame around the layer. You can resize it as you need by dragging the layer’s bounding box handles.

This is how hotspots and linked layers appear in the Layer list:

To hide/show hotspots and prototyping links on the canvas, enable/disable the Show prototyping option in the Additional options menu on the top bar:

To delete a hotspot, select it and press Del.

To see the prototype in action, you’ll need to preview it.

Prototyping settings

Here are the settings that appear in the Prototyping section of the right panel when you select a layer linked to a frame or a hotspot:

Create separate hotspot layer. Click it to create a hotspot over the selected layer.

Remove link from layer. Deletes the prototyping setting for the selected layer or deletes the selected hotspot.

Target frame. Displays the current target frame of the selected layer/hotspot. Open it to change the target frame and view all of the frames available in the document. In multi-page documents, the frames in this list are organized by pages (you can link frames that are on different pages).

Apart from the existing frames, the list has two more options:

• None → sets a null target.
• Previous frame → clicking a layer with this target redirects you back to the previous view.

Go to hotspot target. Clicking this button redirects you to the frame set as the target frame for the selected layer.

Transition animations. Determine the type of animation for the transitions between frames in the prototype.

Fix the frame position on scroll. Enable this setting if you want the selected layer to preserve its position when you scroll the screen (for instance, a floating button).

Maintain scroll position after click. With this checkbox enabled, scrollable frames preserve their position during the prototype preview. When you get back to the frame, it will be in the same position you left it. With the checkbox cleared, the frame will always return to the top.