Office hours: Get started with interactive components
HTML-код
- Опубликовано: 7 мар 2021
- The interactive components beta is live! Check out office hours to get a demo and learn tips and tricks.
#Figma #OfficeHours #InteractiveComponents #Components 
Наука
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!
Figma has been rolling out game changing features one by one. You're absolutely killing it.
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!
I love Figma. Thanks, guys! Best interface design tool, and more than that!!!
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 😜😜😜
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 :)
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?
O my god this is amazing.. I loved the launch of variants and this makes Figma an even more complete tool for designers
OMG! I've been waiting for this for soooooo long. Thank you!
It took long, but Figma has finally matured :) Good job!
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!
Is it just me but the interactive component are not working at the moment in the Figma beta? Am I missing something ?
Absolutely awesome!
Super helpful, thanks y'all!
Thank you !! it's amazing! Love it
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.
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)
That is mind-blowing! Thank you so much! It's not just the best interface design tool; it's much more than that!!! 😁
You guys rock! Variant components on steroids.
Just got the beta and it's a game changer for sure
really cool ! thxs
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?
Very creative stuff !!!!
When will this go live!? I can't wait any longer XD
Rock on guys!
dope stuff
Awesome! :-)
Does the button need to be created as a Frame or as a Shape for this to work?
Awesome new features, ETA for release so we all can use them?
Saw on twitter: End of this month
although I had such a good time observing the second person hahaha
How to activate the interactive components?
Super boom feature it saved my project.
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?
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
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! ;)
Wow....just wow
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 can't find the 'change to' interaction.
This deep video consists lot of things and I actually want to learn figma animation.
Um. is this available to public now? I can't connect variants with events like the guys in the video.
When will this come to the regular release?
Whaaaaaaaaaaat!!!!!? This is insanely cool.
when it will be released ?
I learned that how I one thing consists lot of variation and uses
🤯 😍
How do I get to be in the 'beta' I want the 'change to' prototype option
This is very cool! Are you able to share a copy of the file with all the examples?
Great Presentation. You guys rocked it
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?
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
Interactive components not working properly for me.
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.
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
16:30 Preserve the text override, state, hover animation
Where can i get the demo
Why in my figma there is no options for me to "Change To"although I have used Variants
Ahhh need to signup for beta.
@@CP-ik1xu My Figma, has no option "Change To"
@@diemcarol5079 still beta. Need to wait until public launch
14:00 so what about a radio button?
Has this been released yet?
still in beta. You can request to access it on Figma's website where it explains interactive components.
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
You should see my prototype lol, blue noodles keeps flying around like neuron.
Hi! Is it still on BETA?
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?
Is it possible this feature is not released yet?
When will this feature be available?
Great question!
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...
This is amazing....but our team is still using Sketch :(
this is better the second coming of christ
17:17 Is the guy on the bottom dancing?
you didn't update macOS yet? 😝
Time stamps anyone ?
it's just me who can't find "change to" behavior?
It is only in beta since this year.
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
Eat this XD
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 instructions in the actual Interactive Components Figma file were bloody terrible!
Am I the only one not able to see this video?
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.