Figma tutorial: Interactive components

Подписаться 547 тыс.

Просмотров 523 тыс.

50% 1

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

Наука

Опубликовано:

8 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 229

@mikalaisushko3347 2 года назад

It's finally live!! That is Best Figma update this year

@michaelschultze3595 2 года назад

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 😁

@theReal_WKD 2 года назад

@@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 👀

@God-T 2 года назад

am i the only one getting a sexual vibe from this woman voice 😳 !

@Potatis1337 2 года назад

Have been using this for months, it's really no other way to describe it: It's mind blowingly amazing

@QueenbeeTTV 2 года назад

THANK THE DARK LORD, this has been the biggest pain in my butt using Figma... I am sooooooooooo happy we can finaly do this!!!

@nhanchanhung 2 года назад

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

@met4ltech 2 года назад

Finally, i've been waiting for this feature for so long! Thank u Figma!

@dadandme 2 года назад

Finally! With this very useful feature, the gap between Figma and XD is now closed 👏

@SyncAndPost 2 года назад

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.

@neanda 2 года назад

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 :)

@Chris.Montecillo 2 года назад

Slowly getting better and better. Thanks Figma team!

@1984piolo Год назад

so true

@thisissyedbasim 2 года назад

I NEEDED THIS FEATURE FOR A LONG TIME AND WAITING FOR IT. THANK YOU FIGMA!! ANOTHER GREAT REASON TO SWITCH TO FIGMA!! THANKS

@her1884 2 года назад

Finally!! An early Christmas gift!

@LazarusStr Год назад

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!!

@somerandomchannel382 10 месяцев назад

and now, with figma variables, we can build the whole site in figma basically :d

@PpXx1991 2 года назад

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!

@joshuajumbo1586 2 года назад

Love this, was waiting long enough for Figma to release an update on this. Can't wait to get started

@LORDSofCHAOS333 2 года назад

For a free website builder this is one powerful tool .

@PeaceOfMake 2 года назад

Started using Figma a month ago and I'm amazed. It's so cool!

@vaanresvaanica 2 года назад

Excellent tutorial, girl! I've already fallen in love with your voice!

@jessicat4406 2 года назад

I'm so excited about this. Thank you, Figma team!!

@DaniGuide 2 года назад

OMG, finally its been released! Best update as always, thanks Figma!

@Tschoii90 Год назад

New into Figma after a few years and this is just incredible!11!

@fatihdemirkan4906 2 года назад

Finally. I think this property is so helpful for us, i using this till one or two weeks and i liked that

@lamin1825 2 года назад

Missing fonts in mobile prototype seems to be fixed as well! Don't have to outline text anymore. Great work

@sagessedantan 2 года назад

Finally! This is gonna be so great! 🎉

@olgatoltinova5035 2 года назад

Thank you Figma! This is just amazing:3

@kelindrawn 2 года назад

This is great! Thanks a lot for your hard work!

@makemoneyandthrive 2 года назад

Finally!! Thanks so much! Super valuable!

@thesugarhighclub3878 2 года назад

Already playing around w this new update! Thanks Figma!

@KathBorup 2 года назад

Woo! So exciting! Well demonstrated and explained also :)

@user-dx2vf6xo7t Год назад

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.

@kimsang30 2 года назад

Thank you!!! The video is super helpful, love you all

@Yauboyy Год назад

Exactly what I've been looking for!!!

@emericgarnier5430 2 года назад

This is insane. Thank you !

@carlybarnes1646 2 года назад

So exciting! Thanks Figma Team!

@BrialMusic 2 года назад

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. :))

@mahmoudhamed8069 2 года назад

Finally Great work ❤️❤️

@yb3985 2 года назад

Woahh, this addition make figma even better

@quentinnell5208 2 года назад

Best news ever.. such a small thing, but such a massive impact !! going to save a lot of time with this.😎

@luisglitch 2 года назад

this is definitely a game changer 🙌🏼

@deepti.sharma. 9 месяцев назад

figma is such a great example of innovation taking over monopoly of sketch and XD.

@marcoatmac 2 года назад

This is amazing, thank you very much

@Alberfinder 2 года назад

WOW this amazing feature! Thanks!

@nyutakulik4855 Год назад

It was so helpful! Thank you so much ❤❤❤❤

@Rishi-vw8nw 2 года назад

Why you guys are best 😭 figma is the best ❤️

@michaeldeleau 2 года назад

Yes, just yes !

@mayanksurya3377 2 года назад

Thank you. Learnt a lot!

