Office hours: Get started with interactive components

[@blaskotron]

The improvements to figma over the past year have been insane.

[@CuttingEdgeSchool]

This was so so cool and it's amazing how we get to hear from the designers and developers who actually made these features!

[@sarthakaswal990]

On my way to complete office hours💪🏻...your guidance is a blessing!

[@Astralmess]

Figma has been rolling out game changing features one by one. You're absolutely killing it.

[@aartibandekar9520]

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!

[@benjaminko7812]

It's a game changing design feature. Well done! I'll never leave the Figma ever.

[@prasanjeetmohanty]

Really!! That's what people said when they used Adobe/sketch etc 😜😜😜

[@acryliq]

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!

[@gabor.kovacs]

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

[@alloymerge]

I love Figma. Thanks, guys! Best interface design tool, and more than that!!!

[@yasirdesigner98276]

That is mind-blowing! Thank you so much! It's not just the best interface design tool; it's much more than that!!! 😁

[@mooretto]

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?

[@florisvandriel5673]

O my god this is amazing.. I loved the launch of variants and this makes Figma an even more complete tool for designers

[@krauseurowag4657]

It took long, but Figma has finally matured :) Good job!

[@majestic0424]

Is it just me but the interactive component are not working at the moment in the Figma beta? Am I missing something ?

[@banbanNZ]

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)

[@agcreative425]

Just got the beta and it's a game changer for sure

[@helenapfisterer2848]

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

[@JohnCumming]

Awesome new features, ETA for release so we all can use them?

[@MrSpinwheel]

Saw on twitter: End of this month

[@ecila89]

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.

[@StephanieLopez-vo6nf]

OMG! I've been waiting for this for soooooo long. Thank you!

[@MTandi]

Um. is this available to public now? I can't connect variants with events like the guys in the video.

[@ShivaniSawant]

I can't find the 'change to' interaction.

[@alexandrerochabr]

when it will be released ?

[@blekdesign]

How to activate the interactive components?

[@gemischte-tuete]

When will this come to the regular release?

[@abhinavrv0092]

Great Presentation. You guys rocked it

[@ashishmishra238]

Super boom feature it saved my project.

[@fajleyrabbe2930]

16:30 Preserve the text override, state, hover animation

[@milasquartz3842]

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

[@sitarashah4370]

This is very cool! Are you able to share a copy of the file with all the examples?

[@amolbharambe8827]

Very creative stuff !!!!

[@BBICS22]

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.

[@KristpsRomanovskis]

Does the button need to be created as a Frame or as a Shape for this to work?

[@Underhills]

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?

[@bygedevaan]

14:00 so what about a radio button?

[@mikalaisushko3347]

Absolutely awesome!

[@chakhmanmohamed9436]

Where can i get the demo

[@rajeshkanna6596]

Interactive components not working properly for me.

[@tayyabsohail8823]

This deep video consists lot of things and I actually want to learn figma animation.

[@shivasherbaf5873]

Awesome! But I've not yet the "Change to" as option in my latest Figma version, is it normal?

[@remusb]

Yea, this is on beta right now.

[@kapilrajput13]

I have Beta version but still not able to find 'Change to' option

[@n8n565]

Whaaaaaaaaaaat!!!!!? This is insanely cool.

[@freiod]

How do I get to be in the 'beta' I want the 'change to' prototype option

[@chrislopez9156]

Super helpful, thanks y'all!

[@deniseene6797]

When will this feature be available?

Great question!

[@rsmolkin]

Has this been released yet?

[@sjont]

still in beta. You can request to access it on Figma's website where it explains interactive components.

[@jeremykerner2100]

You guys rock! Variant components on steroids.

[@VictorEnriqueEspinozaLanyi]

Hi! Is it still on BETA?

[@citpw]

Why in my figma there is no options for me to "Change To"although I have used Variants

[@citpw]

Ahhh need to signup for beta.

[@diemcarol5079]

@@citpw My Figma, has no option "Change To"

[@citpw]

@@diemcarol5079 still beta. Need to wait until public launch

[@tommywagelaar9654]

Is it possible this feature is not released yet?

[@yamitibug]

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?

[@syedsufyanpervez7914]

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.

[@olgasirenko6892]

Thank you !! it's amazing! Love it

[@marinaafonskaya1850]

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]

My thought as well. I like that someone asked the question about women authors in the examples as well.

[@marinaafonskaya1850]

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

[@stephanenicolas6250]

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

[@patrikmedia]

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?

[@zurnz]

When will this go live!? I can't wait any longer XD

[@HambinoTheGreat]

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.

[@Figma]

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

[@EPSTomcat11]

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

[@tayyabsohail8823]

I learned that how I one thing consists lot of variation and uses

[@majestic0424]

Watching the animations I can't help but think about macromedia Flash....

[@AdamJRichardson]

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

[@Monkeystiks]

dope stuff

[@ismxil]

You should see my prototype lol, blue noodles keeps flying around like neuron.

[@stephanenicolas6250]

really cool ! thxs

[@aranzazudelcastillofigueru3147]

Awesome! :-)

[@CuttingEdgeSchool]

although I had such a good time observing the second person hahaha

[@axelcasanova4971]

17:17 Is the guy on the bottom dancing?

[@Elusar316]

Nice! I keep my design system / components in a separate file. Will the interactivity of these components transfer to other files?

[@tizutitandula5638]

Yes it will!

[@ManuelColomboDesign]

Rock on guys!

[@bigtutos5804]

I was waiting for this a while, you said it's live, but I cannot access.

[@Scio_]

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.

[@remusb]

You can request Beta access to use this. Check their Twitter profile

[@yiwu710]

This is amazing....but our team is still using Sketch :(

[@iamsajaad]

you didn't update macOS yet? 😝

[@satrioadibtaufiqurrahman8297]

it's just me who can't find "change to" behavior?

[@gemischte-tuete]

It is only in beta since this year.

[@adrenaline328]

🤯 😍

[@choongching]

Wow....just wow

[@emanuelevanossi8315]

this is better the second coming of christ

[@jadarobinson6478]

Time stamps anyone ?

[@anastasiastallcop8963]

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.

[@yoyoz333]

The instructions in the actual Interactive Components Figma file were bloody terrible!

[@kxp1996]

Am I the only one not able to see this video?

[@scrooge-mcduck]

Eat this XD

[@adlsfreund]

Jesus Christ

[@punkyllama420]

Red sweater guy is creeping me out with his incessant laughing at things that aren't remotely funny. The prototypes were cool though.