UI: Shopping Cart(Bag) | No-Talk Series | Figma Tutorial
1.2K views · 2023-08-05
UI Design
In today’s “No-Talk Series”, let’s look at how to make a shopping cart (bag) UI element, including using the Figma App to test out the design.
Design file: https://drive.google.com/file/d/1QeZ-alt53RuVoY9gG9RThR4Q_yoVWGlf/view?usp=sharing
Support me on Ko-fi: https://ko-fi.com/alandesign
---------------------------------------------------------------------------------------------------------
0:00 Design starts
0:07 Build the cart item amount circle
1:20 Create an auto layout for the icon button
1:48 Bring cart item amount circle into the icon auto layout group
2:11 Use absolute position for the icon circle element
3:14 Create component
3:23 Create boolean property
4:04 Create variants
4:32 Set up variants prototypes
5:38 Test the design on desktop
5:55 Test the design using the Figma App
6:56 Ending & Support
---------------------------------------------------------------------------------------------------------
#figmatutorial #figmaShoppingCart #figmaEcommerce #figmaUIcheckout
Design file: https://drive.google.com/file/d/1QeZ-alt53RuVoY9gG9RThR4Q_yoVWGlf/view?usp=sharing
Support me on Ko-fi: https://ko-fi.com/alandesign
---------------------------------------------------------------------------------------------------------
0:00 Design starts
0:07 Build the cart item amount circle
1:20 Create an auto layout for the icon button
1:48 Bring cart item amount circle into the icon auto layout group
2:11 Use absolute position for the icon circle element
3:14 Create component
3:23 Create boolean property
4:04 Create variants
4:32 Set up variants prototypes
5:38 Test the design on desktop
5:55 Test the design using the Figma App
6:56 Ending & Support
---------------------------------------------------------------------------------------------------------
#figmatutorial #figmaShoppingCart #figmaEcommerce #figmaUIcheckout