"In June 2024, we introduced a redesigned Figma-called UI3. With UI3, some parts of this video might not match what you see in the product today. We appreciate your patience while we update our content. - Find where features moved to in our guide: help.figma.com/hc/en-us/articles/23954856027159-Navigating-UI3-Figma-s-new-UI - Learn more about interactive components: help.figma.com/hc/en-us/articles/360061175334-Create-interactive-components-with-variants"
That's true so far. But only for the people who work a lot with prototypes. All others are still waiting for so many improvements or extensions of the existing tools 😁
@@mischugo True. But it will also allow people that don't prototype that much to actually do it because the process gets faster and easier. Obviously, it's still irrelevant for people that don't need to present their design to clients 👀
Oh my goodness, this video was SOOOOOOOOOOOOOOOOO helpful! I had to problem-solve how to get my submenu to appear as done in the video and really tried to understand what I was doing wrong. I just figured it out! 🥰 Although I had to repeat a chapter a few times, the method by which you executed the instructions in this video was perfect! I acquired a good foundation about variants (referenced video) and how to create interactive components. I was Command+King all over my mid-fidelity prototype, lol. Thank you so much!!
I am just one month old to figma and after seeing this I feel that I discovered this pretty late in life! Thank you guys. this was really helpful and very easy to understand.
I understand this feature gotta need lots of time to research, delvelop and test. So patiently I waited. This one along with Paste to replace are the best updates of the year! Thank you and keep it going Figma. Love ya
Couldn't have this come sooner when I had to make 3 prototypes with fully functioning inputs for a Q&B flow? Took me ages to get the interactions done. :))
This is a game-changer, funny take - this feature is helping in reducing carbon footprint globally - fewer hours spend on having multiple versions - less power usage - less carbon footprint.
This makes life more easier, Now the pressure is on the Front End Guy. Because we designer have created the 100% working prototype and now the boll is in the Front End Court. :)
This is something spectacular you've created. You lot are innovating hand over fist, far faster than Sketch (which I've now converted from, after 10+ years), the variants, the styles, basically, everything is so much more intuitive than Sketch. OMFG my days of wrangling Sketch are finally over. Thank you :)
I'm very new to this and need some help, so at the start when I try to add the layer text to the checkbox component frame it is dissappearing can anyone help with this
Guys, your boxes here are different than the ones in the variant video. Here it appears the checkboxes are within another frame, in the variant video they are not, so when you try to follow it leads to the text being clipped off and it is unclear to beginners how to stop the clipping.
FYI I couldn't get this to work for about 20 minutes, restarting figma and reloading the prototype seemed to fix it. Classic design platform bug, that major interactive features like this require you to restart the program, but once you get it work, pretty cool feature.
I am a developer using Figma on a project for planing and documenting purposes. While it is true that that feature is amazing it makes me wonder, when is enough? Keep in mind, all you do in Figma needs to be done in actual code once again. But that is just my perspective on it as a person which does all the work alone without help.
anyone having problem with overriding in a new instance of interactive component? I created simple dropdown and when in prototype mode I open it, it shows default labels instead of overriden in the instance.
Is it only me or is the interactive component not supporting nested components? E.g. I created a navbar component with individual buttons as interactive components, the button hover effect works when they are placed on an artboard directly, but stops working when they are nested in the navbar component.
Can someone answer a question? at 2:06 the demo drags a 'label' text into the component. When I do that, the text disappears. What am I doing wrong? Also the checkboxes change fine when dragged to the main area but within the menu they don't change. Why is this so hard?
I'm having the same issue and spent an hour trying to figure out but no luck so far. Others have recommended to unclip the content but it doesn't solve the issue because you can't interact with the label during the prototype. @Figma, any recommendations?
It's quite frustrating to not have variant interactions AND prototype interactions work at the same time. Plenty of use cases for that, like if you toggle something that is instantaneous.
I HOPE to get a response. I loved the Tripma design they did in this example, is there a separate video where figma designs that website ? would love to see how it was designed.
Hi Areesha, you can grab a copy of the Tripma design file here: www.figma.com/community/file/911320742349428744 You can check out how we built the components in the Tripma in our auto layout tutorial series (ruclips.net/video/PNJxeD29ZTg/видео.html).
"In June 2024, we introduced a redesigned Figma-called UI3.
With UI3, some parts of this video might not match what you see in the product today. We appreciate your patience while we update our content.
- Find where features moved to in our guide: help.figma.com/hc/en-us/articles/23954856027159-Navigating-UI3-Figma-s-new-UI
- Learn more about interactive components: help.figma.com/hc/en-us/articles/360061175334-Create-interactive-components-with-variants"
It's finally live!! That is Best Figma update this year
That's true so far. But only for the people who work a lot with prototypes. All others are still waiting for so many improvements or extensions of the existing tools 😁
@@mischugo True. But it will also allow people that don't prototype that much to actually do it because the process gets faster and easier. Obviously, it's still irrelevant for people that don't need to present their design to clients 👀
am i the only one getting a sexual vibe from this woman voice 😳 !
Have been using this for months, it's really no other way to describe it: It's mind blowingly amazing
THANK THE DARK LORD, this has been the biggest pain in my butt using Figma... I am sooooooooooo happy we can finaly do this!!!
For a free website builder this is one powerful tool .
Finally! With this very useful feature, the gap between Figma and XD is now closed 👏
OMG, I am in love with the narrator's voice...it's seriously hypnotizing me. Very dangerous. I would do anything this voice told me to do.
I NEEDED THIS FEATURE FOR A LONG TIME AND WAITING FOR IT.
THANK YOU FIGMA!! ANOTHER GREAT REASON TO SWITCH TO FIGMA!! THANKS
figma is such a great example of innovation taking over monopoly of sketch and XD.
Finally, i've been waiting for this feature for so long! Thank u Figma!
Oh my goodness, this video was SOOOOOOOOOOOOOOOOO helpful! I had to problem-solve how to get my submenu to appear as done in the video and really tried to understand what I was doing wrong. I just figured it out! 🥰 Although I had to repeat a chapter a few times, the method by which you executed the instructions in this video was perfect! I acquired a good foundation about variants (referenced video) and how to create interactive components. I was Command+King all over my mid-fidelity prototype, lol. Thank you so much!!
and now, with figma variables, we can build the whole site in figma basically :d
Slowly getting better and better. Thanks Figma team!
so true
I am just one month old to figma and after seeing this I feel that I discovered this pretty late in life! Thank you guys. this was really helpful and very easy to understand.
Finally!! An early Christmas gift!
I understand this feature gotta need lots of time to research, delvelop and test. So patiently I waited.
This one along with Paste to replace are the best updates of the year!
Thank you and keep it going Figma. Love ya
Finally!! 🍾 And I was looking for some news last week if it's going to be published this year or not and I almost lost the hope 😁 great job Figma!
New into Figma after a few years and this is just incredible!11!
I'm shaking. How can a product be so good
Couldn't have this come sooner when I had to make 3 prototypes with fully functioning inputs for a Q&B flow? Took me ages to get the interactions done. :))
Finally. I think this property is so helpful for us, i using this till one or two weeks and i liked that
Excellent tutorial, girl! I've already fallen in love with your voice!
Missing fonts in mobile prototype seems to be fixed as well! Don't have to outline text anymore. Great work
OMG, finally its been released! Best update as always, thanks Figma!
Already playing around w this new update! Thanks Figma!
This is a game-changer, funny take - this feature is helping in reducing carbon footprint globally - fewer hours spend on having multiple versions - less power usage - less carbon footprint.
This makes life more easier, Now the pressure is on the Front End Guy. Because we designer have created the 100% working prototype and now the boll is in the Front End Court. :)
Started using Figma a month ago and I'm amazed. It's so cool!
Finally! This is gonna be so great! 🎉
Woahh, this addition make figma even better
This is something spectacular you've created. You lot are innovating hand over fist, far faster than Sketch (which I've now converted from, after 10+ years), the variants, the styles, basically, everything is so much more intuitive than Sketch. OMFG my days of wrangling Sketch are finally over. Thank you :)
Best update ever by Figma
Why you guys are best 😭 figma is the best ❤️
I'm so excited about this. Thank you, Figma team!!
Figma gonna be on another level
Yes, just yes !
Finally
Great work ❤️❤️
So exciting! Thanks Figma Team!
Figma just put the final nail on AdobeXDs coffin!
Love this, was waiting long enough for Figma to release an update on this. Can't wait to get started
Finally, Thanks
OMG! Finally! Just take my money!
Exactly what I've been looking for!!!
Thank you!!! The video is super helpful, love you all
Best news ever.. such a small thing, but such a massive impact !! going to save a lot of time with this.😎
Thank you Figma! This is just amazing:3
I'm very new to this and need some help, so at the start when I try to add the layer text to the checkbox component frame it is dissappearing can anyone help with this
I have the same problem too.
HOLY SHIT THIS IS THE BEST UPDATE EVER!!!!!!!
Great!! Thank U ; )
Happy designing!!!!
Как я Вас люблю, вы бы знали.
WOW this amazing feature! Thanks!
This is great🥰😍. keep the good work up.
Oooooohh 😯 Love this!
This is insane. Thank you !
this is insane! Love it!!
this is definitely a game changer 🙌🏼
Guys, your boxes here are different than the ones in the variant video.
Here it appears the checkboxes are within another frame, in the variant video they are not, so when you try to follow it leads to the text being clipped off and it is unclear to beginners how to stop the clipping.
when i move the text into the checked and unchecked it disappears. Could you please explain what I'm doing wrong?
@@arihayatbakhsh4994 I have the same problem. Could you fix it?
@@parastouraeisghanavati1233 unfortunately not
Hi, I'm having the same problem, could someone solve it?
@@AnniWB unselect the clip content option (right above)
Such a beautiful video ❤️
It was so helpful! Thank you so much ❤❤❤❤
This is amazing, thank you very much
Thank you for this!
im sure this will be easier with the new updates :)
Дождались 🤧
this is just wonderful
FYI I couldn't get this to work for about 20 minutes, restarting figma and reloading the prototype seemed to fix it. Classic design platform bug, that major interactive features like this require you to restart the program, but once you get it work, pretty cool feature.
Thank you so much for this!!
This is great! Thanks a lot for your hard work!
Woo! So exciting! Well demonstrated and explained also :)
I am a developer using Figma on a project for planing and documenting purposes. While it is true that that feature is amazing it makes me wonder, when is enough? Keep in mind, all you do in Figma needs to be done in actual code once again. But that is just my perspective on it as a person which does all the work alone without help.
cool! new to learn!
👋 Goodbye exponential screen permutations! 🙁 As I did in countless design prototyping software before.
👍 Hello interactive components! 🙂 Nice!
Love this so much ❤️
Please consider making these tutorials WITHOUT the background music. It's fine for a short demo but super distracting for a longer tutorial.
Good job
yes!! I LOVE YOU FIGMA
EXCELLENT video thank you!
Thank you. Learnt a lot!
wow😲
Amazing
Amazing thanks
when i drag the 'label' text into component in layers section, that text gets disappeared. What to do for that?
I have the same problem.
Awesome!
anyone having problem with overriding in a new instance of interactive component? I created simple dropdown and when in prototype mode I open it, it shows default labels instead of overriden in the instance.
Fantastic!!!!!
OMG THANK YOU SO MUCH
Top Material!
Super amazing!
super thanks very much!
Great. Now do radio buttons and text inputs
Why the text label I created at 2:00 when I move to checked and unchecked, it disappear????????
uncheck clip content box on the right side of design panel (below width and weight frame) , i believe this work!
@@sabamehfooz9167 I tried this, and I get interactions points for both checkbox and label.
When I choose a seat, how can I make the Next Flight button light up?
I LOVE FIGMAAAAAAAAAAAAAAAAAAAAAAAAAA!
Amazing
Is it only me or is the interactive component not supporting nested components? E.g. I created a navbar component with individual buttons as interactive components, the button hover effect works when they are placed on an artboard directly, but stops working when they are nested in the navbar component.
THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!
How can you do it so when you check s box the other box gets unchecked? Please help
FINALLLLYYYYY!!!!
Can someone answer a question? at 2:06 the demo drags a 'label' text into the component. When I do that, the text disappears. What am I doing wrong?
Also the checkboxes change fine when dragged to the main area but within the menu they don't change. Why is this so hard?
I'm having the same issue and spent an hour trying to figure out but no luck so far. Others have recommended to unclip the content but it doesn't solve the issue because you can't interact with the label during the prototype. @Figma, any recommendations?
stucked in same problem
It's quite frustrating to not have variant interactions AND prototype interactions work at the same time. Plenty of use cases for that, like if you toggle something that is instantaneous.
Do you mean like toggling dark mode on?
This is great news.
I HOPE to get a response. I loved the Tripma design they did in this example, is there a separate video where figma designs that website ? would love to see how it was designed.
Hi Areesha, you can grab a copy of the Tripma design file here: www.figma.com/community/file/911320742349428744
You can check out how we built the components in the Tripma in our auto layout tutorial series (ruclips.net/video/PNJxeD29ZTg/видео.html).
Great👍