Hi! Thanks for watching the video! We're glad to hear it helped you understand variables better in your prototypes. Keep experimenting-you're doing great! 🎉 Cheers!
Hi! We’re glad you enjoyed the tutorial! There’s so much to explore in Figma’s prototyping features. Keep an eye out for more advanced content coming your way! Cheers
For the disabled state of the button - I have that set up as a component with a VARIANT property - if I wanted to mimic this type of ecommerce prototype---do I make a new component set with variables (in addition) or can the variant properties of the component be linked to the conditional statements? In other words, does one need 2 layers: variant properties (states) for standard UI design---but then link those values to build a variables collection for advanced prototyping a you demonstrated?
Hi! Great question! Yes, you can use variants with properties for standard UI states and link them to conditional logic in advanced prototyping. However, when building a more complex e-commerce prototype with dynamic behavior, creating separate variables collections tied to these states (instead of just relying on variants) provides greater flexibility. Think of variants as static design options and variables as the dynamic logic driving user interaction. Combining them depends on the type of interaction you're building-use variants for standard designs and pair them with a variable setup for advanced interactivity. Hope this helps! Cheers!
@@envatotuts thanks. yes this is a topic not often discussed...relationship between variables & components. Wasn't sure if I need to start over or build from what I have currently..
For the component with the check-out buttons, under each variant on the right under "current variant" it says that this layer has an invalid name. Does anyone know how I can solve this problem?
Hey there, amazing video! I learned so much. If you wanted to increase the total items in cart at the top as you increase the quantity of a product to, let's say 3, would you apply that variable to the plus sign component?
Hi! Great question-yes, applying a variable to the plus sign component can update the cart total as you adjust product quantities! Just link the variable to update with each click, and it should reflect the total items perfectly. Glad you're enjoying the tutorial! 🙌🎉 Cheers!
question do I need to learn the advance prototyping if I will work as a designer? I mean they will use CSS /tailwind here anyway right? will I be able to get away with basic prototyping?
Hi! Learning advanced prototyping in Figma can definitely be beneficial, even if you’ll be working with CSS or Tailwind later. Advanced prototyping helps in creating more interactive and realistic designs, which can improve communication with developers and stakeholders. However, if you’re focusing mainly on design and handoff, basic prototyping might be sufficient. It depends on the complexity of your projects and how much interactivity you need to showcase. Hope this helps, cheers!
Great video, however my I can't make my component for increasing number of product specific to the product itself, they all increase/decrease simultaneously within the frame. I've followed your video exactly and I can't seem to work out where I'm going wrong. Anything I should check for?
Hi! It sounds like the issue might be related to how the variables are set up for your components. Double-check that each product has its own unique variable tied to the specific instance, rather than sharing the same one across all components. That should help! Cheers!
Hi! It's true that some advanced Figma features are part of the paid plans. However, you can still explore many of Figma's functionalities with the free plan. If you're interested in using variables and other advanced features, you might consider checking if Figma offers any trials or special promotions. Hope this helps, cheers!
i was looking for some figma tutorials yesterday to help with my work, i cant believe this just showed up to me
Perfect timing 😀💚
Super nice work! Just starting to get used to using variables in my prototypes and your video def helped me understand a lot of it. Thanks!
Hi! Thanks for watching the video! We're glad to hear it helped you understand variables better in your prototypes. Keep experimenting-you're doing great! 🎉
Cheers!
Great tutorial, I want to learn more complex about prototyping on figma
Hi! We’re glad you enjoyed the tutorial! There’s so much to explore in Figma’s prototyping features. Keep an eye out for more advanced content coming your way! Cheers
good tutorial, thanks
Glad you liked it
For the disabled state of the button - I have that set up as a component with a VARIANT property - if I wanted to mimic this type of ecommerce prototype---do I make a new component set with variables (in addition) or can the variant properties of the component be linked to the conditional statements? In other words, does one need 2 layers: variant properties (states) for standard UI design---but then link those values to build a variables collection for advanced prototyping a you demonstrated?
Hi! Great question! Yes, you can use variants with properties for standard UI states and link them to conditional logic in advanced prototyping. However, when building a more complex e-commerce prototype with dynamic behavior, creating separate variables collections tied to these states (instead of just relying on variants) provides greater flexibility. Think of variants as static design options and variables as the dynamic logic driving user interaction. Combining them depends on the type of interaction you're building-use variants for standard designs and pair them with a variable setup for advanced interactivity. Hope this helps! Cheers!
@@envatotuts thanks. yes this is a topic not often discussed...relationship between variables & components. Wasn't sure if I need to start over or build from what I have currently..
For the component with the check-out buttons, under each variant on the right under "current variant" it says that this layer has an invalid name. Does anyone know how I can solve this problem?
Useful stuff
Thanks a lot
Hey there, amazing video! I learned so much.
If you wanted to increase the total items in cart at the top as you increase the quantity of a product to, let's say 3, would you apply that variable to the plus sign component?
Hi! Great question-yes, applying a variable to the plus sign component can update the cart total as you adjust product quantities! Just link the variable to update with each click, and it should reflect the total items perfectly. Glad you're enjoying the tutorial! 🙌🎉
Cheers!
how does the cart total work? how does it get the total of all the product total across different modes to get the overall total
nvm I get it now
question do I need to learn the advance prototyping if I will work as a designer? I mean they will use CSS /tailwind here anyway right? will I be able to get away with basic prototyping?
Hi!
Learning advanced prototyping in Figma can definitely be beneficial, even if you’ll be working with CSS or Tailwind later. Advanced prototyping helps in creating more interactive and realistic designs, which can improve communication with developers and stakeholders. However, if you’re focusing mainly on design and handoff, basic prototyping might be sufficient. It depends on the complexity of your projects and how much interactivity you need to showcase.
Hope this helps, cheers!
@@envatotuts great point. I will probably focus on development for a while and try this advance prototyping on my free time if there will be any 😁😁
Great video, however my I can't make my component for increasing number of product specific to the product itself, they all increase/decrease simultaneously within the frame. I've followed your video exactly and I can't seem to work out where I'm going wrong. Anything I should check for?
Hi! It sounds like the issue might be related to how the variables are set up for your components. Double-check that each product has its own unique variable tied to the specific instance, rather than sharing the same one across all components. That should help!
Cheers!
Please upload fully responsive landing page design 😢
i can't use figma with these feature because they are not free
Hi!
It's true that some advanced Figma features are part of the paid plans. However, you can still explore many of Figma's functionalities with the free plan. If you're interested in using variables and other advanced features, you might consider checking if Figma offers any trials or special promotions.
Hope this helps, cheers!
please share the Figma community file.
Hi! You can find the files in the description.
Cheers!
please make the project files free for everyone
👍🏻