Bring your design alive with Figma prototyping. In this deep dive, we will learn everything about creating basic prototypes, smart animating in Figma, re-usable interactive components, and how to share and document.

I will provide you with a Figma file, that lets you follow alongside me during the videos or return to exercises with detailed instructions in your own time.

This course is for you if you have a basic knowledge of Figma or if you are an advanced Figma user and want to improve your prototyping skills.

Prototyping Basics

Config 2023 feature update overview NEW
The Figma Prototype workspace
Where should my prototype live?
On-screen device preview
Fixed and scrollable elements
Nesting frames for presentations
Horizontal and vertical scroll
Linking screens
The back action
Scroll to
Overlays
Linking to external pages
Action triggers
Figma animation options
Easing curves
Sections and stateful design
Flows in Figma
Adding videos to prototypes
Preview on your mobile

Smart Animate with Figma

Smart animate in Figma
Smart animate and moving animations
Limitations of smart animate
Let's build a smart animated app
Remember: Animate with purpose and code in mind

Interactive Components

Interactive components
Nesting interactive components
Easy hover and zoom animations
Video interactions
Interactive components and auto layout
Funnel components

Prototyping with Variables

Prototyping with variables NEW
Variant swap with variables NEW
Expressions NEW
Interaction chaining NEW
Conditional statements NEW
Conditional statements and booleans NEW

Documenting and Sharing Figma Prototypes

Document prototypes with flows
Sharing prototype links
Documenting interactive components for handoff
Embedding in external documentation

© moonlearning.io with moon learning / moonlearning

Sanjib Mondal

--

5