Airbnb Filters: Creating Advanced Prototypes in Play [Part 2]
1.3K views · 2025-07-06
Interaction & UX
📅 Get the feedback you've been looking for with my personalised 1:1 sessions: https://learnproduct.design/sessions
In this 2-part series, I’ll show you how to create fun, interactive prototypes using @CreatewithPlay. We’ll recreate the popular Airbnb Filters Interaction, and I’ll walk you through some of my favorite tips, tricks, and prototyping techniques along the way. Whether you're just getting started or looking to level up your skills, this series is packed with practical insights to help you build better, more engaging prototypes.
🔗 Part 1 - https://youtu.be/u3BMVTd9_6c
🚀 The Ultimate Guide to Becoming a Product Designer: https://learnproduct.design
🔗 App Clip Link (iOS) - https://appclip.apple.com/id?p=com.createwithplay.playgen3.Clip&pid=3e3355afc1a180Qcdq7&e=0
🔗 Figma File - https://www.figma.com/design/vmaWUZQ3d6CRIQuJ3BvPVv/Rive-and-Play-Tutorials?node-id=2851-158
🔗 Play Project File - https://dashboard.createwithplay.com/o/share3/3e3355afc1a180Qcdq7/design
🚀 Create an account on Mobbin for free:
https://mobbin.com/?via=chethan
📚 Chapters
00:00 Animating the 'All Pill'
07:34 Resetting the Primary Pills to Active State
10:45 Resetting the Secondary Pills
23:09 Resetting the Primary Pills Visibility
28:18 Resetting the Position of 'Experiences' Pill
30:12 Resetting the 'All Pill'
-------------------------------------------
Mega Product Design Course for Beginners:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1_kDOXCrEGmB58IsLOiIc3
Webflow Course for Beginners:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1N4PxzGE_ywogtBeeOaqc8
Photoshop Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ372RTmi1rQmfqbIqXr3opi
Illustrator Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ0pK595gwPLmcVF-P_jx0V1
After Effects Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ23p3SZD49unrbkh_F8q9Dk
UI Design Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1uHAE-_rAxeDMBnhzzmYuW
Design Resources, Tools and Softwares:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1-qY3TQToZWn3vYWVo6EA9
Adobe XD CC Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ11D_9_jX80GDenpMUWjTtv
eSports Design Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ3lLdkQmG-Ebw90KdChq56P
--------------------------------------------------------------------------------------------
Contact me :
Portfolio: https://chethankvs.design
Twitter: https://twitter.com/kvschethan
Instagram: https://instagram.com/design_pilot
Mail: designpilot21@gmail.com
Behance: https://behance.net/chethankvs
Dribbble: https://dribbble.com/chethankvs
--------------------------------------------------------------------------------------------
LIKE, SHARE, COMMENT & SUBSCRIBE :)
In this 2-part series, I’ll show you how to create fun, interactive prototypes using @CreatewithPlay. We’ll recreate the popular Airbnb Filters Interaction, and I’ll walk you through some of my favorite tips, tricks, and prototyping techniques along the way. Whether you're just getting started or looking to level up your skills, this series is packed with practical insights to help you build better, more engaging prototypes.
🔗 Part 1 - https://youtu.be/u3BMVTd9_6c
🚀 The Ultimate Guide to Becoming a Product Designer: https://learnproduct.design
🔗 App Clip Link (iOS) - https://appclip.apple.com/id?p=com.createwithplay.playgen3.Clip&pid=3e3355afc1a180Qcdq7&e=0
🔗 Figma File - https://www.figma.com/design/vmaWUZQ3d6CRIQuJ3BvPVv/Rive-and-Play-Tutorials?node-id=2851-158
🔗 Play Project File - https://dashboard.createwithplay.com/o/share3/3e3355afc1a180Qcdq7/design
🚀 Create an account on Mobbin for free:
https://mobbin.com/?via=chethan
📚 Chapters
00:00 Animating the 'All Pill'
07:34 Resetting the Primary Pills to Active State
10:45 Resetting the Secondary Pills
23:09 Resetting the Primary Pills Visibility
28:18 Resetting the Position of 'Experiences' Pill
30:12 Resetting the 'All Pill'
-------------------------------------------
Mega Product Design Course for Beginners:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1_kDOXCrEGmB58IsLOiIc3
Webflow Course for Beginners:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1N4PxzGE_ywogtBeeOaqc8
Photoshop Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ372RTmi1rQmfqbIqXr3opi
Illustrator Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ0pK595gwPLmcVF-P_jx0V1
After Effects Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ23p3SZD49unrbkh_F8q9Dk
UI Design Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1uHAE-_rAxeDMBnhzzmYuW
Design Resources, Tools and Softwares:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1-qY3TQToZWn3vYWVo6EA9
Adobe XD CC Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ11D_9_jX80GDenpMUWjTtv
eSports Design Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ3lLdkQmG-Ebw90KdChq56P
--------------------------------------------------------------------------------------------
Contact me :
Portfolio: https://chethankvs.design
Twitter: https://twitter.com/kvschethan
Instagram: https://instagram.com/design_pilot
Mail: designpilot21@gmail.com
Behance: https://behance.net/chethankvs
Dribbble: https://dribbble.com/chethankvs
--------------------------------------------------------------------------------------------
LIKE, SHARE, COMMENT & SUBSCRIBE :)