Create Interactive Bento Animation | Beginner Figma & LottieFiles Tutorial

Dayo Oyinlola·Jun 8, 2026·1 hr 47 mins 38 secs

Learn how to easily make interactive Bento Animations with Figma & Lottie Creator. I'll walk you through all the design and animation steps one by one.

By the end of this video, you should be able to create your own interactive bento animations even if you've never used Figma or Lottie Creator before.

The links to all resources used in the video are below.

Resources:
Figma Design File (Duplicate this): https://www.figma.com/design/b6O0uxc4cEVKEU0T5oj5fT/Free-Bento-Card-Animation-Design/duplicate

LottieFiles Animation Link: https://lottiefiles.com/free-animation/interactive-bento-card-animation-multi-social-media-platform-post-uGQH6kY9Bm

Free Grid Designs: https://www.figma.com/community/file/1378367879687492012/10-grid-background-fully-editable
...
📺Watch Next:
...
🌐Connect with me:
Email: [email protected]
My website/blog: https://www.dayooyinlola.com
LinkedIn: https://www.linkedin.com/in/dayooyinlola
Instagram: https://www.instagram.com/oladayooa
Facebook: https://www.facebook.com/oladayooa
TikTok: https://www.tiktok.com/@dayooyinlola

⌚Timestamps:
Intro - 00:00:01
Animation Showcase - 00:00:37
Design in Figma - 00:02:23
Animation in Lottie Creator - 01:01:30
Adding Interaction with State Machines AI - 01:36:31
Exporting Interactive Animation - 01:42:08