Prototype and Animate Your Design with Smart Animate – Figma Tutorial
Javier Alaves Javier Alaves
6.74K subscribers
3,490 views
0

 Published On Jan 27, 2021

Learn how to make your design come to life with prototyping and animation, with Smart Animate in this Figma tutorial! At last! ✨

This is the seventh and last video of my Figma series on the Google search experience, where I've committed to prototype a Google search from scratch with all of you here on YouTube. In this video, we'll be covering how to leverage everything we've learned across this series to prototype and animate a Google search in 30 minutes! 🚀

Previous videos of the series:
1/ Figma Basics -    • Designing with Figma – A Beginners' H...  
2/ Responsive Design with Auto Layout and Constraints -    • Responsive Design with Auto Layout an...  
3/ Color Styles -    • Creating a Functional Color System in...  
4/ Text Styles -    • Creating Text Styles in Figma - Infor...  
5/ Components and Variants (Search component) -    • Components and Variants in Figma – De...  
6/ More Components with Variants and Auto Layout -    • Components with Variants and Auto Lay...  

If you want to follow along this tutorial with the file open, you can create a duplicate from the link below by clicking on the arrow next to the file title in the top-middle area 👇
https://www.figma.com/file/R63V9xnwQs...

A flow is worth more than a thousand frames. Prototyping and animation are essential skills for designers looking to sparkle up their designs with interactive triggers and actions, without having to write a single line of code. I've tried to put as much thought into this video as possible, to give you a full view of how I personally animate my designs, for both personal and professional projects.

Was this video helpful? Do you have any questions about prototyping, smart animate, or anything specific about Figma that you'd like to see in future videos? Any suggestions to improve my videos? Drop them in the comments below! 💬

Thank you, everyone who's been following this Figma series! As mentioned at the end of the video, if you'd like to get on a call with me and share your thoughts about the series or talk design and other things you're interested in learning or doing this year, you can schedule it here 👇
https://calendly.com/designbyjavi/call

If you are new to my channel, and you'd like to keep up with my weekly dose of product design videos and tutorials, don't forget to hit that subscribe button! There's so much good stuff coming 😇

Connect with me here 👋
Twitter:   / javalaves  
Figma: https://www.figma.com/@javi

Chapters:
0:00 - Intro
0:45 - Component updates
2:56 - Home Prototyping
5:35 - Search Results Prototyping
20:32 - Smart Animate review
24:20 - Cards carousel animation
27:46 - Scroll prototyping & animating
38:30 - Conclusion

show more

Share/Embed