Variable Prototyping - Figma E-commerce Store | Figma 2025 advanced prototype
17.3K views · 2025-09-09
UI Design
🚨Follow along with this Figma file - https://www.figma.com/community/file/1503494638419844778
Thanks for watching, TD 💛
☕️ Buy me a tea → https://buymeacoffee.com/tdsunshine
🔎 Get 20% off Mobbin → https://mobbin.com/tdsunshine
👾 My gear & links → https://linktr.ee/tdsunshine
🍿 _WHAT TO WATCH NEXT_ :
1. *Variables best practice* - https://youtu.be/WMDJY86RhLo
2. *Figma Pen Tool* - https://youtu.be/6FFvZpu7jQ4
3. *Basic Prototyping in Figma* - https://youtu.be/xfHJtVXtE-g
🌼 _CHAPTERS_ :
00:00 Intro
00:22 Set up variables and modes
02:09 Fruit database
03:28 Select an image
05:13 Shop page
06:05 Add to cart
07:33 Add an item
08:26 first preview
10:07 Show item in cart
11:27 Counting items
13:44 Cart variables
16:37 Calculating the total
17:45 Removing an item
18:58 Stop the minus
22:01 Shiny extras
22:10 Cart full
24:52 Cart empty
🤗 Disclosure: This video and description may contain affiliate links, meaning I'll receive a small commission if you click on one of the product links. I'm also an Amazon Associates affiliate and will earn a commission on qualifying purchases. 💛 This is at no additional cost to you.
#figmatutorial #figmadesign #figma_tutorial #figmatutorial #figmatips #figma #figmaupdate #config #config2024 #figma2024 #designtokens #tokens #variables
Thanks for watching, TD 💛
☕️ Buy me a tea → https://buymeacoffee.com/tdsunshine
🔎 Get 20% off Mobbin → https://mobbin.com/tdsunshine
👾 My gear & links → https://linktr.ee/tdsunshine
🍿 _WHAT TO WATCH NEXT_ :
1. *Variables best practice* - https://youtu.be/WMDJY86RhLo
2. *Figma Pen Tool* - https://youtu.be/6FFvZpu7jQ4
3. *Basic Prototyping in Figma* - https://youtu.be/xfHJtVXtE-g
🌼 _CHAPTERS_ :
00:00 Intro
00:22 Set up variables and modes
02:09 Fruit database
03:28 Select an image
05:13 Shop page
06:05 Add to cart
07:33 Add an item
08:26 first preview
10:07 Show item in cart
11:27 Counting items
13:44 Cart variables
16:37 Calculating the total
17:45 Removing an item
18:58 Stop the minus
22:01 Shiny extras
22:10 Cart full
24:52 Cart empty
🤗 Disclosure: This video and description may contain affiliate links, meaning I'll receive a small commission if you click on one of the product links. I'm also an Amazon Associates affiliate and will earn a commission on qualifying purchases. 💛 This is at no additional cost to you.
#figmatutorial #figmadesign #figma_tutorial #figmatutorial #figmatips #figma #figmaupdate #config #config2024 #figma2024 #designtokens #tokens #variables