3.3 Create an interactive component in Figma to represent our animation in our Figma files

Try Figma today: psxid.figma.co...
Part of a business tutorial series. If you would like to view the public series you can check that out here: • UI Motion Design Course
In episode 3.3 You will turn that Figma toggle into an interactive component that you can use throughout your Figma designs.
We will be learning how to design a UI component in Figma, plan our animations and then even create an animated interactive component to use throughout our Figma designs.
We will then learn how to export the design from Figma to After Effects using a plugin called AEUX.
Once in After Effects we will learn how to animate our component correctly. Then when happy with the animation we can export it using the LottieFiles After Effects plugin so we have the production-ready animated asset that we can hand over to the engineers or use in our code.

[@PigeonTheDuck]

Great stuff, thank you!

[@jesscope2869]

Thank you for creating this amazing tutorial. 2:00 it seem Figma has fixed the deletion of interactions when creating a component set now :D

[@jamesyi8692]

briliant! I would love to see more of these series, where you start an animation from scratch. maybe something more advanced next.

[@WillBrettDesign]

Hey James. I have a few available already here:
FaceID Animation Tutorial + Free Figma Design Files
ua-cam.com/video/NQG3WErCGMc/v-deo.html

[@WillBrettDesign]

And here: How to animate a Touch ID - Free Design Included!
ua-cam.com/video/wo8KoDJPOyM/v-deo.html
Let me know if there are any others animations you would be keen to learn?
I’m an evangelist for LottieFiles so more than happy to create more tutorials

[@mrninko]

Love tutorials with mistakes 💪