@alexdesforges6377 2 года назад

EXCELLENT video thank you!

@alwintheodoric6211 2 года назад

Thank you so much for this!!

@UXUI 2 года назад

Great!! Thank U ; ) Happy designing!!!!

@rajanbyroju9261 Год назад

Such a beautiful video ❤️

@rayjbraz 2 года назад

OMG! Finally! Just take my money!

@Samuels691 Год назад

I'm shaking. How can a product be so good

@UXWITHSAURABH 2 года назад

Best update ever by Figma

@austinandriese 2 года назад

Love this so much ❤️

@fahadshakoor9451 2 года назад

Finally, Thanks

@kenliang7203 2 года назад

Thank you for this!

@jeremykerner2100 2 года назад

Oooooohh 😯 Love this!

@Basiuuuula 2 года назад

this is just wonderful

@emilmarian9964 2 года назад

Figma gonna be on another level

@Jlogical230 8 месяцев назад

This is great🥰😍. keep the good work up.

@talhasaeed 2 года назад

cool! new to learn!

@KD9-37 2 года назад

yes!! I LOVE YOU FIGMA

@user-ut2ip3ux7q 2 года назад

Как я Вас люблю, вы бы знали.

@gedionsilass 2 года назад

Super amazing!

@adilhasan4105 2 года назад

HOLY SHIT THIS IS THE BEST UPDATE EVER!!!!!!!

@irfanchaudhry1339 2 года назад

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. :)

@OzbegimMarketing 2 года назад

super thanks very much!

@graphic-nations 2 года назад

Amazing thanks

@osservatore8515 2 года назад

OMG THANK YOU SO MUCH

@zoeho3433 2 года назад

Fantastic!!!!!

@lawrenceslsko1391 2 года назад

Figma just put the final nail on AdobeXDs coffin!

@danieldesigns3124 2 года назад

Top Material!

@KonstantinTorkhov 2 года назад

Awesome!

@martinmelisek1459 2 года назад

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.

@uimotion 2 года назад

wow😲 Amazing

@peoplelikegames 7 месяцев назад

THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!

@taylorfredrickson7750 2 года назад

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.

@arihayatbakhsh4994 2 года назад

when i move the text into the checked and unchecked it disappears. Could you please explain what I'm doing wrong?

@parastouraeisghanavati1233 2 года назад

@@arihayatbakhsh4994 I have the same problem. Could you fix it?

@arihayatbakhsh4994 2 года назад

@@parastouraeisghanavati1233 unfortunately not

@AnniWB Год назад

Hi, I'm having the same problem, could someone solve it?

@yeff5771 Год назад

@@AnniWB unselect the clip content option (right above)

@deepakfialok 2 года назад

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.

@abdulrahimjalloh8469 Год назад

Hello, thank you very much. How can we restrict to select just a single sit ?

@suzuyah 2 года назад

Дождались 🤧

@SundayShi 2 года назад

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.

@Geovanna.michelle 11 месяцев назад

im sure this will be easier with the new updates :)

@alexanderruiz2512 2 года назад

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.

@cristinagg2113 2 года назад

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!

@jasjotkaur2698 Год назад

Hey @cristinag2113, did you get any solution for this query? Please share.

@BaxtiyorjonSobirjonov 2 года назад

Good job

@olena.r 2 года назад

wow) cool!❤

@mohamedajaf411 2 года назад

when i drag the 'label' text into component in layers section, that text gets disappeared. What to do for that?

@xiebaiqin 2 года назад

I have the same problem.

@JEsterCW 2 года назад

Amazing

@evgenyzakharov3759 2 года назад

Great👍

@Oswee 2 года назад

FINALLLLYYYYY!!!!

@imLOSTirl 2 года назад

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.

@fabiobarreiro 2 года назад

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)

@benjaminandresen7113 9 месяцев назад

Hi, this is great!! I only wonder how I disable one instance when another is "checked"? Please help

@ItsMeSteveyP 2 года назад

How did you get the pointer cursor to appear on something that's not a click action? Would like to add for hover states.

@emadelsammad5513 Год назад

How can you do it so when you check s box the other box gets unchecked? Please help

@stevemalone6062 2 года назад

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?

@kitkatx37x 2 года назад

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?

@blythekimee 2 года назад

stucked in same problem

@puchingballz 2 года назад

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?

@travelandfestivals Год назад

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.

@sudiptadeb8395 2 года назад

If we create option buttons using components and variants, how can we go to another frame after selecting an option?

@RamonMartinez-jz9uv 2 года назад

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.