How To Prototype “Add To Cart” in Figma for a Realistic Design!
In this video, learn how to leverage simple Figma variables to make your cart in a mobile app interactive. Clicking add to cart button will actually add numbers to the badge on your cart. To allow this, I will show you how to:
2. Create Card component using Material UI
3. Refine card with autolayout, margin & corner radius
4. Fix image aspect ratio with plugin
5. Create Component & use instance in app
6. Nested auto layouts
7. Use plugin to change images
8. Make card list scrollable in prototype
9. Create Cart & badge
10. Use variables to add to cart
#figma #figmatutorial #figmaprototype #figmaanimation
-------------------------------------------------------------------------------
🔔 if you want to get the latest updates on new releases as soon as possible, make sure to subscribe but also CLIKC the BELL BUTTON so you get notified when I release new Updates.
-------------------------------------------------------------------------------
-------------------------------------------------------------------------------
🌸Learn more with Playlists🌸:
🌈 Complete Series Figma for Beginners 2025: • Figma Design for Beginners: Complete Course
🔥 Create a project for your Portfolio Playlist: • Figma Project for your Portfolio
🧘🏻♀️ UX/UI Design Career Playlist: • Career in UX/UI/Product Design
-------------------------------------------------------------------------------
Connect with me!
➡️ LinkedIn: / nehmatgereige
👩🏻💻 Portfolio: https://nehmatgereige.com/
🎓Book Free Mentorship time with me: https://adplist.org/mentors/nehmat-ge...
🌈 Figma Creations: https://www.figma.com/@nehmatgereige
-------------------------------------------------------------------------------
🧘🏻♀️ My Gear:
-------------------------------------------------------------------------------
LED Recording Light: https://amzn.to/4b3Ey6p
Microphone: https://amzn.to/3EUoFmC
MacBook Pro: https://amzn.to/40XXjUc
🌸 Disclaimer 🌸 The links from my gear above are amazon affiliate links which allow me to receive a small commission if you click on one of the product links at absolutely NO ADDITIONAL COST TO YOU.
-------------------------------------------------------------------------------
-------------------------------------------------------------------------------
--------------------------------------
⏰ CHAPTERS ⏰
00:00 #1. Introduction
00:35 #2. Create Card component using Material UI
05:15 #3. Refine card with autolayout, margin & corner radius
07:07 #4. Fix image aspect ratio with plugin
09:12 #5. Create Component & use instance in app
10:13 #6. Nested auto layouts
12:48 #7. Use plugin to change images
13:42 #8. Make card list scrollable in prototype
15:07 #9. Create Cart & badge
16:29 #10. Use variables to add to cart