Prototyping Crash Course - Learn how to create advanced prototypes with Figma variables in 30 min

Learn how to create advanced Figma prototypes using variables.
Get the Figma file here - www.figma.com/...
We'll walk through each type of variable (color variables, number variables, boolean variables, and string variables). And show you how you can update components in Figma using variables in your prototypes 💪
#figma #figmaprototype #prototyping #figmatutorial #figmacomponents #productdesign
🎨 Ready to become a better product designer? 👉 www.figma.academy
🐦 Discover more design deep dives on Twitter 👉 ridd_design

[@haneenelazab1220]

This is really brilliant! I hit my subscribe button just based on this video. You did an outstanding job explaining every little detail without boring stuff or adding extra non-essential fills. Thank you! Keep up the good work

[@ixhsyo]

This is a gold mine! Thanks @Ridd, now I see the value of variables and variants in taking prototyping to the next level! You explain concepts in a way that's easy to understand (just like you do in the Figma Academy courses!), and I really appreciate this. Excited to apply these to my projects.

[@ridd]

Glad to hear it 🙌 :)

[@stephangeier_]

Apart from a clear dive into variables, can't get over how beautiful your presentation Figma file is!! Thanks Ridd 🙂

[@virmanisandeep]

Thanks @Ridd this is an awesome deep dive crash course to learn Variables - Which covers when to use Bollean, Strings, Numbers and Haha Colors ! Also focuses on how to arrange and binds your variables sections to get whats needed! I am just reviewing the concepts again and again and getting better at Fundamentals ! Best Listening and Understanding comes at 0.75 speed. Sorry @Ridd but that my learing speed!

[@jakebarlow7431]

Good stuff, Ridd. Now that I'm back in product (and not design systems so much), I'm doing more prototypes.. This is super helpful!

[@artdawggy]

Thank you! For someone transitioning from Axure this is the best video I have found.

[@edgarasben]

This is great! I've missed some of the new Figma features over the past year, and this gave me a quick overview new cool tricks:)

[@troychurch4055]

Really outstanding instruction @Ridd. Bravo. Thank you!

[@tonyK_72]

wonderful video. Really cemented the concepts of variables. Great work. Thank you.

[@hroman_codes]

This was super helpful especially that checklist thank you 🤝

[@michellewren_]

Super helpful and easy to follow! Thank you!!!

[@henkegiaretta]

Amazing video, thanks a lot

[@ridd]

Glad you liked it!

[@timwalter3103]

This was so helpful - thanks!

[@aurelienfoutoyet5699]

Thank you very much !

[@SW-fh7he]

How do I get this into a react project? Do I need to code it or is the code itself already included in Figma? I don't quite understand it yet.

[@ridd]

Figma is mostly a visual representation of what is in code. You're going to have to create the React portion separately.