Prototyping & Interactions: Making Static Designs Clickable

Chapter 6 organized components and styles into a shared design system. This chapter puts that system into motion — connecting Frames with interactions so a design can actually be clicked through, simulating what a real, working app would feel like before a single line of code exists.

What Prototyping Actually Does: Simulating a Working App

Prototyping links separate Frames together into a clickable sequence — tapping a button on one screen's Frame jumps to another Frame representing the next screen. Nothing about the underlying design content changes; prototyping simply defines how a viewer moves between the already-designed Frames, simulating the feel of a real app's own navigation.

Connections: Linking One Frame to Another

A connection links one element (a button, a card, an entire Frame) to a destination Frame, drawn directly between the two in Figma's own prototyping view. A single Frame can have several different connections leading out from different elements within it — one button leading to a settings screen, another leading to a profile screen, both starting from the same source Frame.

Triggers: What Starts an Interaction

A trigger defines what causes a connection to fire — On Click/Tap (the most common), While Hovering, On Drag, or After Delay (automatically triggering after a set time, useful for simulating a splash screen transitioning on its own). Choosing the right trigger for a given interaction is what makes a prototype feel like the real, intended behavior rather than an arbitrary click-anywhere simulation.

Actions: What Happens When a Trigger Fires

An action defines what actually happens once a trigger fires — Navigate To (jump to a destination Frame), Open Overlay (show a Frame layered on top, like a modal or dropdown, without fully replacing the current screen), Back (return to the previously viewed Frame), or Scroll To (jump to a specific position within a longer scrolling Frame).

Transitions: How the Change Happens

A transition defines how the change between Frames visually happens — an instant cut, a smooth dissolve, or a directional slide/push that mimics how a real mobile app screen often slides in from the side. Choosing a transition that matches the actual platform's own real conventions (a slide for a typical mobile screen push, a dissolve for a subtler overlay) makes the simulation feel meaningfully more realistic.

Prototyping in Penpot: The Same Interaction Model

Penpot supports the same connection/trigger/action/transition model for building clickable prototypes, under closely matching terminology — another place where Penpot's own deliberate similarity to Figma means the underlying workflow transfers directly.

Hands-On Exercises