No video :(

Figma tutorial: Interactive components

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

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

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

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

14 авг 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

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

@mischugo 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 года назад

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

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

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

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

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

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

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

Finally!! An early Christmas gift!

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

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

@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

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

For a free website builder this is one powerful tool .

@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 Год назад

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

@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

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

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

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

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

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

Finally! This is gonna be so great! 🎉

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

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

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

@Tschoii90 Год назад

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

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

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

Already playing around w this new update! Thanks Figma!

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

@deepti.sharma. Год назад

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

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

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.

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

Found the solution: Apparently you can not add this feature to old projects. Tried on a new project and it worked just fine

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

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

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

Same here

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

uncheck clip content box on the right side of design panel (below width and weight frame)

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

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

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

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

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

Finally Great work ❤️❤️

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

So exciting! Thanks Figma Team!

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

Yes, just yes !

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

Best update ever by Figma

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

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

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

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

Thank you Figma! This is just amazing:3

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

@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

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

Woahh, this addition make figma even better

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

Finally!! Thanks so much! Super valuable!

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

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

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

OMG! Finally! Just take my money!

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

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

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

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

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

@Samuels691 Год назад

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

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

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

Finally, Thanks

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

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

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

Oooooohh 😯 Love this!

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

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

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

Figma gonna be on another level

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

This is insane. Thank you !

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

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

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

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?

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

uncheck clip content box on the right side of design panel (below width and weight frame)

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

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

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

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

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

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

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

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

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

Figma just put the final nail on AdobeXDs coffin!

@Yauboyy Год назад

Exactly what I've been looking for!!!

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

this is definitely a game changer 🙌🏼

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

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?

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

uncheck clip content box on the right side of design panel (below width and weight frame)

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

This is amazing, thank you very much

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

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

WOW this amazing feature! Thanks!

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

Thank you so much for this!!

@nyutakulik4855 Год назад

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

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

I love this but it seems as if when I try it, it doesn’t work.

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

Thank you for this!

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

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.

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

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..?

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

uncheck clip content checkbox [below height width frame`s properties...]

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

@@olfadhaouadi1975 thanks for that, I was stuck for a while until I saw your response :-)

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

@@olfadhaouadi1975 Thank you so much

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

@@olfadhaouadi1975 Thanks!! like saver!!

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

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

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

this is just wonderful

@Geovanna.michelle Год назад

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

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

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

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?

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

Uncheck the clip content from right side panel

@rajanbyroju9261 Год назад

Such a beautiful video ❤️

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

cool! new to learn!

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

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

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

I have the same problem too.

@d3v-x64 Год назад

I am a developer using Figma on a project for planing and documenting purposes. While it is true that that feature is amazing it makes me wonder, when is enough? Keep in mind, all you do in Figma needs to be done in actual code once again. But that is just my perspective on it as a person which does all the work alone without help.

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

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.

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

Do you mean like toggling dark mode on?

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

Good job

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

Thank you. Learnt a lot!

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

wow😲 Amazing

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

Love this so much ❤️

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

EXCELLENT video thank you!

@-grey 2 года назад

Nice. XD already had this, so it was annoying to choose tools based on strengths. Is it still in beta?

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

Interactive components are now out of beta and available for all Figma editors to use! :)

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

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

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

yes!! I LOVE YOU FIGMA

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

Do I need the beta version of figma to access the interactive components functions?

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

Hi Isaac, no you don't! Interactive components are now out of beta and available for all Figma editors to use.

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

@@Figma Amazing. Thank you

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

Дождались 🤧

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

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?

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

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

Why the text label I created at 2:00 when I move to checked and unchecked, it disappear????????

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

uncheck clip content box on the right side of design panel (below width and weight frame) , i believe this work!

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

@@sabamehfooz9167 I tried this, and I get interactions points for both checkbox and label.

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

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

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

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?

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

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

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

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

Please consider making these tutorials WITHOUT the background music. It's fine for a short demo but super distracting for a longer tutorial.

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

Anyone happen to know why when adding default text to the component, my text disappears unlike the example in the video at 2:04 ?

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

Was wondering the same thing, i think it's because on the component frame, "clip content" is checked on

@00bava 2 года назад

@@bradmacdonald7626 Thanks!

@areeshaafridi642 Год назад

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.

@Figma Год назад

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 (ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-PNJxeD29ZTg.html).