Recreate Airbnb’s Home Match Animation in Figma (Prototyping Tutorial)
I was browsing DesignSpells and saw that AirBnB has a really simple, but engaging pop in animation when there's a home match. Soooo here's how to remake it in Figma prototyping!
It all starts by setting up the calendar. From there, make 3 squares in an auto layout and rotate each individually. This makes the ui design feel like a stack of photos.
Buttt we want to animate them. so pull it out of the design and setup a few animation frames: one that is the placeholder, then another that pops in the matching photo. You'll stagger the animation delay a bit and then when a button is clicked, turn a boolean active so that it fires the animation.
Want more interaction design tutorials like this? I'm thinking of making a longer tutorial that breaks this down step by step. Let me know if I should make that!
#figmadesign #figmaprototyping #uiux