A wireframe shows what goes where; a prototype shows how it behaves. By linking screens together and adding interactions, you can click through your design like a real product long before anyone writes code, which makes it the best way to test an idea with users and stakeholders.
You'll learn the basics of prototyping in Figma: connecting frames, setting up interactions and transitions, using smart animate for smooth motion, and building reusable components with variants so buttons, toggles and menus respond to the user.
Treat the videos as a reference and come back to them while you build your own prototype. When you're done, continue on to Visual Design Foundations.
What prototyping is for, and how to choose between low-, mid- and high-fidelity prototypes at different stages of the design process.
Figma's own introduction to prototyping: connecting frames, setting triggers and actions, and previewing frame-to-frame navigation.
How Smart Animate works and how to use it to create smooth transitions between screens.
How to define prototype interactions inside components, such as buttons and switches that react when clicked or hovered.
How to build your first prototype and get it ready to test with real users, with best practices for beginners.