"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 👀
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. :))
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!!
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 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 :)
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.
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. :)
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.
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?
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.
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.
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
In 2:05 when I move the label text into either checked/unchecked property, why can I see the label anymore? The layer is there but I can't see the text. Can somebody help me?
@@Figma Duplicating all those instances is still cumbersome. In Adobe XD you create different states of the same element without duplication. This is so straightforward. Waiting for it in Figma.
greetings, I need help; I watched the video and at 02:03 it was shown how to make the text interactive within the checkbox. I am bothered by the fact that in a certain situation when I drag the text and add it in the layers from the left side to checked/unchecked, the text becomes invisible to me and the box that includes the text and the button is not created as it should be, but only one or the other. if I use shift to select both the text and the button, then the change to prototype option is not available and I cannot make the text and the words interactive at all, but only the button. Has anyone had a similar problem? If so, can you help me? thank you.
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 (ua-cam.com/video/PNJxeD29ZTg/v-deo.html).
Wow! Thanks Figma team!💟 I only have one question, how can I use these interactive elements and make me navigate to another screen in the same project when I click on a button? For example, in the classic header you can see on a website. It would be VERY helpfully to me!
This is a great tutorial, HOWEVER, I want to create something that when a checkbox is clicked, some content updates as well, in addition to the state. I tried to add a second onClick event, but it breaks the state interactivity. Does anyone know how this can be accomplished?
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.
Unfortunately this does not work between files, IE when the design system is in a separate file. I suppose this shouldn't come as a surprise. Question is, what do we about it? Edit: I don't understand why, but this morning, all of a sudden, this seems to be working fine. I don't know what to think.
Another newbie question. I followed the Variants tutorial and now I'm trying to do the Interactive components tutorial but I'm running into a problem where the labels and the checkboxes remain individual elements. Starting with the Component built in the Variants tutorial I don't have the empty diamond element Checkbox in the frame, all I have is a filled diamond Checked and Unchecked and the 'T' label element. Any idea what I'm doing wrong?
Hi Tony! It looks like you're trying to place a text layer (T label element) inside a main component (filled diamond). From the layers panel on the left sidebar, try dragging the text layer into the main component, so that the text layer is nested inside - or a child element of - the main component. To create an instance of the component (empty diamond element), copy / paste the main component. There are many other ways to do this. Find out how here: bit.ly/2Y0EXpa Also, be sure to check out our Figma for beginners series! bit.ly/3vZahBd Hope this helps!
I'm new to figma and for the life of me. I can't get this to work. I created the interactive components and added the interaction change state to check and unchecked but it won't work for me. I also can't add text as it disappears when I add it to the component, so I must be doing something wrong.
Any plans to make it possible to change a component state when the user interacts with another component (ie. user clicks on a checkbox -> it changes the state of a form button from disabled to enabled)
"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, i've been waiting for this feature for so long! Thank u Figma!
Finally!! An early Christmas gift!
I NEEDED THIS FEATURE FOR A LONG TIME AND WAITING FOR IT.
THANK YOU FIGMA!! ANOTHER GREAT REASON TO SWITCH TO FIGMA!! THANKS
Finally! With this very useful feature, the gap between Figma and XD is now closed 👏
Slowly getting better and better. Thanks Figma team!
so true
Excellent tutorial, girl! I've already fallen in love with your voice!
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.
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 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. I think this property is so helpful for us, i using this till one or two weeks and i liked that
figma is such a great example of innovation taking over monopoly of sketch and XD.
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. :))
New into Figma after a few years and this is just incredible!11!
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
OMG, finally its been released! Best update as always, thanks Figma!
Missing fonts in mobile prototype seems to be fixed as well! Don't have to outline text anymore. Great work
Already playing around w this new update! Thanks Figma!
Woahh, this addition make figma even better
Finally! This is gonna be so great! 🎉
I'm shaking. How can a product be so good
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!
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.
Started using Figma a month ago and I'm amazed. It's so cool!
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 so excited about this. Thank you, Figma team!!
Best update ever by Figma
Love this, was waiting long enough for Figma to release an update on this. Can't wait to get started
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)
Why you guys are best 😭 figma is the best ❤️
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. :)
Thank you Figma! This is just amazing:3
Figma gonna be on another level
So exciting! Thanks Figma Team!
Finally
Great work ❤️❤️
Finally, Thanks
OMG! Finally! Just take my money!
Figma just put the final nail on AdobeXDs coffin!
Exactly what I've been looking for!!!
Thank you!!! The video is super helpful, love you all
Yes, just yes !
HOLY SHIT THIS IS THE BEST UPDATE EVER!!!!!!!
Как я Вас люблю, вы бы знали.
This is insane. Thank you !
Best news ever.. such a small thing, but such a massive impact !! going to save a lot of time with this.😎
Great!! Thank U ; )
Happy designing!!!!
this is definitely a game changer 🙌🏼
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.
Oooooohh 😯 Love this!
WOW this amazing feature! Thanks!
Thank you so much for this!!
This is great🥰😍. keep the good work up.
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
this is insane! Love it!!
This is great! Thanks a lot for your hard work!
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.
This is amazing, thank you very much
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.
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.
Woo! So exciting! Well demonstrated and explained also :)
It was so helpful! Thank you so much ❤❤❤❤
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.
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.
When I choose a seat, how can I make the Next Flight button light up?
Such a beautiful video ❤️
Дождались 🤧
this is just wonderful
im sure this will be easier with the new updates :)
Thank you for this!
Love this so much ❤️
In 2:05 when I move the label text into either checked/unchecked property, why can I see the label anymore? The layer is there but I can't see the text. Can somebody help me?
uncheck clip content box on the right side of design panel (below width and weight frame)
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.
EXCELLENT video thank you!
yes!! I LOVE YOU FIGMA
Do I need the beta version of figma to access the interactive components functions?
Hi Isaac, no you don't! Interactive components are now out of beta and available for all Figma editors to use.
@@Figma Amazing. Thank you
I love this but it seems as if when I try it, it doesn’t work.
Thank you. Learnt a lot!
Anyone happen to know why when adding default text to the component, my text disappears unlike the example in the video at 2:04 ?
Was wondering the same thing, i think it's because on the component frame, "clip content" is checked on
@@bradmacdonald7626 Thanks!
Nice. XD already had this, so it was annoying to choose tools based on strengths. Is it still in beta?
Interactive components are now out of beta and available for all Figma editors to use! :)
@@Figma Duplicating all those instances is still cumbersome. In Adobe XD you create different states of the same element without duplication. This is so straightforward. Waiting for it in Figma.
Hello, thank you very much. How can we restrict to select just a single sit ?
cool! new to learn!
greetings, I need help; I watched the video and at 02:03 it was shown how to make the text interactive within the checkbox. I am bothered by the fact that in a certain situation when I drag the text and add it in the layers from the left side to checked/unchecked, the text becomes invisible to me and the box that includes the text and the button is not created as it should be, but only one or the other. if I use shift to select both the text and the button, then the change to prototype option is not available and I cannot make the text and the words interactive at all, but only the button. Has anyone had a similar problem? If so, can you help me? thank you.
Hi, did you find any solution to this?
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 (ua-cam.com/video/PNJxeD29ZTg/v-deo.html).
Wow! Thanks Figma team!💟 I only have one question, how can I use these interactive elements and make me navigate to another screen in the same project when I click on a button? For example, in the classic header you can see on a website. It would be VERY helpfully to me!
Hey @cristinag2113, did you get any solution for this query? Please share.
Hi, this is great!! I only wonder how I disable one instance when another is "checked"? Please help
This is a great tutorial, HOWEVER, I want to create something that when a checkbox is clicked, some content updates as well, in addition to the state. I tried to add a second onClick event, but it breaks the state interactivity. Does anyone know how this can be accomplished?
Uncheck the clip content from right side panel
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?
wow😲
Amazing
Need an option for multi of the same trigger.
Unfortunately this does not work between files, IE when the design system is in a separate file. I suppose this shouldn't come as a surprise.
Question is, what do we about it?
Edit: I don't understand why, but this morning, all of a sudden, this seems to be working fine. I don't know what to think.
Another newbie question. I followed the Variants tutorial and now I'm trying to do the Interactive components tutorial but I'm running into a problem where the labels and the checkboxes remain individual elements. Starting with the Component built in the Variants tutorial I don't have the empty diamond element Checkbox in the frame, all I have is a filled diamond Checked and Unchecked and the 'T' label element. Any idea what I'm doing wrong?
Hi Tony! It looks like you're trying to place a text layer (T label element) inside a main component (filled diamond). From the layers panel on the left sidebar, try dragging the text layer into the main component, so that the text layer is nested inside - or a child element of - the main component.
To create an instance of the component (empty diamond element), copy / paste the main component. There are many other ways to do this. Find out how here: bit.ly/2Y0EXpa
Also, be sure to check out our Figma for beginners series! bit.ly/3vZahBd
Hope this helps!
@@Figma Still not working :-( Do I have to reframe the checkbox component and the label text element and create a new component?
@@tonyredhead3413 Did you solve the problem? I'm stucked in the same issue.
@@00bava same for me. I don't know where she get the empty diamonds.
Uncheck "clip content" for each component. Drove me crazy for about an hour then I saw someone else post it. One click. Ugh! lol
I'm new to figma and for the life of me. I can't get this to work. I created the interactive components and added the interaction change state to check and unchecked but it won't work for me. I also can't add text as it disappears when I add it to the component, so I must be doing something wrong.
Found the solution: Apparently you can not add this feature to old projects. Tried on a new project and it worked just fine
Hello, this seems like a bug. Can you submit a bug report so we can take a look at it? Learn how to submit a bug report here: bit.ly/3EGZcYN
Same here
uncheck clip content box on the right side of design panel (below width and weight frame)
👋 Goodbye exponential screen permutations! 🙁 As I did in countless design prototyping software before.
👍 Hello interactive components! 🙂 Nice!
Please consider making these tutorials WITHOUT the background music. It's fine for a short demo but super distracting for a longer tutorial.
Hi, I am new to Figma, I am trying to drag the text element inside checkboxes component but when I do, it dissapears, what am I doing wrong?
uncheck clip content box on the right side of design panel (below width and weight frame)
Any plans to make it possible to change a component state when the user interacts with another component (ie. user clicks on a checkbox -> it changes the state of a form button from disabled to enabled)