23 prototyping resources to bookmark right now
A powerful tool at every stage of product development, prototyping can take many different forms. These resources will help you level up your process, whether you’re new to prototyping or ready to dive deeper.
From pumping up a presentation, to conducting user research, to facilitating feedback from stakeholders, prototyping is instrumental in helping your team align on a shared vision. What you learn through prototyping helps you iterate and, ultimately, ship a better product.
On the heels of a suite of prototyping enhancements, we’ve curated a comprehensive list of resources to get you going on your Figma prototyping journey, from informative livestreams and hands-on community files, to quick videos and social posts. Whatever your learning style, you’ll find plenty to take your skills up a notch.
Cover the basics
Start with these primers to get a sense of how to use prototyping to calibrate and accelerate the product development process.
Video: Build prototypes (8 minutes)
Get an overview of building an interactive prototype, including animation and incorporating feedback from your testers.
Video: Prototyping playlist (50 minutes)
Dive into a snackable YouTube playlist that covers easing curves, transitions, smart animate, scrolling and device frames, and more.
Video: Prototyping 101 (63 minutes)
Learn about basic frame-to-frame navigation in prototypes as well as more advanced capabilities you can unlock with features like interactive components.
Video: Learning Figma as a product person (Part 1) (7 minutes)
See how to create a lightweight prototype as a non-designer working on the product side, and follow along in the community file below.
Video: Learning Figma as a product person (Part 2) (17 minutes)
In part two of the series, learn how to use transitions, smart animate, scroll behaviors, and other tips to help bring your prototypes to life.
Community file: Accessible prototypes in Figma
Discover Figma’s accessibility mode for prototypes, which means screen readers like VoiceOver (Mac) and JAWS (Windows) can read information about designs when you’re presenting them in prototyping mode.
Level up your presentations
Prototyping isn’t just about mocking up a product—it can also help you get the message across in a presentation for a boardroom or a classroom.
Video: Presenting with Figma (70 minutes)
Leverage prototyping to create dynamic slide presentations that engage your audience.
Video: Tips for presentations (2 minutes)
Bring interactive elements—like a mobile screen that actually scrolls—into your presentation by nesting prototypes within slides.
Video: Presenting with the Figma app (2 minutes)
See how to use the Figma mobile app to click through your slides.
Learn about video, motion, and flow
Bring videos into the canvas, animate your prototypes, and create dynamic transitions with these tips and tutorials.
Video: Using video in Figma prototypes (52 minutes)
Introduce a new level of polish and realism to a prototype by adding video while handling state management and continuity across frames.
Dive into the workshop with this starter file.
Video: Sections and prototyping (2 minutes)
Leverage sections in a prototype to preserve where a user is in a flow, allowing them to exit and reenter a prototype and continue where they left off.
Community file: Spring animations
Add spring animations to prototype transitions using our preset options.
Get started with this community file.
Video: Micro animations (8 minutes)
Learn the intricacies of micro animation by creating a heart icon that wiggles upon clicking.
Video: Prototyping overlay transitions (8 minutes)
Use interactive components to prototype overlay transitions for thumbnails.
Video: Sticky scroll (5 minutes)
Set up sticky scrolling for persistent banners and other elements in your prototypes.
Blooming flower effect
Create a field of flowers that sprout from the Figma canvas.
Go deeper with variables
Get into advanced prototyping with variables, which reduce complexity by slashing the number of frames you’ll need to realize your vision.
Video: Prototype with variables (13 minutes)
Start here if you’re first venturing into variables, which allows two new prototyping actions: set variable (change the value of any variable) and conditional (introduce if/else logic).
Video: Advanced prototyping (56 minutes)
Get more acquainted with variables and other advanced prototyping features by building an e-commerce experience.
Get the hang of variables, conditional logic, and expressions in this working file.
Video: Using variables in prototypes 101 (30 minutes)
Meet all the currently available variable types—booleans, numbers, text strings, and colors—and see how to bind string variables to interactive components.
Video: Variables in prototypes 201 (34 minutes)
Learn how to employ variable modes and conditional logic to create a more realistic shopping cart prototype that uses real math.
Catch up on office hours
We often hold live sessions to demonstrate new features, bring in outside experts, and troubleshoot problems. Here are some to revisit.
Video: Prototyping and user testing AMA (52 minutes)
Get tips for running a successful remote user testing session with prototyping.
Video: Get started with interactive components (52 minutes)
Learn how to level up your prototypes with reusable, shareable interactive components.
Video: Game UI prototyping with the prototyper plugin (57 minutes)
Discover how to leverage the prototyper plugin to prototype game designers from Aashrey Sharma, UX Designer at Epic Games.
Congratulations on taking your designs and presentations to the next level with prototyping. What other resources would you like to see? Reach out on X with your suggestions!
Ana Boyer is a designer advocate at Figma, where she is building community and empowering design teams across industries. She believes in collaboration and iteration and is always looking to build systems and establish processes where there is ambiguity.
Related articles
