Figma tutorial: Interactive components
HTML-код
- Опубликовано: 13 июн 2024
- Figma is free to use. Sign up here: bit.ly/3msp0OV
Interactive Components is a powerful feature that allows you to define prototyping connections between variants in a component set. In this video, we'll show you the basics of how to create interactive components, and use them in both simple and complex designs.
Checkout our previous Figma variants tutorial video: • Figma Tutorial: Variants
Play with interactive components with our community files:
Tripma community file: bit.ly/3nWIgV5
Interactive components playground file: bit.ly/3pyYlon
Learn more on our Help Center: bit.ly/3BTOYTP
Interactive components forum: bit.ly/3je2BFQ
Check out additional examples from the Figma Community:
- ピカチュウを走らせましょう🐱 by Ryan.Jyu and 赖赖💓: bit.ly/3BLKGxz
- POP IT! by Emil: bit.ly/3BPVpay
- 360' Rotate Hero Slider by Dhanushka Thushara: bit.ly/30xBhvZ
- UI Microinteractions by Abel Hancock: bit.ly/2YSZHiu
Timestamps:
00:00 Variants rewind
00:17 Intro to interactive components
01:37 Additional interactive components examples
01:45 Simple interactive components example
03:27 Override in interactive components
04:25 Interactive components with smart animate
05:30 Interactive components in large-scale designs
08:08 Outro
#Figma #FigmaTutorial #InteractiveComponents - Наука
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 😁
@@michaelschultze3595 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!!!
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've been waiting for this feature for so long! Thank u Figma!
Finally! With this very useful feature, the gap between Figma and XD is now closed 👏
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.
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 :)
Slowly getting better and better. Thanks Figma team!
so true
I NEEDED THIS FEATURE FOR A LONG TIME AND WAITING FOR IT.
THANK YOU FIGMA!! ANOTHER GREAT REASON TO SWITCH TO FIGMA!! THANKS
Finally!! An early Christmas gift!
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
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!
Love this, was waiting long enough for Figma to release an update on this. Can't wait to get started
For a free website builder this is one powerful tool .
Started using Figma a month ago and I'm amazed. It's so cool!
Excellent tutorial, girl! I've already fallen in love with your voice!
OMG, finally its been released! Best update as always, thanks Figma!
I'm so excited about this. Thank you, Figma team!!
New into Figma after a few years and this is just incredible!11!
Finally. I think this property is so helpful for us, i using this till one or two weeks and i liked that
Missing fonts in mobile prototype seems to be fixed as well! Don't have to outline text anymore. Great work
Finally! This is gonna be so great! 🎉
Thank you Figma! This is just amazing:3
This is great! Thanks a lot for your hard work!
Finally!! Thanks so much! Super valuable!
Already playing around w this new update! Thanks Figma!
Woo! So exciting! Well demonstrated and explained also :)
Thank you!!! The video is super helpful, love you all
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.
Exactly what I've been looking for!!!
This is insane. Thank you !
So exciting! Thanks Figma Team!
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. :))
Woahh, this addition make figma even better
Finally
Great work ❤️❤️
Best news ever.. such a small thing, but such a massive impact !! going to save a lot of time with this.😎
this is definitely a game changer 🙌🏼
figma is such a great example of innovation taking over monopoly of sketch and XD.
This is amazing, thank you very much
WOW this amazing feature! Thanks!
It was so helpful! Thank you so much ❤❤❤❤
Why you guys are best 😭 figma is the best ❤️
Yes, just yes !
Thank you. Learnt a lot!
EXCELLENT video thank you!
Thank you so much for this!!
Great!! Thank U ; )
Happy designing!!!!
Such a beautiful video ❤️
OMG! Finally! Just take my money!
I'm shaking. How can a product be so good
Best update ever by Figma
Love this so much ❤️
Finally, Thanks
Thank you for this!
Oooooohh 😯 Love this!
this is just wonderful
Figma gonna be on another level
This is great🥰😍. keep the good work up.
cool! new to learn!
yes!! I LOVE YOU FIGMA
Как я Вас люблю, вы бы знали.
Super amazing!
HOLY SHIT THIS IS THE BEST UPDATE EVER!!!!!!!
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. :)
super thanks very much!
Amazing thanks
OMG THANK YOU SO MUCH
Fantastic!!!!!
Figma just put the final nail on AdobeXDs coffin!
Top Material!
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.
wow😲
Amazing
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.
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)
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.
Hello, thank you very much. How can we restrict to select just a single sit ?
Дождались 🤧
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.
im sure this will be easier with the new updates :)
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, I love this feature, but I wanted to know if I can add text to the component without a frame so that when hovering it shows the text.
Good job
wow) cool!❤
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.
Amazing
FINALLLLYYYYY!!!!
Great👍
Is there a way to "reset" all states in a group? If you move between screens it remembers the last state of all interactive components.
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)
Hi, this is great!! I only wonder how I disable one instance when another is "checked"? Please help
How did you get the pointer cursor to appear on something that's not a click action? Would like to add for hover states.
How can you do it so when you check s box the other box gets unchecked? Please help
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
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?
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.
If we create option buttons using components and variants, how can we go to another frame after selecting an option?
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.
SUPER !!!!!