At first, it was challenging for me to understand the interactive components but I had so much fun figuring it out! Love the set of panellists in this office hour!
FINALLY!!!!!!!!!! Now we can do proper interactive prototypes. when are we going to be able to export natively a video (mp4/gif) of the animation/interactions?
All these features is the reason why I switched from Sketch to Figma. 2 main features that convinced me to switch are Variants and Auto-layout. Variants do not exist in Sketch and the auto-layout is not as intuitive and fluid as in Figma. Thank you very much for such an amazing tool for such an affordable price!
This is the simplest and crazy clever solution for a real hassle. Hats down Figma team, standing ovation! Thank you. Pro tipp; keep the beta program live, I wanna sign up for the next features automatic :)
Super nice! The prototyping is becoming better and better. . . Random note, why are there always so many men in this business? I have a whole team of female consultants but when I watch videos like this and also in my project there's mainly men... We should become more active ladies! ;)
Finally! This is probably the one feature that XD has had for ages that made it a faster prototyping tool imho. Now if the fixed layers can go behind scrolling ones would be awesome too (which XD does)
How do you keep the z-index of an open dropdown list on top of everything else in an auto layout? Since it is in the same frame as the trigger, I have a problem that it opens behind the things below.
Does interactive components work for free versions of figma : If yes , then I can’t seem to be able to link my frames in the prototype section , any help If no, how can I activate interactive components, any help
This is all very interesting. Is it possible for someone to create two different interactive components that communicate with each other. For instance an add button or multiple add buttons that when clicked add to a shopping cart(icon) that indicated how much is added to it?
I don't get that button function when I do EXACTLY as told in this video. An instance of the button is just a graphic element and there's no button option with states in the right panel. I've done it over and over with same result. How is that even possible unless Figma is inconstant and buggy?
problem is, as soon as I put the instance in a new component, the interactions wont work anymore. only if I keep them outside any regular components, is this a bug?
I've have some troubles making interactive components work from Library. This is my setup: 1. Designs 2. Library > Components My Designs are using the Library Components and no matter what interaction I'm adding in there it doesn't show up in my Designs.
Agreed, or Fireworks, which had interactive multi-state buttons like this last century. Figma has some great functionality, but it's crazy that a supposedly modern tool makes you build every element from scratch - nav, drop-downs, buttons, tables...
I received the email from Figma that I have access to this beta feature, but for the life of me I cannot get this to work. I am getting the new interaction option "change to" but when I create a prototype with this interaction it just doesn't work. Can anyone please help me troubleshoot this problem? Would really appreciate any help I can get.
Since today is the 8th of March I can't help asking if Figma hires girls. Please bring more girls next time:)) It's a great video as always! Thanks a bunch for sharing
@@frebro It looks like one of the audience's hidden pain points has been revealed. I'm sure that Figma is doing fine with regards to gender equality and such. It's just a matter of showcasing women's work more
How did you reset the tick tack toe instances individually? I would imagine that it would be typing "r" while hovering the interactive component. Or maybe there is another hotkey.
You can think of "reset" as just another variant of the component set. You can add an interactive component transition to it to reset it on click. "R" will reset the entire prototype (this is a function that's existed for years).
@@Figma This is a nice feature for components like toggles where you have a few limited states. But for drop down menus, checkbox and radio button groups where the number of items can vary greatly, this isn’t a great solution. Have you considered having new types of layers which have text associated with them, that would be parsed and used to generate the different variants. The result is an interactive component, but created in a fraction of the time it would take to create one today even with the new feature. For example, you want a checkbox group of 5 items: Add a “checkbox group” layer, and this layer has various properties for styling, but also for the options. It gives you a text field where you can enter the options on each line. It also asks if you want something preselected or not. Does that make sense?
Too bad it doesn't work with children variances interacting with parents (nested, so parents reused to make the child as variation), in protyping it can't switch between the two which ruins the purpose of having children so you don't have to resize 20 variants every time you need some sort of styling adjustment. Please fix this! It would make it far more powerful and useful tool.
The improvements to figma over the past year have been insane.
This was so so cool and it's amazing how we get to hear from the designers and developers who actually made these features!
On my way to complete office hours💪🏻...your guidance is a blessing!
At first, it was challenging for me to understand the interactive components but I had so much fun figuring it out! Love the set of panellists in this office hour!
Figma has been rolling out game changing features one by one. You're absolutely killing it.
FINALLY!!!!!!!!!! Now we can do proper interactive prototypes. when are we going to be able to export natively a video (mp4/gif) of the animation/interactions?
It's a game changing design feature. Well done! I'll never leave the Figma ever.
Really!! That's what people said when they used Adobe/sketch etc 😜😜😜
All these features is the reason why I switched from Sketch to Figma. 2 main features that convinced me to switch are Variants and Auto-layout. Variants do not exist in Sketch and the auto-layout is not as intuitive and fluid as in Figma.
Thank you very much for such an amazing tool for such an affordable price!
This is the simplest and crazy clever solution for a real hassle. Hats down Figma team, standing ovation! Thank you. Pro tipp; keep the beta program live, I wanna sign up for the next features automatic :)
That is mind-blowing! Thank you so much! It's not just the best interface design tool; it's much more than that!!! 😁
Is it just me but the interactive component are not working at the moment in the Figma beta? Am I missing something ?
I love Figma. Thanks, guys! Best interface design tool, and more than that!!!
Awesome new features, ETA for release so we all can use them?
Saw on twitter: End of this month
Super nice! The prototyping is becoming better and better.
.
.
Random note, why are there always so many men in this business? I have a whole team of female consultants but when I watch videos like this and also in my project there's mainly men... We should become more active ladies! ;)
O my god this is amazing.. I loved the launch of variants and this makes Figma an even more complete tool for designers
Finally! This is probably the one feature that XD has had for ages that made it a faster prototyping tool imho. Now if the fixed layers can go behind scrolling ones would be awesome too (which XD does)
It took long, but Figma has finally matured :) Good job!
Just got the beta and it's a game changer for sure
How do you keep the z-index of an open dropdown list on top of everything else in an auto layout? Since it is in the same frame as the trigger, I have a problem that it opens behind the things below.
Um. is this available to public now? I can't connect variants with events like the guys in the video.
OMG! I've been waiting for this for soooooo long. Thank you!
This is very cool! Are you able to share a copy of the file with all the examples?
Super boom feature it saved my project.
This deep video consists lot of things and I actually want to learn figma animation.
How to activate the interactive components?
I can't find the 'change to' interaction.
Does interactive components work for free versions of figma :
If yes , then I can’t seem to be able to link my frames in the prototype section , any help
If no, how can I activate interactive components, any help
This is all very interesting. Is it possible for someone to create two different interactive components that communicate with each other. For instance an add button or multiple add buttons that when clicked add to a shopping cart(icon) that indicated how much is added to it?
When will this come to the regular release?
when it will be released ?
Awesome! But I've not yet the "Change to" as option in my latest Figma version, is it normal?
Yea, this is on beta right now.
I have Beta version but still not able to find 'Change to' option
When will this go live!? I can't wait any longer XD
I don't get that button function when I do EXACTLY as told in this video. An instance of the button is just a graphic element and there's no button option with states in the right panel. I've done it over and over with same result. How is that even possible unless Figma is inconstant and buggy?
Super helpful, thanks y'all!
Very creative stuff !!!!
problem is, as soon as I put the instance in a new component, the interactions wont work anymore. only if I keep them outside any regular components, is this a bug?
Does the button need to be created as a Frame or as a Shape for this to work?
Great Presentation. You guys rocked it
I've have some troubles making interactive components work from Library.
This is my setup:
1. Designs
2. Library > Components
My Designs are using the Library Components and no matter what interaction I'm adding in there it doesn't show up in my Designs.
I learned that how I one thing consists lot of variation and uses
Why in my figma there is no options for me to "Change To"although I have used Variants
Ahhh need to signup for beta.
@@citpw My Figma, has no option "Change To"
@@diemcarol5079 still beta. Need to wait until public launch
When will this feature be available?
Great question!
Interactive components not working properly for me.
Thank you !! it's amazing! Love it
Has this been released yet?
still in beta. You can request to access it on Figma's website where it explains interactive components.
How do I get to be in the 'beta' I want the 'change to' prototype option
Where can i get the demo
You guys rock! Variant components on steroids.
although I had such a good time observing the second person hahaha
Absolutely awesome!
Watching the animations I can't help but think about macromedia Flash....
Agreed, or Fireworks, which had interactive multi-state buttons like this last century. Figma has some great functionality, but it's crazy that a supposedly modern tool makes you build every element from scratch - nav, drop-downs, buttons, tables...
I received the email from Figma that I have access to this beta feature, but for the life of me I cannot get this to work. I am getting the new interaction option "change to" but when I create a prototype with this interaction it just doesn't work.
Can anyone please help me troubleshoot this problem? Would really appreciate any help I can get.
Whaaaaaaaaaaat!!!!!? This is insanely cool.
Is it possible this feature is not released yet?
i have a question please, what about the code. is it possible to get the code when we made a nice animation with interactive components? thxs
Since today is the 8th of March I can't help asking if Figma hires girls. Please bring more girls next time:)) It's a great video as always! Thanks a bunch for sharing
My thought as well. I like that someone asked the question about women authors in the examples as well.
@@frebro It looks like one of the audience's hidden pain points has been revealed. I'm sure that Figma is doing fine with regards to gender equality and such. It's just a matter of showcasing women's work more
Nice!
I keep my design system / components in a separate file. Will the interactivity of these components transfer to other files?
Yes it will!
How did you reset the tick tack toe instances individually? I would imagine that it would be typing "r" while hovering the interactive component. Or maybe there is another hotkey.
You can think of "reset" as just another variant of the component set. You can add an interactive component transition to it to reset it on click. "R" will reset the entire prototype (this is a function that's existed for years).
@@Figma This is a nice feature for components like toggles where you have a few limited states. But for drop down menus, checkbox and radio button groups where the number of items can vary greatly, this isn’t a great solution. Have you considered having new types of layers which have text associated with them, that would be parsed and used to generate the different variants. The result is an interactive component, but created in a fraction of the time it would take to create one today even with the new feature.
For example, you want a checkbox group of 5 items: Add a “checkbox group” layer, and this layer has various properties for styling, but also for the options. It gives you a text field where you can enter the options on each line. It also asks if you want something preselected or not.
Does that make sense?
Hi! Is it still on BETA?
You should see my prototype lol, blue noodles keeps flying around like neuron.
14:00 so what about a radio button?
I was waiting for this a while, you said it's live, but I cannot access.
It's in the beta release. I for one would like to know if we can access the beta release on the web rather than through the desktop beta release.
You can request Beta access to use this. Check their Twitter profile
This is amazing....but our team is still using Sketch :(
16:30 Preserve the text override, state, hover animation
really cool ! thxs
dope stuff
Rock on guys!
Awesome! :-)
you didn't update macOS yet? 😝
Wow....just wow
🤯 😍
this is better the second coming of christ
17:17 Is the guy on the bottom dancing?
it's just me who can't find "change to" behavior?
It is only in beta since this year.
Time stamps anyone ?
Too bad it doesn't work with children variances interacting with parents (nested, so parents reused to make the child as variation), in protyping it can't switch between the two which ruins the purpose of having children so you don't have to resize 20 variants every time you need some sort of styling adjustment. Please fix this! It would make it far more powerful and useful tool.
Am I the only one not able to see this video?
The instructions in the actual Interactive Components Figma file were bloody terrible!
Eat this XD
Jesus Christ
Red sweater guy is creeping me out with his incessant laughing at things that aren't remotely funny. The prototypes were cool though.