Adding more than 4 Products to a Cart in Figma
In this blog post, I want to share how I tackled a common challenge when building an interactive Add-to-Cart flow in Figma using advanced prototyping features like local variables, conditionals, and expressions. Inspired by this video tutorial, I followed the steps to create a working Add-to-Cart flow with 4 products. However, the free version of Figma has a limitation—it only allows interactions for up to 4 products. If you want more, you’d have to upgrade to the paid version, which costs around €70 per month.
Since I didn’t want to pay for the upgrade, I set out to find a workaround that would allow me to add more than 4 products using Figma's free plan. Below is how I overcame this challenge and managed to include more products in the Add-to-Cart flow.
1. Setting Up the Initial 4 Products
First, I followed the steps in the video to create an Add-to-Cart system for 4 products using Figma’s prototyping tools. I set up local variables for each product—things like ItemCount, Price, and FullTotal were created to track how many of each product was added to the cart and calculate the total cost.
I also linked these variables to Add and Minus buttons, which adjusted the quantity of each product in the cart. This initial setup worked perfectly, but I wanted more than 4 products.
2. Expanding Beyond 4 Products with a New Product Category
To solve this, I decided to create a new product category (which I named products2) using local variables, just like I did with the original 4 products. This allowed me to define 4 more products. Each product in this second category had its own variables like ItemCount2, Price2, and so on, essentially mirroring the setup from the first group of products.
By doing this, I was able to increase the number of available products from 4 to 8, without needing to upgrade to the paid version of Figma.
3. Duplicating Components and Reusing Interactions
With the new product category set up, I had to duplicate the Add and Minus buttons, along with the single product component that handles interactions for the new products. This duplication was necessary to ensure that the second set of products could be interacted with separately from the first set.
I then updated all the relevant interactions for this second group of products. For example, just like in the first set, when a user clicked the Add button, the quantity (ItemCount2) would increase, and when they clicked Minus, the quantity would decrease.
4. Linking Everything Together: Updating Interactions
Once I had set up the additional products and duplicated the necessary components, I needed to integrate the new products into the overall Add-to-Cart system. This involved updating the interactions that calculated the FullTotal (the total cost of all items in the cart).
In the original system, the total was calculated using the ItemCount and Price of the first 4 products. Now, I had to update the "Set FullTotal to ItemCount" interaction to include the new variables (ItemCount2, Price2). This way, both the original 4 products and the new 4 products contributed to the overall cart total.
By doing this, I ensured that the cart could handle 8 products instead of just 4.
5. Final Thoughts: The Power of Local Variables and Components in Figma
In summary, while Figma’s free version has limitations when it comes to the number of products you can include in an interactive flow, I was able to bypass this by creating multiple product categories and duplicating key components. By using local variables, conditionals, and expressions, I managed to extend the functionality without upgrading to the paid version. Can also be used to go further to 12, 18, etc. products.