Building Clickable Prototypes

From Static Screens to Something You Can Tap

A clickable prototype links your screens together so someone can tap through them as if they were using a real app. Nothing is coded. Behind the scenes it is just frames connected by arrows. To the person testing it, though, it feels real enough to reveal whether your flow works.

Prototypes answer questions that static screens cannot:

• Can users find the next step without help?
• Does the flow make sense in the order you designed it?
• Where do people get lost, hesitate or tap the wrong thing?

---

Prototyping in Figma

Switch to the Prototype tab in the right panel. Select a layer, such as a button, and drag the blue + handle onto the frame it should open. That arrow is called a connection or noodle.

Each connection has three parts:

1. Trigger: what the user does

• On tap / On click: the most common
• On drag: carousels, swipe-to-delete
• While hovering: desktop hover states
• After delay: splash screens, auto-advancing success messages

2. Action: what happens

• Navigate to: go to another frame
• Open overlay: show a bottom sheet, modal or dropdown on top
• Swap overlay / Close overlay
• Back: return to the previous frame
• Scroll to: jump to a section on the same frame

3. Animation: how it looks

• Instant: no animation
• Dissolve: a fade
• Move in / Push / Slide: directional transitions like native apps
• Smart animate: Figma animates matching layers between frames. It is great for expanding cards or toggles

---

Designing the Flow First

Before you draw noodles, write down the user flow: the sequence of screens for one task.

Send money: Home → Enter amount → Choose recipient → Confirm → Enter PIN → Success → Home

Then check for:

• Dead ends: a screen with no way forward or back. Every screen needs an exit.
• Missing states: what happens if the PIN is wrong or the network fails? Real Nigerian users hit "Transaction pending" often, so prototype that path too.
• Starting point: set a flow starting point in Figma so testers begin on the right screen.

---

Keep Prototypes Focused

A common beginner mistake is wiring up every button on every screen. That takes days and creates a maze.

Instead, prototype the happy path for the task you are testing, plus one or two important unhappy paths. If a user taps something that is not wired up, Figma highlights the hotspots in blue, which gently guides them back.

---

Presenting and Sharing

• Press Present (the ▶ icon) to play the prototype in a new tab.
• Choose a device frame such as an Android phone to make it feel real.
• Share the prototype link with testers. On mobile, open it in the Figma mobile app so it fills the whole screen.
• For remote tests, tools such as Maze and Useberry import your Figma prototype and record where people tap.

In Nigeria, many teams test prototypes over a WhatsApp video call. The participant opens the link on their phone and shares their screen. It is cheap, fast and surprisingly effective.

---

Try It in the Lab

The lab has four frames for a Send money flow. Select a hotspot, choose its target frame and an animation, and build the connections. The flow checker flags dead ends and unconnected hotspots. When everything is wired, press Present and tap through your prototype.