Figma tutorial: Interactive components

Поділитися
Вставка
  • Опубліковано 3 гру 2024

КОМЕНТАРІ • 232

  • @Figma
    @Figma  2 місяці тому +2

    "In June 2024, we introduced a redesigned Figma-called UI3.
    With UI3, some parts of this video might not match what you see in the product today. We appreciate your patience while we update our content.
    - Find where features moved to in our guide: help.figma.com/hc/en-us/articles/23954856027159-Navigating-UI3-Figma-s-new-UI
    - Learn more about interactive components: help.figma.com/hc/en-us/articles/360061175334-Create-interactive-components-with-variants"

  • @mikalaisushko3347
    @mikalaisushko3347 3 роки тому +116

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

    • @mischugo
      @mischugo 3 роки тому +7

      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
      @theReal_WKD 3 роки тому +3

      @@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
      @God-T 3 роки тому

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

  • @Potatis1337
    @Potatis1337 3 роки тому +88

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

  • @QueenbeeTTV
    @QueenbeeTTV 3 роки тому +19

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

  • @LORDSofCHAOS333
    @LORDSofCHAOS333 3 роки тому +5

    For a free website builder this is one powerful tool .

  • @met4ltech
    @met4ltech 3 роки тому +14

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

  • @her1884
    @her1884 3 роки тому +13

    Finally!! An early Christmas gift!

  • @thisissyedbasim
    @thisissyedbasim 3 роки тому +7

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

  • @dadandme
    @dadandme 3 роки тому +21

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

  • @Chris.Montecillo
    @Chris.Montecillo 3 роки тому +17

    Slowly getting better and better. Thanks Figma team!

  • @vaanresvaanica
    @vaanresvaanica 3 роки тому +8

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

  • @SyncAndPost
    @SyncAndPost 2 роки тому +6

    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.

  • @FelopVario
    @FelopVario Рік тому

    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.

  • @nhanchanhung
    @nhanchanhung 3 роки тому +17

    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

  • @fatihdemirkan4906
    @fatihdemirkan4906 3 роки тому +2

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

  • @deepti.sharma.
    @deepti.sharma. Рік тому

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

  • @BrialMusic
    @BrialMusic 3 роки тому +3

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

  • @Tschoii90
    @Tschoii90 Рік тому +1

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

  • @LazarusStr
    @LazarusStr Рік тому +12

    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
      @somerandomchannel382 Рік тому

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

  • @DaniGuide
    @DaniGuide 3 роки тому +2

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

  • @lamin1825
    @lamin1825 3 роки тому +1

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

  • @thesugarhighclub3878
    @thesugarhighclub3878 3 роки тому +2

    Already playing around w this new update! Thanks Figma!

  • @yb3985
    @yb3985 3 роки тому +1

    Woahh, this addition make figma even better

  • @sagessedantan
    @sagessedantan 3 роки тому +8

    Finally! This is gonna be so great! 🎉

  • @Samuels691
    @Samuels691 Рік тому

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

  • @PpXx1991
    @PpXx1991 3 роки тому +7

    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!

  • @deepakfialok
    @deepakfialok 2 роки тому +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.

  • @PeaceOfMake
    @PeaceOfMake 2 роки тому

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

  • @neanda
    @neanda 2 роки тому +4

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

  • @jessicat4406
    @jessicat4406 3 роки тому +1

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

  • @UXORBIT
    @UXORBIT 3 роки тому +2

    Best update ever by Figma

  • @joshuajumbo1586
    @joshuajumbo1586 3 роки тому +1

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

  • @taylorfredrickson7750
    @taylorfredrickson7750 2 роки тому +13

    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
      @arihayatbakhsh4994 2 роки тому +2

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

    • @parastouraeisghanavati1233
      @parastouraeisghanavati1233 2 роки тому

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

    • @arihayatbakhsh4994
      @arihayatbakhsh4994 2 роки тому

      @@parastouraeisghanavati1233 unfortunately not

    • @AnniWB
      @AnniWB 2 роки тому

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

    • @yeff5771
      @yeff5771 2 роки тому +5

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

  • @Rishi-vw8nw
    @Rishi-vw8nw 3 роки тому +2

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

  • @irfanchaudhry1339
    @irfanchaudhry1339 3 роки тому +1

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

  • @olgatoltinova5035
    @olgatoltinova5035 3 роки тому +5

    Thank you Figma! This is just amazing:3

  • @emilmarian9964
    @emilmarian9964 3 роки тому +1

    Figma gonna be on another level

  • @carlybarnes1646
    @carlybarnes1646 3 роки тому +2

    So exciting! Thanks Figma Team!

  • @mahmoudhamed8069
    @mahmoudhamed8069 3 роки тому +4

    Finally
    Great work ❤️❤️

  • @fahadshakoor9451
    @fahadshakoor9451 3 роки тому +1

    Finally, Thanks

  • @rayjbraz
    @rayjbraz 3 роки тому +4

    OMG! Finally! Just take my money!

  • @lawrenceslsko1391
    @lawrenceslsko1391 3 роки тому +2

    Figma just put the final nail on AdobeXDs coffin!

  • @Yauboyy
    @Yauboyy Рік тому

    Exactly what I've been looking for!!!

  • @kimsang30
    @kimsang30 2 роки тому

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

  • @michaeldeleau
    @michaeldeleau 3 роки тому +7

    Yes, just yes !

  • @adilhasan4105
    @adilhasan4105 3 роки тому +2

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

  • @Мэрпустыни
    @Мэрпустыни 3 роки тому +7

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

  • @emericgarnier5430
    @emericgarnier5430 3 роки тому +2

    This is insane. Thank you !

  • @quentinnell5208
    @quentinnell5208 3 роки тому +1

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

  • @UXUI
    @UXUI 3 роки тому +1

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

  • @luisglitch
    @luisglitch 3 роки тому +1

    this is definitely a game changer 🙌🏼

  • @martinmelisek1459
    @martinmelisek1459 3 роки тому +3

    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.

  • @jeremykerner2100
    @jeremykerner2100 3 роки тому +4

    Oooooohh 😯 Love this!

  • @Alberfinder
    @Alberfinder 2 роки тому

    WOW this amazing feature! Thanks!

  • @alwintheodoric6211
    @alwintheodoric6211 3 роки тому +1

    Thank you so much for this!!

  • @Jlogical230
    @Jlogical230 Рік тому

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

  • @stevemalone6062
    @stevemalone6062 3 роки тому +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
      @kitkatx37x 2 роки тому +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
      @blythekimee 2 роки тому

      stucked in same problem

  • @JustAnotherUser-sf5yk
    @JustAnotherUser-sf5yk Місяць тому

    this is insane! Love it!!

  • @kelindrawn
    @kelindrawn 3 роки тому +3

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

  • @RamonMartinez-jz9uv
    @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.

  • @marcoatmac
    @marcoatmac 2 роки тому +1

    This is amazing, thank you very much

  • @d3v-x64
    @d3v-x64 2 роки тому

    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.

  • @BowenWei
    @BowenWei 3 роки тому +2

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

    • @sabamehfooz9167
      @sabamehfooz9167 2 роки тому

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

    • @xiebaiqin
      @xiebaiqin 2 роки тому

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

  • @KathBorup
    @KathBorup 3 роки тому +1

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

  • @nyutakulik4855
    @nyutakulik4855 Рік тому

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

  • @SundayShi
    @SundayShi 3 роки тому +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.

  • @SneakerDaaju
    @SneakerDaaju 11 місяців тому +3

    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
      @KriMiTingz 10 місяців тому

      I have the same problem too.

  • @alexwishnick
    @alexwishnick 2 місяці тому +1

    When I choose a seat, how can I make the Next Flight button light up?

  • @rajanbyroju9261
    @rajanbyroju9261 2 роки тому

    Such a beautiful video ❤️

  • @suzuyah
    @suzuyah 3 роки тому

    Дождались 🤧

  • @Basiuuuula
    @Basiuuuula 3 роки тому +1

    this is just wonderful

  • @Yovistamps
    @Yovistamps Рік тому

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

  • @kenliang7203
    @kenliang7203 3 роки тому +1

    Thank you for this!

  • @austinandriese
    @austinandriese 3 роки тому +1

    Love this so much ❤️

  • @yusrilramadhan
    @yusrilramadhan 3 роки тому +1

    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
      @sabamehfooz9167 2 роки тому

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

  • @mohamedajaf411
    @mohamedajaf411 2 роки тому +2

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

    • @xiebaiqin
      @xiebaiqin 2 роки тому

      I have the same problem.

  • @alexdesforges6377
    @alexdesforges6377 2 роки тому

    EXCELLENT video thank you!

  • @KD9-37
    @KD9-37 3 роки тому

    yes!! I LOVE YOU FIGMA

  • @isaacudom8136
    @isaacudom8136 3 роки тому +2

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

    • @Figma
      @Figma  3 роки тому +7

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

    • @isaacudom8136
      @isaacudom8136 3 роки тому +2

      @@Figma Amazing. Thank you

  • @alexcarl5669
    @alexcarl5669 3 роки тому +1

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

  • @mayanksurya3377
    @mayanksurya3377 3 роки тому

    Thank you. Learnt a lot!

  • @nysha7411
    @nysha7411 3 роки тому +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
      @bradmacdonald7626 3 роки тому +2

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

    • @00bava
      @00bava 3 роки тому

      @@bradmacdonald7626 Thanks!

  • @-grey
    @-grey 3 роки тому +2

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

    • @Figma
      @Figma  3 роки тому +2

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

    • @rpavl
      @rpavl 3 роки тому

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

  • @abdulrahimjalloh8469
    @abdulrahimjalloh8469 2 роки тому

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

  • @talhasaeed
    @talhasaeed 3 роки тому +1

    cool! new to learn!

  • @НиколаВукојевић-ж3я

    greetings, I need help; I watched the video and at 02:03 it was shown how to make the text interactive within the checkbox. I am bothered by the fact that in a certain situation when I drag the text and add it in the layers from the left side to checked/unchecked, the text becomes invisible to me and the box that includes the text and the button is not created as it should be, but only one or the other. if I use shift to select both the text and the button, then the change to prototype option is not available and I cannot make the text and the words interactive at all, but only the button. Has anyone had a similar problem? If so, can you help me? thank you.

  • @areeshaafridi642
    @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
      @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 (ua-cam.com/video/PNJxeD29ZTg/v-deo.html).

  • @cristinagg2113
    @cristinagg2113 2 роки тому +3

    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
      @jasjotkaur2698 Рік тому

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

  • @benjaminandresen7113
    @benjaminandresen7113 Рік тому

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

  • @MelinaBering1
    @MelinaBering1 3 роки тому +1

    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?

  • @pixelotix
    @pixelotix 2 роки тому +3

    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
      @BlairRorani 2 роки тому

      Do you mean like toggling dark mode on?

  • @uimotion
    @uimotion 3 роки тому +2

    wow😲
    Amazing

  • @iguisard
    @iguisard 3 роки тому +1

    Need an option for multi of the same trigger.

  • @Elusar316
    @Elusar316 3 роки тому +1

    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.

  • @tonyredhead3413
    @tonyredhead3413 3 роки тому +1

    Another newbie question. I followed the Variants tutorial and now I'm trying to do the Interactive components tutorial but I'm running into a problem where the labels and the checkboxes remain individual elements. Starting with the Component built in the Variants tutorial I don't have the empty diamond element Checkbox in the frame, all I have is a filled diamond Checked and Unchecked and the 'T' label element. Any idea what I'm doing wrong?

    • @Figma
      @Figma  3 роки тому +1

      Hi Tony! It looks like you're trying to place a text layer (T label element) inside a main component (filled diamond). From the layers panel on the left sidebar, try dragging the text layer into the main component, so that the text layer is nested inside - or a child element of - the main component.
      To create an instance of the component (empty diamond element), copy / paste the main component. There are many other ways to do this. Find out how here: bit.ly/2Y0EXpa
      Also, be sure to check out our Figma for beginners series! bit.ly/3vZahBd
      Hope this helps!

    • @tonyredhead3413
      @tonyredhead3413 3 роки тому +1

      @@Figma Still not working :-( Do I have to reframe the checkbox component and the label text element and create a new component?

    • @00bava
      @00bava 3 роки тому

      @@tonyredhead3413 Did you solve the problem? I'm stucked in the same issue.

    • @xiebaiqin
      @xiebaiqin 2 роки тому

      @@00bava same for me. I don't know where she get the empty diamonds.

    • @meggo301
      @meggo301 2 роки тому +1

      Uncheck "clip content" for each component. Drove me crazy for about an hour then I saw someone else post it. One click. Ugh! lol

  • @petermitko5742
    @petermitko5742 3 роки тому +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
      @petermitko5742 3 роки тому

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

    • @Figma
      @Figma  3 роки тому

      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
      @carolinaangulo2849 3 роки тому

      Same here

    • @sabamehfooz9167
      @sabamehfooz9167 2 роки тому

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

  • @putzfetzenORG
    @putzfetzenORG 2 роки тому

    👋 Goodbye exponential screen permutations! 🙁 As I did in countless design prototyping software before.
    👍 Hello interactive components! 🙂 Nice!

  • @patrickrushton
    @patrickrushton 2 роки тому +1

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

  • @jon12181
    @jon12181 3 роки тому +1

    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
      @sabamehfooz9167 2 роки тому

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

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