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. Select an uploaded screen and open Links. Start with the first screen to build the complete route. Start screen.
  1. Mark areas. Draw an area over the element or use Suggest with AI. Adjust its bounds to the region intended to receive clicks. Edit address button · No accidental overlap.
  1. Set destinations. Label each area and select the next screen or end of task. Repeat on intermediate screens. Edit → form · Save → confirmation.
  1. Walk the route. Select clickable mode in the block and test from start to goal. Fix any unreachable-goal warning before publishing. Each click opens its intended destination.

Validate before collecting responses

The side preview lets you inspect a block; for Figma it is static. To validate draft rules and order, use Test full flow, without creating sessions or taking quota slots. Figma, recording, voice and AI follow-up require the published link. Test published opens the real /r/[token] link: it can create responses and consume quota. Separate these tests when analyzing your 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@uxtap.app.