Prototyping in Sketch

Switch to the Prototype tab in the Inspector (next to Design). Select any layer or group and click + beside Interactions. Choose a trigger (Click, Hover, Key) and a destination artboard. A prototype arrow appears on the canvas showing the connection. For navigation, link your NavBar home button to the Home artboard, the Search icon to the Search artboard, and so on. Standalone hotspot rectangles can be placed over complex graphics where individual layers are not selectable — draw them at zero fill opacity and they become invisible hit targets in the prototype preview.

Each interaction specifies an animation: Instant, Dissolve (crossfade), Move In/Out (slide from a direction), or Push (both artboards slide simultaneously). Duration is configurable in milliseconds. For mobile navigation flows, Move In from Right for forward navigation and Move In from Left for back navigation mimics iOS and Android native transitions — this helps stakeholders understand directionality in context. Keep transition durations between 200–350 ms; longer feels sluggish and users lose patience in usability sessions.

Overlays render a destination artboard on top of the current one rather than replacing it — ideal for modals, bottom sheets, and dropdown menus. Enable Overlay in the interaction panel, choose alignment (center, bottom, top), and optionally add a semi-transparent dark background rectangle on the overlay artboard to simulate the modal scrim. A 'click anywhere' hotspot on the background rectangle dismisses the overlay when tapped.

1Prototype: Delete Confirmation Modal
2  Trigger:  Click Delete button
3  Type:     Overlay
4  Position: Center
5  Artboard: Modal - Confirm Delete (with scrim bg)
6  Dismiss:  Click outside -> link back to current artboard

Set an artboard taller than the defined viewport height to create a scrollable screen. The viewport height is the blue 'Viewport Height' line visible in artboard settings — content below this line is reachable by scrolling in the prototype preview. Use this for long-form pages: landing pages, settings screens, article content. Fixed elements like navbars and floating action buttons can be pinned by enabling 'Fix position when scrolling' in the layer Inspector — they stay visible as the user scrolls the artboard content.

Press Cmd+P to preview the prototype locally and verify all interactions work. Then choose Share > Prototype to publish to Sketch Cloud and generate a shareable URL. Recipients can click through the prototype in any browser without a Sketch account. Sketch Cloud links persist and update when you re-publish from the same document — share once and stakeholders always see the latest iteration. Leave comments directly on specific screens in the Cloud viewer for async feedback that maps to exact design decisions.