Skip to content
UdemyFigmaPaid courseAll LevelsCertificate

Figma Prototyping: A deep dive for UX/UI Designer (Udemy.com)

Beginner to advanced: Basic prototypes in Figma, * NEW VARIABLES!*, smart animating, interactive components, documenting

Created by: Christine Vallaure

Last updated January 2025

icon
What you will learn

  • Setting up basic clickable prototypes for showcasing and testing
  • Smart Animate with Figma
  • Interactive Components
  • Documenting and Sharing Figma Prototypes
  • A lot of tips tricks and hidden treasures

icon
Quality Score

No CourseDuck member has rated this course yet. Taken it? Give each part a thumbs up or down.

Content Quality
/
Video Quality
/
Qualified Instructor
/
Course Pace
/
Course Depth & Coverage
/

Overall Score : 92 / 100

icon
Course Description

Figma Prototyping: A deep dive for UX, UI Designer

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, stunning interactions with variables, expressions and conditional statements and how to share and document.

We'll start with the basics and learn how to connect our screens, add different scrolling behaviours, and preview our design, as well as some tips and tricks to present your prototypes.

We will explore the different triggers, animation types and how to create a stateful design with the help of Figma sections.

We will move on to smart animate the magic part prototyping in Figma. I'm going to show you all of smart animates superpowers and we're also going to talk about their limitations and do some troubleshooting.

Then we will learn how to set up micro-interactions with interactive components in Figma. This will save you a lot of time when it comes to adding standard behaviour to instances across your design. And that's also where Figma unleashes its truly impressive potential, namely when combining auto layout, smart animate and interactive components.

Finally, I'll show you tips and techniques for documenting and sharing your prototypes for handoff, and we'll take a look at interactive component documentation in Figma as well as external design systems.

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

  1. Whats new since Config 2023 Update *NEW*

  2. The Figma Prototype workspace

  3. Where should my prototype live?

  4. On-screen device preview

  5. Fixed and scrollable elements (New Figma April 23 release!)

  6. Fixed headers (New Figma April 23 release!)

  7. Nesting frames for presentations

  8. Horizontal and vertical scroll

  9. Linking screens

  10. The back action

  11. Scroll to

  12. Overlays

  13. Linking to external pages

  14. Action triggers

  15. Figma animation options

  16. Easing and spring animations

  17. Sections and stateful design

  18. Flows in Figma

  19. Adding videos to prototypes

  20. Preview on your mobile


Smart Animate with Figma

  1. Smart animate in Figma

  2. Smart animate and moving animations

  3. Limitations of smart animate

  4. Let's build a smart animated app

  5. Remember: Animate with purpose and code in mind


Interactive Components

  1. Interactive components

  2. Nesting interactive components

  3. Easy hover and zoom animations

  4. Video interactions

  5. Interactive components and auto layout

  6. Funnel components


Prototyping with Variables

  1. Prototyping with variables *NEW*

  2. Variant swap with variables *NEW*

  3. Expressions *NEW*

  4. Interaction chaining *NEW*

  5. Conditional statements *NEW*

  6. Conditional statements and booleans *NEW*


Documenting and Sharing Figma Prototypes

  1. Document prototypes with flows

  2. Sharing prototype links

  3. Documenting interactive components for handoff

  4. Embedding in external documentation



icon
Udemy Discount

The discount is applied through our link. Open the course from here and Udemy's current promotional price is applied at checkout on most courses, no code to type.

Some courses are excluded from Udemy's promotions. If the price does not drop, clear your browser cookies and use the button again.

icon
Instructor Details

Christine Vallaure

I’m Christine Vallaure, founder of moonlearning. I run it as a deliberate solo business. Supported by smart automation and AI, but deeply human at its core. Every course is crafted and taught by me.

I’ve spent 15+ years in design and product. Agencies, startups, global brands, and my own products. I’ve been excited, stuck, overwhelmed, and back at square one more than once. Tools move fast. Expectations grow. It’s easy to feel like you’re always catching up.

What changed things for me wasn’t learning every new feature. It was understanding what’s happening under the hood. Not to become an engineer, but to design with clarity and control.

That’s what I teach. Practical skills that help you move faster without losing craft.

✔️ 15+ years in design and product (BMW, P&G, MetaDesign)

✔️ 2× Figma Config speaker

✔️ Awwwards Jury Member

