See how it works: Connect screens with clickable areas

Clickable areas and links

Turn static images into a navigable prototype.

2 minutes read

On this page

Turn images into a navigable path.

Purpose

Define which elements lead to other screens and check that the goal is reachable.

When to use it

For a clickable prototype built from uploaded images.

Before you start

  • Uploaded, named screens
  • An intended destination for each button

Example

The Edit address area opens the form; Save leads to confirmation.

Step by step

  1. Open Links. In Prototype, find the image set and click Links on the start screen. Check the screen name in the editor: this is the image on which you will draw navigation areas. Start screen.
  1. Mark areas. Drag over Edit address to draw an area. If available, Detect buttons with AI suggests areas to review. Click an area and adjust its bounds: it should cover the button without overlapping another control. Edit address button · No accidental overlap.
  1. Set destinations. In the area list, fill in the label and destination. Link Edit address to the form and Save to confirmation. Repeat on intermediate screens and click Save links; wait for the saved confirmation before closing. Edit → form · Save → confirmation.
  1. Walk the route. Click Test links in the editor and follow Edit address, form and confirmation. Each click should open its destination. In the block, choose Images with links; check start and goal and fix any unreachable-screen warning. Each click opens its intended destination.

Validate before collecting responses

In the builder, Study preview applies draft groups, rules and screening without creating sessions or taking quota slots. For Figma tasks, websites and interviews, it shows Simulated answer to test logic: the author supplies the outcome; this does not demonstrate a real interaction.

Preview in new tab lets you check each block on desktop or mobile, including interactive Figma navigation and a simulated interview conversation. This block preview does not apply study skip rules.

To validate real websites, recording, voice and AI follow-up, publish and use Open link in new tab in Share. The published link opens a real participation at /r/[token]: it may create responses and consume quota. Keep this participation separate when analyzing collection.

How to read the result

  • Labeled areas with destinations
  • A verifiable route from start to goal

Cautions and limitations

  • Review the size, label and destination of AI suggestions.
  • An image that looks like a button does not navigate by itself.

Continue with the interactive guide

Connect screens with clickable areas

Was this helpful?

Is something missing? Write to contato@paineltap.com.br.