Figma Prototyping Basics (beginner guide)

Connect frames into a clickable flow and present it. Here’s how to do it in Figma on macOS, step by step — part of the free Figma beginner curriculum.

Lesson 7 of the Figma curriculum. Before this: Variants and Component Properties. This is the final lesson in the current Figma sequence.

What you’ll do

• Toggle from Design to Prototype tab with Shift E
• Select a layer or frame to make it a hotspot
• Drag the blue connection handle from the hotspot to a destination frame
• Pick a Trigger: On click, On drag, While hovering, While pressing, Mouse enter, Mouse leave, After delay, On media end
• Pick an Action: Navigate to, Open overlay, Swap with, Scroll to, Back, Close overlay, Open link
• Choose an animation: Instant, Dissolve, Smart Animate, Move in/out, Push, Slide in/out
• Set a flow starting point on your entry frame
• Hit the Present button in the top-right to run the prototype

Do it hands-free with Skilly

Reading steps is one thing; doing them while the menus are in front of you is another. Skilly is a voice-first tutor for macOS: you ask out loud — “where’s the prototyping panel?” — and it answers while pointing at the exact button, watching your actual Figma window. It’s the same Figma curriculum these lessons come from, taught live instead of read. 15-minute trial, no card.

Keep going

This is one stage of the full Figma beginner curriculum. Previous: Variants and Component Properties. This is the final lesson in the current sequence.