✔️ International speaker on design-dev collaboration and solo building

✔️ Author of the Solo

Follow me on:
moonlearning(dot)io


icon
More courses by Christine Vallaure

$74.99

$64.99

$69.99

icon
More Figma courses

$124.99

$149.99

$109.99

$74.99

$69.99

Free

icon
Reviews

4.6

461 ratings on Udemy

Select a bar to show only those reviews.Select the bar again to show every rating.

By Pooja Joshi on 11/1/2024

Christine is an excellent instructor who really understand what matters most. her UI design is clean, simple and highlights only the essential elements, allowing us to focus on the contain without getting distracted by flashy details She meticulously documents everything in Figma, saving me the time and effort of taking additional notes I absolutely loved her teaching style and have already purchased her responsive design and motion design course. I'm excited to explore her other course too! Thank you!

By WATANABE Fumie on 10/15/2024

This deep dive course, as the name suggests, goes beyond beginner's level. Even though I still need a lot of practice, I was able to follow along through a gradual step-by-step guidance. I was able to stop and understand why certain actions do not work and what needs to be done to solve the problem. I will revisit the course as I encounter a real situation in Figma journey. Thank you!

By Niara Frossard on 10/13/2024

I've been using Figma for a bit, and my prototypes were getting kinda stale, you know? Just the basic stuff. But this course? Game-changer! It seriously helped me step up my prototyping game. I especially loved diving deeper into prototyping with variables and conditionals – that was some next-level stuff! Christine is an amazing teacher, she explains everything so clearly, even the tricky bits. Totally recommend this course!

By Monalisha on 8/29/2024

I found this course to be incredibly informative and well-structured. The detailed explanations and examples made the complex topics easy to understand. I appreciated the pace of the course, which allowed me to grasp the material without feeling overwhelmed. I have no questions remaining and feel confident in my knowledge of the subject matter. Thank you Christine! Love your work ❤️

By Wesley Mitchell on 1/17/2024

The course has a lot of good information. I'd prefer if there were more hands on portions to help reinforce the learning (some sections are just demonstrations). Overall I am learning a lot.

By Suzelle Bugden on 12/2/2023

This course delivers an exceptional understanding of prototyping in Figma. My main suggestion is to incorporate examples of standard interaction patterns for UI, such as the use of push interactions in mobile navigation and defining transition durations. While the theoretical lessons were fantastic, more practical insights into device-specific interactions would enhance the overall learning experience.

By Alex U. on 12/2/2023

The course was very helpful. Without any prior experience in prototyping I have been able to create complex prototypes in Figma within a week. The course is well structured incrementally. The instructor, Christine presents the material in clear and precise manner. Non native English speakers will have an extra benefit from perfect British accent. Source files with all exercises presented in the course are included.

By Roopal Khare on 11/2/2023

The course was clear and precise. It covered all basic, intermediate and advanced prototyping elements in figma. I did skip variables because I had no knowledge about it in general and figma decided to make it a paid feature. But the highlight was the instructor who was quick to answer the questions so I wasnt stuck around pondering what to do next :) Overall I now feel more confident in protoyping. I also ended by taking another course from moonlearning :D

By Steve Carlton on 8/9/2023

The production quality of the video and exercises are great. The instructor has a strong grasp of the material and it's usually communicated well. The content presented is an interesting mix of Figma skills for beginners but also brushing by some higher level concepts without fully putting them in full context. Whether purposeful or not, it does feel like an upsell to her other videos. I think this series is really best for people new to Figma, but have some kind of visual background or can pick up new software tools easily and maybe be familiar with some basic programming logic. The instructor touches on some programming concepts in the variables section and I could imagine it being hard to follow along if you are unfamiliar with conditionals, but rewinding and the practice files may help. I finished the course, but I'd look elsewhere for something more comprehensive in scope at a higher skill level, such as building a prototype from start to finish, creating and implementing a design system, and developer handoff.

By Maggie Douglas on 5/9/2023

This is the second course I've taken with Moonlearning and - with each course - I learn SO MUCH. I plan on taking many more. The pace is ideal, the quality of instruction is stellar, and the course materials are spot on. The tips and tricks are an added bonus...answering crucial questions I have had from the get go. I plan on taking several more in the Figma learning series - which will no doubt afford me a well rounded and layered understanding of this application.

Showing all 10 reviews on CourseDuck

Read all 461 reviews on Udemy