With Sketch hotspot support in Abstract, you can present your designs the way they’re intended to work. You can also go back to previous commits, enter presentation mode, and click through the prototype exactly as it worked at that point in time.
Abstract detects the hotspots and links that you create in your Sketch files so, when you preview your work in Abstract, you can also navigate between screens using these interactions.
Share and interact with simple prototypes using hotspots while leveraging version control, commenting and feedback, and review requests — all within Abstract.
A user must be invited to your organization to navigate artboards with hotspots.
Create hotspots in Sketch
To interact with these hotspots in Abstract, set up hotspots in your Sketch file.
To create a hotspot in Sketch:
- Open the Abstract desktop app.
- Select the project where you’d like to create clickable links between artboards.
- Select one of your active branches or create a branch to get started.
- Select the file you want to prototype and click Edit in Sketch.
- In Sketch, press H to draw a hotspot OR with a layer selected, press W to create a link from that layer.
- Note: You can override hotspots inside of symbols to link to the correct artboard.
- With the hotspot created, click on the artboard where you’d like to link your layer.
- Click Commit Changes at the bottom of your Sketch window when you have finished.
Once your work is committed, you can access the hotspots in Abstract.
View and interact with designs in Abstract
Hotspots bring interactivity to designs by allowing you to navigate between artboards in Abstract using presentation mode.
There are two ways to present from a collection:
- Click the
icon in the top right corner to begin the presentation from the first artboard. - Hover over any item and Present on the tile to start from that screen.
When you’ve launched presentation mode, simply click any hotspot to navigate to the next linked screen. If you don’t know where there are hotspot locations, click anywhere on the design to see orange highlights.
Share designs with hotspots with your team
With hotspots set up in your Sketch file, you may want to share the designs with your team for presentation, review, or hand-off.
Here are a few ways to share designs with hotspots:
- In presentation mode, click the
icon to copy a direct link to that artboard. This opens the design in presentation mode so that viewers can get right to the interactions. - In a collection, add artboards for additional context and click Share to copy a link to the collection.
Only people in your Abstract organization can navigate between artboards using hotspots. You can invite non-members to a project as Guest Viewers to provide access to a design with hotspots.
Inspect hotspots
Developers can also view hotspots in Inspect mode to further understand the interactions. The Inspect panel displays the target artboard, animation style details, and scrolling behavior.
In the Inspect tab, you can:
- Toggle the hotspot previews on and off by clicking the
icon in the bottom bar. - View which items have hotspots by checking the left layers panel.
- See the name of the target artboard.
- Click the name of the target artboard to view that screen.
- View information about the animation style of the interaction.
Play back previous versions of a prototype by clicking on an earlier commit and launching presentation mode from an artboard in that commit.