Interactive Elements

You can create interactive elements from layers or hotspots. Each interactive element can have multiple actions. For example, one action might be a screen transition while another might be a hover animation. Each action has to have a different event to trigger it. While you can add any number of screen transition actions you can only add one back, URL or layer animation action.

It's generally preferable to make layers interactive rather than creating hotspots because if you move the layer the interactive area will move with it. Also if you animate a layer you will have to use an interactive layer as hotspots don't move. If you want to create a hotspot in an animated layer it's best to create a layer with zero opacity and make it interactive. To make a layer interactive, select the layer and either press Q or press the Layer button in the Protowire panel in the bottom right. To add another action to the layer, press Q or click on the Layer button again. To remove interactivity from a layer, select the layer and press the Delete or Backspace key. This won't delete the layer, just the actions associated with it.

Sometimes you might not be able to make a layer interactive - maybe the layer is nested within a symbol. In which case you can use a hotspot. To create a hotspot press the Hotspot button in the Protowire panel and drag out the hotspot in an artboard. You can apply resizing constraints to hotspots by selecting it and clicking on Sketch's resizing constraints options. You will need to do this so that the hotspot is the correct shape when the prototype's screen resizes. To add a second action to a hotspot click on the add button in the middle of the hotspot rectangle. To delete a hotspot, select the hotspot rectangle and press the Delete or Backspace key.

To edit an action, click on it and a popover will appear. To delete an action, click on it and press Delete in the popover or press the Delete or Backspace key.

To change the target artboard on an action, select the action and then drag the handle near the arrow to another artboard. In the popover you can choose whether you want a screen transition or an overlay. For an overlay it adds a dark background. You can change the opacity of this layer by entering a number between 0 and 100. 0 causes it not to display. Checking "Is a toggle" causes the trigger layer to open and close the overlay. Having it unchecked only opens the overlay. If you want a different layer to close the overlay, create a link or hotspots and drag it to the close button at the top.

This will create a screen transition that goes back to the previous screen and reverses the transition. These are useful if you have a navigation bar symbol. You can create a hotspot on the back text of the symbol and have it work throughout the prototype. If you create a link from an artboard that has an overlay link to it, this button will close the overlay.

For web prototypes you might want to link to a 3rd party webpage. These links are also useful in native mobile apps to show things like "login with Facebook". 

You can animate layer properties. For example you might want a button to darken when you hover over it or an overlay to slide up when you click on a button. See here for more information.

Creating interactive elements in symbols is a good way to reduce the number of similar interactive elements you have to create on each screen. For example you can create one back action in the navigation bar symbol rather than creating a back action on each screen. To create an action in the Symbols page that links to a screen in your prototype, create the action as normal and the click on the Artboard button at the top. The popover allows you to select the page and artboard you want to link to.

You can create an interactive layer from the symbol's artboard and have an interactive layer from the symbol's instance override it. For example you might want most symbols to link to one screen but have a few link to another screen.

There is something similar for hotspots. If a hotspot overlaps another hotspot in a symbol the former takes precedence. For example in a navigation bar symbol you might have a back hotspot action. In the artboard that contains the navigation bar symbol you might want one screen to link somewhere else rather than to the previous screen. In which case you can create a hotspot that is roughly over the one in the symbol and it will take precedence.

Protowire can make use of Sketch's built-in prototyping. Sketch's links and hotspots will become part of the Protowire prototype, though if a layer has a Sketch link and a Protowire interactive layer the Protowire one will be used.