Micro animations in Figma

Поделиться
HTML-код
  • Опубликовано: 5 янв 2025

Комментарии • 74

  • @BigMoneyKirk
    @BigMoneyKirk Год назад +32

    This is so good! Thank you for even going further into breaking down the reasons of WHY you chose to do the things you did - which really helped me learn your process. I can’t wait to start applying these techniques!!

  • @anishhirlekar
    @anishhirlekar Год назад +9

    Wow, the minute details. So many times we face these small issues while making micro-interactions, now hopefully I should be able to solve them with your techniques which sounds so simple, but truly so much of thought has gone behind that to make it perfect. Thank you!

  • @utlaxis
    @utlaxis Год назад +36

    Amazing tutorial and thanks for the extra examples that explain the error cases, I think this is very educational congrats!

  • @whatsoeverimin
    @whatsoeverimin Год назад +12

    Thank you a lot for this tutorial, and ESPECIALLY for the last part, because it's incredibly useful for both beginners and professionals. Great job so far!

  • @beingdealtwith
    @beingdealtwith Год назад +6

    This was really a good tutorial, especially that last bit where she explains why she did it the way she did with examples, it cleared up my confusions head on. Thank you for this!

  • @megaroeny
    @megaroeny Год назад +1

    The breakdown at the end with the Q&A was fantastic! Thank you!

  • @manatag7
    @manatag7 Год назад +18

    what a great tutorial and a great format with that additional examples and explanations. thank you!

  • @bandadaapp2485
    @bandadaapp2485 Год назад +1

    I loved the explanation with the shoulders swaying.

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

    Oh, wow!!! I need a tutorial about every single thing on Figma by you! Oh my, the details about why choosing every move or variation is by far, the best. I love the way you explain everything, how you communicate it, and the fun you add to it! Every time I learn something new with your guidance, I enjoy and learn a lot. Thanks!!! Ps: Ps: By the way, I loved the wiggle every time!

  •  Год назад +2

    This is super helpful. I'd love to see more micro animations like these. Super thank you so much

  • @kaii456
    @kaii456 Год назад

    Beautifully done. Love the negative explanations at the end to describe different outputs! This is where many ppl often leave our information!

  • @NitinSingh-dw6zp
    @NitinSingh-dw6zp 4 месяца назад +1

    Amzing video, just wanted to get started with micro interactions to create one for my project. And yes I created one with ending of the video.

  • @NehmatGereige
    @NehmatGereige 5 месяцев назад

    Brilliant explanation of what not to do. love the details in your video and the clarity of expression and thought process. Thank you.

  • @basuki094
    @basuki094 Год назад +13

    after making the component set, it's not working. before that it's working fine. what am I doing wrong?

  • @emmapotter2333
    @emmapotter2333 Год назад +1

    Great tutorial, love every time she mentioned 'shake' and she would shake by herself lol

    • @emmapotter2333
      @emmapotter2333 Год назад

      This animation is not working as interactive components on my side

  • @Jfseeing
    @Jfseeing Год назад +1

    Very well structured tutorial. Well done 🎉

  • @cyan__lab
    @cyan__lab Год назад

    Thank you for such an amazing tutorial! Very easy to follow, I really appreciate y'all for posting videos like these!

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

    What a fantastic, to the point tutorial, ty!

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

    I hit the like button as soon as I saw that wibbly-wobbly shoulder thing

  • @maxhuk
    @maxhuk Год назад

    Thank you for listing all the pitfalls! Very helpful ❤

  • @HivaOrooji
    @HivaOrooji 6 месяцев назад +2

    I followed all of your instructions, and my heart is functioning correctly until it creates a component. However, after that point, my design fails to work. Could you please explain why this is happening and advise me on what steps I should take?

  • @kevinbodi7778
    @kevinbodi7778 Год назад +26

    I think a lot of work will be in to little use, as a lot of front end developers won't be able to carry this over into the real world (even though it's possible). Figma should be more pragmatic and in line with how the different technologies solve this. Both vanilla CSS that has animations with keyframes as well as transitions, but also acknowledge the existence of some popular animation frameworks.

    • @porknwithbill
      @porknwithbill Год назад

      Sorry your front end team sucks

    • @profiAcc
      @profiAcc Год назад +6

      Totally agree, this serves just to impress the client (which usually takes this for granted bc he doesn't understand how much work it takes to make this in figma). Nonetheless, excellent job. This tutorial was very useful, so a big Thank you :)

    • @Meanwhile-00
      @Meanwhile-00 Год назад

      I agree with you. A lot of work for one little thing... Impossible in a real world working with brands...

    • @BotoKitty-sb6fi
      @BotoKitty-sb6fi Год назад +2

      its for design stage. for client and consultant. agencies can save templates and reuse them for different clients. engineers come at the last stage and how they build their own stuff doesnt matter to designer consultants presenting their material. engineers think the world revolves around them and want to impact the design stage with their limited technologies. nobody will remmeber vanilla css 20 years later but design will be design no matter what medium

    • @mihow888
      @mihow888 9 месяцев назад +1

      find new front end devs, problem solved :)

  • @subhash2403
    @subhash2403 Год назад

    Perfectly explained thank you so much 😊

  • @valeriyavaleriya1926
    @valeriyavaleriya1926 Год назад

    Thank you so much for examples! Really useful video 👍

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

    so cool! And perfect explanations!! Thank you so much

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

    very beautifully explained....Thanks!

  • @mrduycua
    @mrduycua Год назад +3

    Great! Thanks for sharing

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

    I lost it at the less noodles part 🤣🤣🤣

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

    hi, is there any tutorial on how to make just the hovering part animated? thank you

  • @HoaiNam9117
    @HoaiNam9117 Год назад

    Can I ask something, how to embed a youtube video like at 0:15

  • @loveworksinc.5025
    @loveworksinc.5025 Год назад +2

    shift + X, i have always wanted that shortcut

  • @Rita_Johanna
    @Rita_Johanna Год назад

    Incredible tutorial! Thank you!!

  • @MatthewDurant-md9sf
    @MatthewDurant-md9sf 4 месяца назад +1

    This is really nice but how can you export this to deliver it to a developer for implamentation?

    • @purohitvibhuti
      @purohitvibhuti 4 месяца назад

      I have the same doubt...? Like how to convert this in a video GIF format?

  • @suyapicioglu
    @suyapicioglu Год назад

    thank you! it was very informative!

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

    I love this, thank you!

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

    This is like a tutorial on how to make good tutorials XD

  • @Dominich1993
    @Dominich1993 Год назад +4

    Just give us a native animation timeline for interactions like this DAMN

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

    Solid video. Thanks!

  • @kertpilman
    @kertpilman Год назад

    Thanks! More of these please! :)

  • @zishankhan4857
    @zishankhan4857 5 месяцев назад

    Loved it...!!

  • @javinx21
    @javinx21 Год назад

    Very helpful! thank you

  • @bfrick
    @bfrick Год назад

    Nice tut. Sidenote, the typeface used in the titles is not so hot.

  • @megaroeny
    @megaroeny Год назад

    What was used to record? I love seeing the keystroke combinations

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

    I did everything but once I made de component set, doesn't work :(

  • @nostunas
    @nostunas Год назад +5

    I follow this tutorial step by step, literally doing everything as shown and when I click prototype it doesn't move. Anyone else have this problem?

    • @victorianduka9882
      @victorianduka9882 Год назад +3

      Me too. The click works in mine but the shaking animation doesn't work.

    • @palopiza
      @palopiza Год назад +1

      exactly the same issue, the click animation works fine, but the wiggle one doesn't :(

  • @roastbeefy0weefy
    @roastbeefy0weefy Год назад

    wiggle gang thank you great tutorial

  • @anjumayoub9077
    @anjumayoub9077 Год назад

    what's the point in creating these animations, when we can't export them in supported formats like JSON, GIF etc
    Although it's really fun to create animations and complex prototyping inside figma ❤

  • @raulayala6607
    @raulayala6607 Год назад

    Uff lovely

  • @findingaditya
    @findingaditya Год назад

    Font ???

  • @oproductdesigner
    @oproductdesigner Год назад

    cool!

  • @anastasiiasobolieva9897
    @anastasiiasobolieva9897 Год назад

  • @yaminmohsin
    @yaminmohsin Год назад

    Haha Loved the dud du du duu

  • @ZuziaKwiatkowska-r4k
    @ZuziaKwiatkowska-r4k Год назад

    My heart moves to the right when rocking, and to one side when it grows :( why?

  • @yunbioh4721
    @yunbioh4721 5 месяцев назад

    its hover effect do not work absolutely

  • @haresmahmood
    @haresmahmood Год назад +1

    Really nice tutorial, but I think Figma is in desperate need of a proper animation solution

  • @gothicgames4767
    @gothicgames4767 Год назад

    Going into prototype mode does nothing.

  • @motion_deep
    @motion_deep Год назад +2

    That's a terrible workflow jst to achieve a simple animation. You need a timeline or at least code driven animation....

  • @paulocholla
    @paulocholla Год назад

    "da-duh da-duh"

  • @juanzamora9512
    @juanzamora9512 Год назад

    👏

  • @loveworksinc.5025
    @loveworksinc.5025 Год назад

    hey @figma whats her twitter and IG. just watched 3 videos from her and she's excellent. thanks for your very explanatory videos

  • @punkshit120
    @punkshit120 Год назад

    I want this file pls