Super helpful video. I can see that Figma prototyping really has it's roots in coding. Initially it seems more cumbersome than say Axure, but the reusable nature of the variables could be powerful. Practice makes perfect. Thanks.👍
The hover state actually happens inside the component, not on the page itself. You can basically create 10 hover effects in a single button hover just by using interactions, delays, and more nested components.
Yup - Just ignore that part of the video. It was mentioned at Config, and in their training videos, hence why I thought it was new. Thanks for the tip, though!
Interesting to compare Figma's approach to this to other tools like iRise, Protopie and Axure. So with Figma you have to create variables for all the things up font ("declaring" them if you like) then attach them to the things that you want to change. I suppose that makes sense for some things, but equally you can't just directly reference properties of objects (like strings, size or visibility) on the canvas from actions you assign (eg on click, change [textObject] to "hello" - no variables involved)
Great tutorial but I dont get how to change back the disabled state of the button, when removing a room after hitting the max of 6ths rooms added (also the other way round how to change the disabled state back from the remove button after again adding a room)
Thanks for sharing. The new features are over engineered and quirky at best - but I guess we all just have to accept that and hope the Adobe takeover will introduce some improved UX. Ironically Figma likes to portrait themselves as an UX tool 🤣
The Adobe taker looks dubious at this point. Also, never in my life have I said, "Since the takeover, such and such software has been much better." 😉 We shall see.@@UICollectiveDesign
Its fun, but i think as a designer we are not meant to do all this work to explain our designs and how it works, maybe showing 2 clicks and the results so the dev can understand or maybe while presenting our design prototype thats would be helpfull. Because i feel like i have to switch from design to maths, good to understand but its not necessary to master. Thank you
When working with more senior stakeholders, or even users, they will need a broader picture. Sure, those who are technical can have an idea, but it's sometimes difficult for those working outside the product to visualize the small details.
Totally disagree. Ignoring these kind of big updates is like pissing against the wind. Figma is the big brother here and they set the rules for the industry, and then industry set the rules for the designers. Bottom line is, soon or later, you will have to adopt. On the other hand, only juniors believe that they have nothing to do with the development part of any project. You design for devs to code and make it work in real life. If you are dribble designer, go ahead and ignore everything. You can even do your thing with Photoshop. Last but not least, even if we ignore the dev part and just look at this from a designers' perspective, still they are super useful and huge time savers. I believe you just didn't understand the way you can use them in any serious project.
Super helpful video. I can see that Figma prototyping really has it's roots in coding. Initially it seems more cumbersome than say Axure, but the reusable nature of the variables could be powerful. Practice makes perfect. Thanks.👍
Glad you liked it!
Clear explanation, thanks!
Glad it helped :) Please subscribe and share our channel :)
@@UICollectiveDesign already done. You got one more subscriber from my end 🙂
This was really well explained... thank you
Glad it helped!
Awesome tutorial. I think you can add multiple set variables to one condition to have a cleaner prototype.
Thank you! Agreed - We did in our advanced lesson. Be sure to check it out!
I love this, great video. I learnt a lot
Glad it helped! We have more training videos available at www.uicollective.co/
This is very good!
Thank you! Please subscribe and share :)
This was an amazing one.. Thank you 🙌🏻
Glad you liked it!
The hover state actually happens inside the component, not on the page itself. You can basically create 10 hover effects in a single button hover just by using interactions, delays, and more nested components.
Yup - Just ignore that part of the video. It was mentioned at Config, and in their training videos, hence why I thought it was new. Thanks for the tip, though!
Thank you for sharing it!
You're welcome!
Nice content. I learned a lot.
Thank you!
Interesting to compare Figma's approach to this to other tools like iRise, Protopie and Axure. So with Figma you have to create variables for all the things up font ("declaring" them if you like) then attach them to the things that you want to change. I suppose that makes sense for some things, but equally you can't just directly reference properties of objects (like strings, size or visibility) on the canvas from actions you assign (eg on click, change [textObject] to "hello" - no variables involved)
I didn't know about variables at all until now...
Wow! Welcome to figma variables!!
Wait, what happened when you change room to rooms I didn't get it?
The number increased :)
Great tutorial but I dont get how to change back the disabled state of the button, when removing a room after hitting the max of 6ths rooms added (also the other way round how to change the disabled state back from the remove button after again adding a room)
I have the same question. Thanks in advance for the answer.
Thanks for sharing. The new features are over engineered and quirky at best - but I guess we all just have to accept that and hope the Adobe takeover will introduce some improved UX. Ironically Figma likes to portrait themselves as an UX tool 🤣
Agreed!
The Adobe taker looks dubious at this point. Also, never in my life have I said, "Since the takeover, such and such software has been much better." 😉 We shall see.@@UICollectiveDesign
the button hover thing isn't new - it has been that way for quite a while.
Thanks for the heads up! It was mentioned at Config, and in their training videos, hence why I thought it was new.
yeah old hat
Figma really opened up a hornets nest (or pandora's box?) with this update.
It is surprising they did not include type variables from the beginning
Its fun, but i think as a designer we are not meant to do all this work to explain our designs and how it works, maybe showing 2 clicks and the results so the dev can understand or maybe while presenting our design prototype thats would be helpfull.
Because i feel like i have to switch from design to maths, good to understand but its not necessary to master.
Thank you
When working with more senior stakeholders, or even users, they will need a broader picture. Sure, those who are technical can have an idea, but it's sometimes difficult for those working outside the product to visualize the small details.
what a waste of time with these vars .. designers dont need to do this. this is for devs.
I actually disagree. These are a direct result of Tokens which is a lifesaver for designers everywhere.
@@UICollectiveDesign good luck with that.
Either compete on the logic or the creative side. The half-breeds (aka Actor / Model) is blurring for sure.
Totally disagree. Ignoring these kind of big updates is like pissing against the wind. Figma is the big brother here and they set the rules for the industry, and then industry set the rules for the designers. Bottom line is, soon or later, you will have to adopt.
On the other hand, only juniors believe that they have nothing to do with the development part of any project. You design for devs to code and make it work in real life. If you are dribble designer, go ahead and ignore everything. You can even do your thing with Photoshop.
Last but not least, even if we ignore the dev part and just look at this from a designers' perspective, still they are super useful and huge time savers. I believe you just didn't understand the way you can use them in any serious project.
@@EnesKab who set the rule is the Designers! remember that