Figma Prototyping Shortcuts

Switching between Design and Prototype modes (Shift+E in many versions, though this exact binding has shifted somewhat across Figma updates) toggles the entire right-hand panel's purpose — in Design mode it shows styling properties like fill, stroke, and typography; in Prototype mode the identical panel space instead shows interaction settings, letting you drag a connection line from a selected element to whatever frame or action you want it to trigger. Understanding that these are the same panel serving two entirely different purposes, rather than two separate panels, avoids some early confusion about where a specific setting has 'gone' when switching modes. Building an actual prototype connection happens by selecting an element in Prototype mode and dragging from the small connection handle that appears on its edge to a destination frame — choosing a trigger (On Click, On Hover, After Delay, and several others) and an action (Navigate To, Open Overlay, Swap Variant, Scroll To, among others) that together define what happens when a viewer interacts with that specific element during a live preview. Setting a starting frame (right-click a frame > Set as starting frame) tells Figma which frame Presentation mode should load first — necessary because a typical design file contains many frames representing different screens, and without an explicit starting point set, Figma has no reliable way to guess which one represents the actual beginning of the flow you want to preview. The designated starting frame is marked with a small flag icon visible directly on the canvas, making it easy to confirm at a glance which frame currently holds that role. Presenting the prototype (Cmd+Option+Return on Mac, a similar chord on Windows that varies slightly by version, or simply clicking the Present button in the top-right corner) launches a full-screen interactive preview beginning at the designated starting frame, letting you click through every wired connection exactly as an end user or stakeholder reviewing the flow would experience it — genuinely the fastest way to validate whether a set of interactions actually behaves the way you intended before handing the design off to engineering. Reloading the preview (R, pressed while already inside Presentation view) restarts the current preview session from the starting frame without needing to fully close the presentation window and reopen it — useful for quickly re-testing a flow immediately after making a small edit back in Design mode, since Presentation mode doesn't automatically live-refresh as you edit the underlying frames in a separate window. A practical habit worth building specifically for prototyping work: because interaction connections are visually represented as blue lines overlaid on the canvas while in Prototype mode, a file with many interconnected frames and overlays can become visually cluttered fast — it's often more manageable to build and test a prototype flow's connections in smaller, focused batches (wiring up one user flow at a time and testing it via Present before moving to the next) rather than wiring every possible connection across an entire large file before testing any of it. Overlay-based interactions deserve a specific mention since they diverge from simple frame-to-frame navigation. Rather than fully replacing the current frame the way a Navigate To action does, an Open Overlay action layers a second frame on top of the current one — the mechanism behind modals, dropdown menus, and tooltips in a working prototype — and that overlay frame can itself be configured to close automatically on an outside click, or stay open until a specific close action is triggered, which is a meaningfully different behavior from a full page navigation and worth testing deliberately in Present mode to confirm it matches your intended interaction. Smart Animate, an option available for certain Navigate To connections between two frames that share layers with matching names, automatically interpolates matched layers' position, size, and rotation between the two frames rather than performing a hard cut — this is how Figma prototypes simulate smoother, more app-like transitions (an element sliding or scaling into its new position) without needing any actual animation software, purely by naming corresponding layers consistently across the two connected frames so Figma can recognize which layer maps to which.