Awesome Micro Animations With Figma Tutorial

Поділитися
Вставка
  • Опубліковано 16 січ 2025

КОМЕНТАРІ • 210

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

    Thank you so much my gorgeous friend for teaching me programming. Today i landed my very first big job as a software engineer. You made my life. I can't thank enough. Love you. 🥰

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

      Congrats bro, can you give me some tips on the site you applied on

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

      @@thesouthsidedev1812Good Linkedin profile and resume

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

    We need a course for every skill you have!! No matter the cost! You teach everything in such an easy language. Python, game Dev just everything.

  • @person81045
    @person81045 3 роки тому +68

    Be sure to UNGROUP the masked circle otherwise it wont work. Also BEFORE hitting play to see the animation, UNGROUP all layers. Otherwise figma will treat the group one object, negating all the masking.
    IF the final result will not work and does not show the circle moving RIGHT LEFT this is your answer. The Layers have to be the SAME NAME. Ellipse 1 from one screen has to be the same as the 2nd one.

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

      Oh yeah the name thing really fixed everything, thanks!

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

      more animations with figma ua-cam.com/video/aMFUuGZ9LEs/v-deo.html

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

      Thanks for mentioning it 😊

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

      thnx bruh!

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

      It works. Thanks.

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

    Im glad you still find motivation to make videos. I have been fighting with upper back pain for 4 years now, i take a good amount of opioids everyday. I have gone to all kinds of back pain specialists and done all kind of exams but they cant figure out whats wrong. I suspect it might be some kind of referred pain and i am trying to change my diet and see how that affect it. I will let you know if something works with me. I hope you get better!

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

    4:48 "I swear I am not high." 🤣

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

      This got me laughing too

  • @muhammedahmed1514
    @muhammedahmed1514 3 роки тому +66

    Please make a video on how to implement these designs with HTML and CSS.

    • @vighnesh153
      @vighnesh153 3 роки тому +11

      You can replicate the steps in css too. Use keyframes, give start and end states. And then use the cubic bezier function for the bouncy effect.

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

      yea

  • @n-o-i-d
    @n-o-i-d 3 роки тому +3

    2:15 I don't mean to come off rude but I heard you say it like this in another video earlier and I thought it was just a one time mistake. That's an ellipse, not eclipse. I just thought I'd tell you because I really like your content and I think you're great.

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

    Thank you for a nice music in the background

  • @Robert-gh3dh
    @Robert-gh3dh 2 роки тому +2

    Man, I swear I learned more from this video than I had ever learnt from over 10 hours of other content

  • @hussamtgm9964
    @hussamtgm9964 6 місяців тому

    your funny and entertaining to listen to when learning does not get me bored and does not annoy me with bullshit that will waste my time, love your video keep it going

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

    LOL, My dude, I love your casual way of doing things. ...and who cares if you ARE high, and if that does look like a weiner. Your brand of keeping it real and being fun is why your videos are loved. THANK YOU!!!

  • @niloysikdar6748
    @niloysikdar6748 3 роки тому +151

    Now make this using Html, CSS and js

    • @mimitk6642
      @mimitk6642 3 роки тому +6

      Yes please

    • @Michael-dp7by
      @Michael-dp7by 3 роки тому +10

      If you do a search: hamburger button using css animations, you can find similar projects that you can adapt to look like this

    • @vighnesh153
      @vighnesh153 3 роки тому +6

      You can replicate the steps in css too. Use keyframes, give start and end states. And then use the cubic bezier function for the bouncy effect.

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

      yes right

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

      you do it

  • @hero521-h1t
    @hero521-h1t 2 роки тому +1

    When he said I swr I'm not high I knew I had to like the video

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

    Sooooo coool ed!!✌️
    Wondering how can i connect it now with my js code
    Ps: background music was lit af 🔥

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

    Thank you so much for this! I came here from Coursera, and I enjoyed every bit of this lesson! I followed through and got the exact results. Thank youuu!!!

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

    "I swear I am not high." Can't stop laughing.

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

    You are high as fuck...that laugh.nicest video on animation

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

    5:00 yes you are high

  • @theloneranger1404
    @theloneranger1404 3 роки тому +29

    PLs ma gorgeous teacher on the interenet, we need da HTML and CSS

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

    Whaaat, didn't know that there were such features in figma

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

    hey Ed, and how can we create the components to our react applications with this animations?

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

    I LOVE how u explain ♥ Thank u so much for this tutorial!

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

    do you have a full animation in figma?? i'm interested

  • @ReviewByUzair
    @ReviewByUzair 8 місяців тому

    Too much helpful. I am a beginner and learning figma and this is something new and helpful for me.

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

    I couldn't get mine to play in Figma... Im still new to it. I followed everything to a T and it looks like it might have worked :P Loving all your great videos. Thank you.

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

    dude clarified he isn't high

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

    Dude looks like Doctor Strange.

  • @weeloh5701
    @weeloh5701 8 місяців тому

    Thaaaaaank you so much ! It was really helpfull and really more accesfull than others tutorial we can find on youtube 🔥

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

    Hey man I sort of miss seeing your videos

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

    Nice video,
    How add the animation on the figma mockup ?

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

    How we can translate these custom animations into code?

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

    Let's code this Dev!!

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

    I just want Figma to enable us to use these from within Variants instead. Build this without usage of variants creates a loooooot of unnecessary duplicated elements on the project. For large projects, it's just a huge "no" atm.

  • @22-Zar
    @22-Zar Рік тому

    Had to pause my music to watch this video but bro has the vibes going

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

    Ed, idk if you're planning on doing any more coding tutorials but if you do can you make one on connecting an express/nodejs api to frontend? I watched your video on JWT auth and learned a lot and I'm currently trying to figure out how to connect it to front end.

  • @anand.prasad502
    @anand.prasad502 3 роки тому +1

    why did you switch to mac ?

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

    thank you!
    super helpful

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

    Love the humor on the video, it was easier to catch ahhaha

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

    nicely explained Thanks ED

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

    When I change the shape (via changing the corner roundness) why does it just Fade? instead of a shape transition like in the video?

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

    Thank you, Dev Ed

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

    Him: I swear I'm not high
    Nah bro that caught me off guard hahaha

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

    do you plan to add react native course to your website as well?

  • @aryansachdeva3126
    @aryansachdeva3126 11 місяців тому

    i didnt understand how the word on and off animation was made, like how did the "on" word appear to be coming down rather than just being in the circular button? please help

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

    Ed, you probably already know what to do next...
    Make a video of this by using HTML, CSS, JS, please!✌😁

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

    Guys, does anyone know, what am I doing wrong here...? When I try to play the buttons as Ed does at 11:21 the elipse from the left does not go to the right. The left one just disappears and the right one appears. I can not figure out where is the mistake.

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

      If anyone will have the same issue, I've figured it out: name mismatch. The shape names have to be exactly the same in both components.

  • @laz.go.4015
    @laz.go.4015 3 роки тому +1

    i love your content so much

  • @isaacsjaimes
    @isaacsjaimes 4 місяці тому

    ma man is cooking bro

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

    "I swear I'm not high" HAHAHAHAHHAAH

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

    Hi Ed I’ve been watching your videos for a few months and I must say u put out great content,I’ve been struggling with creating mobile nav menus and I would really appreciate if you could do a video on that subject in react

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

    Hey man where have you been? Everything alright? We are waiting 🙆✊

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

    GREAT tutorial

  • @DEAR_N
    @DEAR_N 7 місяців тому

    thank youuuuu, it works for me

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

    "I swear I'm not high!"... lol. I didn't think you were... now I'm like 🤔😂

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

    These are great but how do you make these reusable components with the animaitons baked in? Can you use variants?

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

      yes we can create variants. I just followed the same video, but instead of duplicating frame, I created component variants to create the ON state of button. The output was exactly same.

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

    I have waited so loooongg

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

    hey Ed, is there any coupons on your courses. Pls Tell, I am really interested in one of those. 😊

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

    if i put this awesome icon on a dropdown icon with instance, why is not moving as it should be?

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

    It's all good but how do you apply it to a screen, the second I take it to a bigger frame (page) the interaction stops working.

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

    Dr. strange is teaching UI design. multiverse madness

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

    Thank you teacher I am happy to see you again 😊

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

    Hi what is the extension for your Spotify in vs code ( the icon below your extensions icon)

  •  3 роки тому

    Amazing, good job.

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

    Love the video, dude. I hate to be a grammar asshole but it's an 'ellipse' as in ee-lips - not an eclipse, meaning the partial or full obscuring of one celestial body by another.

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

    "I'm digging the music

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

    15:10 I did the same thing even but didn't disappear, instead a small circle was created

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

    I don't have a laptop or desktop , I can't afford it .
    But I keep watching your videos hoping someday buy a laptop and be able to code .
    You are my idol man ..thank you .

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

      hopefully you can buy a laptop soon

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

      @@shandypratama2792 in couple years maybe . At this moment I just want to have food and roof over my head.

  • @sarojwagle6711
    @sarojwagle6711 5 місяців тому

    helped a lot

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

    How to export these kind of icon animations from figma to gif format to provide it the developers....can someone help?

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

    did you left making web dev tutorials

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

    Hey, It's possible to do a slider with the products floating over it, with a hover that shows the features of every product and the button add to the cart, in CSS and js?

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

    How much cost a beef jerky in your country?

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

    sir my smart animate is not working the same as yours(for the toggle button), can you help me with that?

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

    Does figma generate a code after you save this work?

  • @41979la
    @41979la 2 роки тому

    How do i apply this to my website

  • @the_growth_mindset.
    @the_growth_mindset. 2 роки тому

    Great video!

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

    Du, bist du jetzt in deutchland? And was mit deinen arbeiten web dev, hast du da?
    I was watch yout vidios little bit and want ask how it doing with you story about germany? I have little bit same story, now Im in Austria, just question, what about your german language, how you doing that? Thanks.

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

    It seems our John Lennon found his Yoko Ono.

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

    Good video :) thanks.

  • @ur_meh
    @ur_meh 8 місяців тому

    Guys do we need figma pro for this??

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

    i need a figma file i'am tying many times but not create smooth animation

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

    the music in the background 😌

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

    cant hear ed music too loud

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

    Thanks you so much

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

    great tutorial

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

    I would like to do something unique, hence my question: is react native able to download how much time we spent on individual applications?

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

      For the entire phone or for the the app itself? For the entire phone, I don’t believe there is an API for that on iOS or Android but for the mobile app itself you could either use something like Google analytics in your app or you could just Google it and find the many similar questions on stack overflow

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

    I made react CRUD app using node js as server and mysql for database, everything is working and all only on my pc, the problem is when I connect to my react app from my phone I can't use it, like it's not connected to server or database, all I see is the front end of react app. How can I make it works on my mobile too or any device connect to my local network?

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

    song please?

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

    if it posible to handle voice call in react.js and if it is then make a video on how to do this

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

    so to actually use this, do you just export the svg code..? and then use css to transition between the frames?

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

    Don't tell him it's ellipse not eclipse

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

    Verry good...nice🙏

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

    I really love Figma animations, but we still lack tools for exporting those magic to code or even video... Still can be used as a tool for awesome presentations.

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

    how to export those animations to react js?

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

    Can this be exported as CSS?

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

    Hey Ed, how about making a full pledged e-commerce project and stunning us all !

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

    15.04 my line doesnt disappear when i do that

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

    Where is your item

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

    Hello Dev Ed, Is is possible for you to do a video on React + Firebase?

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

      I agree, you should make more tutorials about React and Vue. Firebase is also awesome

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

    "I swear I'm not high" hahah