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 moving your cursor to the exact button, watching your actual Figma window. It’s the same Figma curriculum these lessons come from, taught live instead of read. Free to start.

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.