"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 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
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.
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.
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!
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.
ok, but how can I change the "next" button when I select one seat? I mean, if you don't select a seat you can't continue, the button is disabled, and when you choose a seat you can use the button. How can I do that?
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.
Hello, it's likely that you already have an interaction set to "Change to". Go to the prototype view, check under the "Interactions" section to see if you have another interaction set for "change to".
With all due respect to Figma team and the product, but I really don't know why I hate all the voiceovers you guys chosen. It does sound borring and you loose the point very fast.
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.
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?
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.
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?
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
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!!
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.
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. :))
For some reason when I add "label" to the variant (by grouping it under the variant as seen in the video) its hidden when outside the frame/variant. Anyone know how to fix this..?
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. :)
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 do EXACTLY the same but it won't switch between states in prototype. Been repeating the process ten times. It's just no way to make it happen. I'm heading back to XD. Figma is just too unstable and down right messy.
@@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.
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.
If anyone's struggling make it work, then make sure to watch the Figma Variants tutorial first before this one. Here's the link, th-cam.com/video/y29Xwt9dET0/w-d-xo.html
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?
How can i animate 2 puzzle pieces merging together as components (and variants i suppose). I can do it in 2 frames but i need the animation in one frame after delay.
How are people so excited about this? One year in and we still can't have a interactive component that also has an action in the master frame... which makes it useless for larger prototypes.
Even if I place the text under checked and unchecked, the checkbox and the text are not highlighted together when I try to prototype it. I can only prototype either the checkbox or the text to switch, but not both. Anyone know what might be going on?
@figma hope to get help. i also have this issue. a label text is within each for checked and unchecked layer. but when i click text label it only selects text label (not both text label and checked box like this video) at 2:06 of video.
Can someone please explain to me after you make the component set, how do you drag and place to a frame? I try to use the component set I make, but i end up dragging the component from the component set instead of having one that's copied and pasted automatically.
Hi, there are a few ways to create and insert component instances into your designs. One way to insert an instance is to copy (CMD/CTRL + C) and paste (CMD/CTRL + V) it from the component set. You can learn more about insert component instances here: help.figma.com/hc/en-us/articles/360039150173-Create-and-insert-component-instances
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 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 (th-cam.com/video/PNJxeD29ZTg/w-d-xo.html).
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.
"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"
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
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 😳 !
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
I'm shaking. How can a product be so good
I'm so excited about this. Thank you, Figma team!!
Thank you Figma! This is just amazing:3
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.
Best news ever.. such a small thing, but such a massive impact !! going to save a lot of time with this.😎
yes!! I LOVE YOU FIGMA
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.
This is great! Thanks a lot for your hard work!
this is just wonderful
Thank you so much for this!!
👋 Goodbye exponential screen permutations! 🙁 As I did in countless design prototyping software before.
👍 Hello interactive components! 🙂 Nice!
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.
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
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.
ok, but how can I change the "next" button when I select one seat?
I mean, if you don't select a seat you can't continue, the button is disabled, and when you choose a seat you can use the button.
How can I do that?
it doesn't work for me :( When I copy my component to the frame it's inactive.
Solved: I restarted my pc and figma later the day and it worked 🤔🤔
YAY!
"change to" option in interaction details is not active. How can i make it active?
If we create option buttons using components and variants, how can we go to another frame after selecting an option?
RIP ALL THE OTHERS.
How the hell do you group the label with the unchecked box.. It does not let me drag the label as you did.
Did you find any solution to this? I'm stuck
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?
HELP plase! I can't use "change to" option for some reason.
Hello, it's likely that you already have an interaction set to "Change to". Go to the prototype view, check under the "Interactions" section to see if you have another interaction set for "change to".
☘ Irish Honey Badger - Need emoji's
With all due respect to Figma team and the product, but I really don't know why I hate all the voiceovers you guys chosen. It does sound borring and you loose the point very fast.
It could be because when producing sound they didn't use De-essing program, so all the prominence of sibilant consonants.
Can you store an object and it's interactions into a library, and then use it with those interactions in a new page in the same project? how?
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)
THANK THE DARK LORD, this has been the biggest pain in my butt using Figma... I am sooooooooooo happy we can finaly do this!!!
Have been using this for months, it's really no other way to describe it: It's mind blowingly amazing
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
Finally, i've been waiting for this feature for so long! Thank u Figma!
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)
Finally! With this very useful feature, the gap between Figma and XD is now closed 👏
Yes, just yes !
Excellent tutorial, girl! I've already fallen in love with your voice!
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)
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)
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.
Finally! This is gonna be so great! 🎉
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
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.
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!
OMG! Finally! Just take my money!
Slowly getting better and better. Thanks Figma team!
so true
Как я Вас люблю, вы бы знали.
I love this but it seems as if when I try it, it doesn’t work.
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.
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. :))
For some reason when I add "label" to the variant (by grouping it under the variant as seen in the video) its hidden when outside the frame/variant. Anyone know how to fix this..?
uncheck clip content checkbox [below height width frame`s properties...]
@@olfadhaouadi1975 thanks for that, I was stuck for a while until I saw your response :-)
@@olfadhaouadi1975 Thank you so much
@@olfadhaouadi1975 Thanks!! like saver!!
Oooooohh 😯 Love this!
Finally
Great work ❤️❤️
For a free website builder this is one powerful tool .
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. :)
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
😭🙏🏻
Finally. I think this property is so helpful for us, i using this till one or two weeks and i liked that
Figma just put the final nail on AdobeXDs coffin!
Please consider making these tutorials WITHOUT the background music. It's fine for a short demo but super distracting for a longer tutorial.
Fahk yass!
OMG, finally its been released! Best update as always, thanks Figma!
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?
I do EXACTLY the same but it won't switch between states in prototype. Been repeating the process ten times. It's just no way to make it happen. I'm heading back to XD. Figma is just too unstable and down right messy.
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.
Already playing around w this new update! Thanks Figma!
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’ve had many issues / bugs with this lately, I used to do this effortlessly but now it’s so difficult… why????
If anyone's struggling make it work, then make sure to watch the Figma Variants tutorial first before this one. Here's the link, th-cam.com/video/y29Xwt9dET0/w-d-xo.html
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
How can i animate 2 puzzle pieces merging together as components (and variants i suppose). I can do it in 2 frames but i need the animation in one frame after delay.
How are people so excited about this? One year in and we still can't have a interactive component that also has an action in the master frame... which makes it useless for larger prototypes.
Figma is a great tool. But not for prototyping. I'll stick with Axure, thanks.
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!
Best update ever by Figma
I do everything just like the tutorial, but it just doesn't work for me :(
Why you guys are best 😭 figma is the best ❤️
somehow i cant set some button outside of components to change component variants inside said component... kinda sad
Even if I place the text under checked and unchecked, the checkbox and the text are not highlighted together when I try to prototype it. I can only prototype either the checkbox or the text to switch, but not both. Anyone know what might be going on?
@figma hope to get help. i also have this issue. a label text is within each for checked and unchecked layer. but when i click text label it only selects text label (not both text label and checked box like this video) at 2:06 of video.
How can you do it so when you check s box the other box gets unchecked? Please help
New into Figma after a few years and this is just incredible!11!
Great!! Thank U ; )
Happy designing!!!!
My label disappear when I add them to the component, what is up with that?
HOLY SHIT THIS IS THE BEST UPDATE EVER!!!!!!!
So exciting! Thanks Figma Team!
This isnt working for me at all.
same
wow😲
Amazing
Can someone please explain to me after you make the component set, how do you drag and place to a frame? I try to use the component set I make, but i end up dragging the component from the component set instead of having one that's copied and pasted automatically.
Hi, there are a few ways to create and insert component instances into your designs. One way to insert an instance is to copy (CMD/CTRL + C) and paste (CMD/CTRL + V) it from the component set. You can learn more about insert component instances here: help.figma.com/hc/en-us/articles/360039150173-Create-and-insert-component-instances
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
Adobe Xd does this WAAAAY better and more intuitively.
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 (th-cam.com/video/PNJxeD29ZTg/w-d-xo.html).
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.
Need an option for multi of the same trigger.
Where is the 'Combine as variants' step, love ..?
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.
Woahh, this addition make figma even better