Prototype and Animate Your Design with Smart Animate – Figma Tutorial

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:

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 👇

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 👇

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 👋

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

[JaviAlaves]

Hey all, thank you for tuning in on this video. 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. Regardless of the skills that you started with, I hope you had a chance to learn some new things and ultimately become a better designer! ✨

If you have any questions, comments or suggestions for this or future videos, feel free to drop them in the comments below, or schedule a call with me through the link in the video description. I'll see you again next week with more 👋

[daulatneupane]

Watched the whole series, definitely the best one I have found for Figma. The pace of the lessons is so good. And the contents has a really good scope. Loved it and learned a lot from it. Thanks Javier!

[jugibur]

Thanks, great tutorial for a beginner like me!

[ankitanand]

Great tutorial Javier👌Prototyping the search results scrolling action was so cool.

[mohabbatart]

Thanks' for your detailly and clear tutorial's.
It's so helpful and great.

[Naz-yibs]

Can you please make a video on the ultimate design system file. No matter how long it is, I will watch it and I am positive all your subscribers really like your teaching style and will watch it too. Thank you for all your content.

[nudos]

Hey Javi! I've been following your Figma video series lately, amazing job. I'm currently switching to Figma from Adobe XD. Is there any way to see interactive components (multi-state) like the ones XD have for Toggle and Hover? This is super useful in my workflow for prototyping as I don't need to duplicate/wiring up that many screens.

Also, it caught my attention that you mentioned Figma does not have a native scrolling option.

[tas]

Genuine question… due to the advance in technology when actually building these digital products, in my experience, it’s much faster to actually build the final product, live and hosted. Is there a change in the way UI designers work now? I understand it’s not faster in the sense from point a-b but the overall project is quicker when just building out the project. For example using web flow or elementor…

[brookeiam]

Hi Javier! Thanks so much for making these tutorials – they're SO helpful.

I have a question related to what you were talking about at 16:02 about how easy it is to delete properties from the component to achieve the design you're looking for. Is there just as easy of a way to add those properties?

For example, I'm currently designing an open accordion component that has two variants – an open accordion with the content being text & an open accordion with the content being table rows. For the table rows version, I included three table rows in the component. If the actual design only needs 1-2 table rows, it's easy to delete the third, but I'm having trouble adding more table row components. Is there a way to do this without having to have 12+ table row components nested within the main open accordion component?