How to Create Clickable Prototypes and Gather Feedback in Presentator

Presentator (presentator.io) is a free, open-source design feedback and presentation platform. You can use it to turn static screens into clickable prototypes by adding annotations, hotspots, and transitions, then collect feedback through comments placed directly on the designs and share them via preview links. This works whether you use the free hosted app or host it yourself. The steps below apply to both, since the feature set described on the site is the same.

What You Need Before Starting

• Your design screens, exported as images (for example from Figma). Presentator offers a Figma plugin to export your designs, which avoids manual export work.
• A Presentator project. The platform supports multiple project owners, so more than one person can manage the same project.
• A decision on hosting: use the free hosted app, or host it on your own server.

Build a Clickable Prototype

1. Create or open a project

Set up a project to hold your screens. Because multiple project owners are supported, you can add collaborators who also need to manage screens and feedback.

2. Add your screens

Upload the exported design screens into the project. If you use the Figma plugin, export directly from Figma rather than exporting and uploading by hand.

3. Connect screens with hotspots and transitions

Static screens become interactive when you link them:

• Hotspots define the clickable areas on a screen — for example, a button or a nav item.
• Transitions control what happens when a hotspot is clicked, moving the viewer to another screen.
• Annotations add notes or labels on top of a screen to explain behavior, states, or intent.

Together these turn a flat set of images into a prototype a reviewer can click through.

4. Preview the flow

Click through your own prototype before sharing. Check that each hotspot lands on the intended screen and that transitions read the way you expect. This is the step where misaligned hotspots or a wrong target screen are easiest to catch.

Share for Review

Presentator supports public and password-protected preview links. Choose based on who needs access:

Gather Feedback

Reviewers leave comments directly on the designs rather than in a separate document or chat thread. This keeps each comment attached to the exact screen or element it refers to, which is the main efficiency gain over collecting feedback in email or messaging.

To run a review:

1. Share the preview link with your reviewers.
2. Ask them to comment on the specific screens or hotspots in question.
3. Work through the comments in the project, since comments stay tied to the design they were left on.

Common Snags

• Hotspots not lining up with the visual element. Re-check the hotspot area against the screen after any re-export, since a changed image can shift positions.
• Reviewers seeing the wrong version. Confirm you shared the current preview link, and use password protection if the link should not circulate freely.
• Feedback scattered across tools. Point reviewers to the on-design comments; that is where Presentator keeps feedback organized.

Hosted vs. Self-Hosted

Both options give you the same prototyping and feedback features described above. The difference is operational: the hosted app requires no setup, while self-hosting puts the server, updates, and access control in your hands. If you need to keep designs on your own infrastructure, self-hosting is the relevant choice; if you want to start reviewing immediately, the hosted app is the shorter path.