Quick tip: for the Purchase A License example it would have been better to make the Cost the cost of a seat $39 and then add a totalCost which would have bean seatCount * Cost. It's more future proof because if the seat cost changes, you only need to change one variable
23:00 Just a quick tip: you do not necessarily have to choose a different transition mode. You just need to move the _Set Variable_ interaction up (so that it comes before animation).
After evaluating their new tool it might take more than that, there is more needed to be compared with protopie or framer, etc at this point is good for layout
If anyone else was getting a negative cost value - repeat the same steps that stop the #SeatCount. So: Add a conditional If #Cost != 0 Set Variable --> #Cost-39 Great tutorial thank you!
Thank you so much for the tutorial. I especially enjoyed and learned a lot from the mistakes you made while trying to teach. It helped me understand the process and also troubleshoot what steps I missed or didn't add while I tried to replicate. Thank you! ❤
On project four, the reason you couldn’t use smart animate was because of the order of the prototype triggers. Any trigger that deals with “change to” has to be last in the list If you’re using variables + smart animate
Great video, very easy to follow. Along with this and other figma elements admittedly I've been feeling a little overwhelmed recently, content like this is a great help, subscribed
Great video! 😊🙏 instantly helped to improve the prototype I'm working on 🥳 one thing I have a question about, in case there are multiple cases in the design where the like button would be used, is there a way to make each of them independent from each other without having to create a separate number variable and individual component to each use case? Now if I apply same component throughout all of the items, once the like button is clicked on one of them, the like count is increasing for all. Would really appreciate a tip on how to solve that 😊
Hi, I was thinking while watching your UA-cam videos, but I'm not sure if it's better to just study framer or write a program like jitter or learn pygma prototyping. Are there any more lectures or courses that combine components and prototyping? If there are several advanced lectures, I'd like to take them. I'm not very good at English, so I used a translator, so please understand. I want you to comment. Thank you for the great videos. I hope you're always happy.
Thanks for putting this together! I found it very helpful. Quick question: In the case of the Boolean toggle, do you need to create a separate toggle component for each Boolean being applied? For example, if there were two avatars instead of one and I wanted one to be visible while the other is not, would I need to two separate components or can it be done with two instances of the same component?
Great video! Is there a way to publish these interactions with conditions and variables to a team library? When I use these components in my projects the interactions don't work
Figma and prototyping is querky at best. It's also very unstable, always been. Take notice of what happens to any element with a hover event attached for instance, they change their position ever so slightly, resulting in the typical Figma "tremble" effect. Look @21:30 - both label and checkbox move on hover.
That mostly happens in the new preview mode. If youre following this tutorial try launching the prototype in Present mode or simply expand the Preview window so the content inside has that extra margin and it should work without trembles
@@facuh3o Actually when viewing prototype in the old manner in the separate section that has a menu, the frames skips all the time. When clicking from frame to frame it skips hugely, impossible to keep the same coordinates. That goes for 100% and zoom. I've never seen a worse prototyping tool than Figma and I always miss XD for prototypes. I'm forced to use Figma due to the current project I'm in now. To me Figma is more for system based design, administrating design systems and collaborations. But prototyping and simulating user flows is a true nightmare.
Awesome course! I only run in to a problem when I work on the toggle to switch between light and dark mode. I followed all the steps in the tutorial but for some reason the background color will not change and stays the same blue color... What am I doing wrong?
I faced this problem too. Turns out the issue was, I had selected the "toggle" element for adding an interaction, whereas you have to choose the entire frame with the words and toggle. That seemed to do the trick :)
For the Dark Mode Toggle section (or for color variables in general), is it possible to do a color FADE instead of an instant swap? I suppose I don't really understand why the color variable change wouldn't come with an option to set it to "smart animate" The specific use case for me is...I want to animate one of my color styles upon the click of a button. I can currently do that by doing a "set variant" action, but it is instantaneous. I couldn't find any other way to pull this off, as Figma doesn't allow you to tie the visibility of a fill layer to a Boolean within a color style.
Great tutorial. i find the whole variables thing in figma to be quite overcomplicated. Lets say i would like a component that contains two versions of a card; unselected and selected. i have a button that is outside of this component, but i want said button to control what version is being showed based on click on or off. You would think you could set up the state of the card variants (unselected === false, selected === true) then set the button variable to set that boolean to true....and that is it. but no?
Very insightful, and easy to follow. In the second example, you didn't touch on how you connected the +1 variable to the overall cost ($39). I understand the +1 and -1 variables, but how did we connect +39 such that when we increase the number of items in the cart, it increases the cost? Can you provide some clarity please?
a lot of this just feels like adding extra steps to simple interactions. like the avatar one, why cant you just have the avatar hidden in previous states. what benefits does having all these variables to do what we could do before.
#3 toggle did not work for me. back ground color will not change Update: The smart animate setting doesn't allow it. I had to turn it back to instant. Seems like a bug Figma will need to fix, eventually
What‘s the benefit of the Show avatar variables? Before doing the exercises I did my own version, I just create a component showing the avatar and checked box and a variant with an unchecked box and 0 opacity avatar, then connect both through a click animation and is basically the same with less steps.
I'm really on the fence with this. Devs have never needed this much fidelity on handover. To spend all this additional time visually hooking up variables/conditionals/loops & booleans etc seems like a waste when we already have the assets to develop? Time better spent by contributing to the repo unless the client has categorically stated they NEED a high-fi prototype 🤷♂
Hello! Thanks for the video. I have a problem. When I select the Avatar layer and go to the little eye next to layers, it just turns the visibility on and off, there is no variables menu or anything. What am I doing wrong? Thanks
Hey Teresa, he explained in the video in order to apply the boolean value that turns off and on the avatar, you need to go to the "Layer Panel" and "Right-click" on the eye icon that on the right of the layer to apply that boolean, hope that helps. :3
To be honest with you, I hated figma and hated this whole field, and I no longer have any enthusiasm for learning new things in it. What we do in months, after what we learn, a tool appears that summarizes this in a minute. This is very frustrating. Add to that the ease of creating a design in the future, which will make the profession of designer a normal profession. From the designer, learn the code. God Almighty alone knows what this matter will lead to
Designers who have never had to deal with a minimum of programming be like: 💀🫠 We are not at ProtoPie levels, but it is a tremendous improvement 💪 Question 1: so advanced prototyping, in the case of the avatar, still does not work with the smart animate option? Question 2: I have always built component sets by also inserting Dark Mode via a Boolean property that allowed the component to be switched between light and dark. Now with variables you say there is no longer a need for this, or do these options have to be used in pairs?
Who else thinks it's just a matter of time before Figma competes in the no code space? Ie webflow/framer
Exactly what came to mind watching .. Yes
I've already seen someone make a playable Flappy Bird in Figma so, yeah, absolutely.
They're already partnering with Framer so I wouldn't be surprised if they expanded on that partnership to compete more in that space.
Quick tip: for the Purchase A License example it would have been better to make the Cost the cost of a seat $39 and then add a totalCost which would have bean seatCount * Cost. It's more future proof because if the seat cost changes, you only need to change one variable
23:00 Just a quick tip: you do not necessarily have to choose a different transition mode. You just need to move the _Set Variable_ interaction up (so that it comes before animation).
I've been scared of this for months and your video fixed that in 30 minutes!🥳
Figma is definitely going to become a no-code tool by next year
my thought exactly
After evaluating their new tool it might take more than that, there is more needed to be compared with protopie or framer, etc at this point is good for layout
Best crash course on Variables and Conditions I've found. Thanks! 👏
If anyone else was getting a negative cost value - repeat the same steps that stop the #SeatCount.
So: Add a conditional
If #Cost != 0
Set Variable --> #Cost-39
Great tutorial thank you!
Thank you so much for the tutorial. I especially enjoyed and learned a lot from the mistakes you made while trying to teach. It helped me understand the process and also troubleshoot what steps I missed or didn't add while I tried to replicate. Thank you! ❤
On project four, the reason you couldn’t use smart animate was because of the order of the prototype triggers. Any trigger that deals with “change to” has to be last in the list If you’re using variables + smart animate
Super helpful, thanks!
Omg thank you! i had a hard time trying to find how to do this :) super clear.
Thank you so much, Gary! This is incredible and now I understand how to work with variables and advanced prototyping. Thanks again.
Truly enjoyed this tutorial. You made so many errors, I was laughing while learning it. Amazing work, thank you!
You deserve the very best, you have really improve my skill. Once again thank you.
22:15 I was laughing so hard in the room 🤣🤣🤣🤣🤣 Why are you in so hurry sir😅😅😅😅
Thank you!!! This was one of the best tutorials I've seen of the new Figma features!
This video was PERFECT. Thanks a lot I've just discovered your channel and subscribing right NOW. :)
Great video, very easy to follow. Along with this and other figma elements admittedly I've been feeling a little overwhelmed recently, content like this is a great help, subscribed
Thank you soo soo very much. This made my day honestly. God bless you !
this is awesome stuff I found.. just loved this
Amazing content. As a suggestion it would be great avoiding or removing quick flashes. It might be a bad thing for people with epilepsy.
Gary, you are talented ! Thank you for doing this. Watching your videos have always been instrumentsl to my design growth ❤💡
Thanks for sharing! Wow - so nice to see and get an understanding of the new features.
Great video! 😊🙏 instantly helped to improve the prototype I'm working on 🥳 one thing I have a question about, in case there are multiple cases in the design where the like button would be used, is there a way to make each of them independent from each other without having to create a separate number variable and individual component to each use case? Now if I apply same component throughout all of the items, once the like button is clicked on one of them, the like count is increasing for all. Would really appreciate a tip on how to solve that 😊
Thank you very much ! My teacher sucks ! You saved my life
Thank you for this!
Thank you for video! It is very useful!
Great tutorial - thank you ever so much!
Thanks for this video 💜
Hi, I was thinking while watching your UA-cam videos, but I'm not sure if it's better to just study framer or write a program like jitter or learn pygma prototyping. Are there any more lectures or courses that combine components and prototyping? If there are several advanced lectures, I'd like to take them. I'm not very good at English, so I used a translator, so please understand. I want you to comment. Thank you for the great videos. I hope you're always happy.
Thanks Gary, very helpful.
great as always
Awesome Tutorial
Thanks for putting this together! I found it very helpful.
Quick question: In the case of the Boolean toggle, do you need to create a separate toggle component for each Boolean being applied? For example, if there were two avatars instead of one and I wanted one to be visible while the other is not, would I need to two separate components or can it be done with two instances of the same component?
i learned more in thank you
Thank you
Great video! Is there a way to publish these interactions with conditions and variables to a team library? When I use these components in my projects the interactions don't work
Dont know if u already tried, but the color schemes can be changed with set variable mode. Im still trying to change component colors tho.
Forget it, already know why it didnt changed. I block the appearance to one specific mode without knowing
The tutorial that makes variables look as easy as stealing candy from a baby : )
thanks learn a lot
Figma and prototyping is querky at best. It's also very unstable, always been. Take notice of what happens to any element with a hover event attached for instance, they change their position ever so slightly, resulting in the typical Figma "tremble" effect. Look @21:30 - both label and checkbox move on hover.
That mostly happens in the new preview mode. If youre following this tutorial try launching the prototype in Present mode or simply expand the Preview window so the content inside has that extra margin and it should work without trembles
@@facuh3o Actually when viewing prototype in the old manner in the separate section that has a menu, the frames skips all the time. When clicking from frame to frame it skips hugely, impossible to keep the same coordinates. That goes for 100% and zoom. I've never seen a worse prototyping tool than Figma and I always miss XD for prototypes. I'm forced to use Figma due to the current project I'm in now.
To me Figma is more for system based design, administrating design systems and collaborations. But prototyping and simulating user flows is a true nightmare.
Thanks!
gg figma, gg dude for making the video also.
Awesome course! I only run in to a problem when I work on the toggle to switch between light and dark mode. I followed all the steps in the tutorial but for some reason the background color will not change and stays the same blue color... What am I doing wrong?
I faced this problem too. Turns out the issue was, I had selected the "toggle" element for adding an interaction, whereas you have to choose the entire frame with the words and toggle. That seemed to do the trick :)
@@yashshetty3208 I faced this problem too, thank you so much for the tip, it worked!!
Ultimate thank you
For the Dark Mode Toggle section (or for color variables in general), is it possible to do a color FADE instead of an instant swap? I suppose I don't really understand why the color variable change wouldn't come with an option to set it to "smart animate"
The specific use case for me is...I want to animate one of my color styles upon the click of a button. I can currently do that by doing a "set variant" action, but it is instantaneous. I couldn't find any other way to pull this off, as Figma doesn't allow you to tie the visibility of a fill layer to a Boolean within a color style.
Great tutorial. i find the whole variables thing in figma to be quite overcomplicated. Lets say i would like a component that contains two versions of a card; unselected and selected. i have a button that is outside of this component, but i want said button to control what version is being showed based on click on or off. You would think you could set up the state of the card variants (unselected === false, selected === true) then set the button variable to set that boolean to true....and that is it. but no?
The shopping cart worked thank you. Did you use an auto layout set up to include the dollar sign?
yes it was. hoever the figures were text left aligned, in reality I would have aligned to the right :)
This is an awesome tutorial
Sadly, using variables in prototyping isn´t available for Figma free users
I’m using a free version of figma and I have access to the figma variable and even the mode
how?@@footballscoreupdate
Free users have access to Figma variables for 2023
@@footballscoreupdatenot for advanced variable
Bro u can use figma professional for free 😑
Very insightful, and easy to follow.
In the second example, you didn't touch on how you connected the +1 variable to the overall cost ($39). I understand the +1 and -1 variables, but how did we connect +39 such that when we increase the number of items in the cart, it increases the cost? Can you provide some clarity please?
It's actually explained in the tutorial, it's just a matter of adding another $39 variant, you can watch the video again
Awesome awesome stuff
Figma on some vibes!!!
a lot of this just feels like adding extra steps to simple interactions. like the avatar one, why cant you just have the avatar hidden in previous states. what benefits does having all these variables to do what we could do before.
Thanks for sharing. I was looking for a toggle to switch between light/dark variable modes, is that possbile at this point?
Nope. Not sure why. Hopefully soon.
@DesignCourse Thanks! Yeah does not really make sense.
I was too
When will Adobe make figma standard in CC? WIll XD be merged into figma?
#3 toggle did not work for me. back ground color will not change
Update: The smart animate setting doesn't allow it. I had to turn it back to instant. Seems like a bug Figma will need to fix, eventually
What‘s the benefit of the Show avatar variables? Before doing the exercises I did my own version, I just create a component showing the avatar and checked box and a variant with an unchecked box and 0 opacity avatar, then connect both through a click animation and is basically the same with less steps.
It was just a simplified way of showing show and hide layer functionality using variables. In this particular case, you probably wouldn't do it.
Feature unavailable in the free version... in Protopie you could do these things years before and free...
Tq
Man this is great! however I can't do the variable prototyping cuz I'm on the free Figma version lol!
Great
On the Boolean example, the eye icon does not show the boolean variables?
Oh shoot "RIGHT" click...doh!
I'm really on the fence with this. Devs have never needed this much fidelity on handover. To spend all this additional time visually hooking up variables/conditionals/loops & booleans etc seems like a waste when we already have the assets to develop?
Time better spent by contributing to the repo unless the client has categorically stated they NEED a high-fi prototype 🤷♂
Dark mode toggle ain't working for me!? Why?
anyone get stuck at 11:50 ? I cant seem to drag the the first row under the conditional bit - it worked for him but not working for me
Hello! Thanks for the video. I have a problem. When I select the Avatar layer and go to the little eye next to layers, it just turns the visibility on and off, there is no variables menu or anything. What am I doing wrong? Thanks
Hey Teresa, he explained in the video in order to apply the boolean value that turns off and on the avatar, you need to go to the "Layer Panel" and "Right-click" on the eye icon that on the right of the layer to apply that boolean, hope that helps. :3
Is there a way to make the color transition softer? like smart animate
A good point. I had the same sense of slight mismatching in the toggle animation. Otherwise, very good stuff !
aye...
To be honest with you, I hated figma and hated this whole field, and I no longer have any enthusiasm for learning new things in it. What we do in months, after what we learn, a tool appears that summarizes this in a minute. This is very frustrating. Add to that the ease of creating a design in the future, which will make the profession of designer a normal profession. From the designer, learn the code. God Almighty alone knows what this matter will lead to
Очередные продавцы лопат
how do I do the dislike too?
Designers who have never had to deal with a minimum of programming be like: 💀🫠
We are not at ProtoPie levels, but it is a tremendous improvement 💪
Question 1: so advanced prototyping, in the case of the avatar, still does not work with the smart animate option?
Question 2: I have always built component sets by also inserting Dark Mode via a Boolean property that allowed the component to be switched between light and dark. Now with variables you say there is no longer a need for this, or do these options have to be used in pairs?
Great video, thanks