This was a fun and challenging hands-on session about creating animations on a website in Figma. This is my first time using animations, I normally just create static, lifeless, and stationary websites, but seeing these subtle effects excites me to the realization that I can breathe life and spontaneity into my designs.

I also identified a flaw in my arsenal which is interaction design. I have to work daily and improve on it to become a world-class designer. I struggled to get the hang of it but after watching the resource a couple more times and practicing, it became clearer. I need more practice.

I am excited about animations and want to learn more about them. I did light research on Interaction Design and would share them here briefly.

What is Interaction Design?

This is an important component within the umbrella of user experience design. The goal is to create products that enable the user to achieve their objectives in the best way possible.

5 Proportions of Interaction Design

1. Words: These should be meaningful and simple to understand. We should not overwhelm the user.

2. Visual representation: These are the graphical elements users interact with.

3. Physical objects or space: The physical space the users are in e.g. is the user sitting at home while using the product?

4. Time: Yes this sounds abstract, it refers to the aspect of the interaction that unfolds over time such as animation, videos, and sounds.

5. Behavior: This is how the users react and interact with the product.

Key takeaways/learnings

Animations bring life to our designs and interactions. I have to improve my interaction design skills. I also discovered a resource to convert videos to gifs while maintaining an efficient file size and quality. I also added animations to a website I created a year ago to see how it works.

References

• "Basics of Interaction Design: YouTube." 22 Oct. 2019, https://www.youtube.com/watch?v=U7rS_2ch_Ps

• "Figma Smart Animate for Beginners (2022 Tutorial) (YouTube) 21 Jul. 2022, https://www.youtube.com/watch?v=thplNeqE9Tg

• "Figma for Education: Animation Basics in Figma (YouTube) 24 Feb. 2023, https://www.youtube.com/watch?v=02fO4qVnbc0

---

Thank you for reading my article, have a nice day 👋🏽