No video

Awesome Micro Animations With Figma Tutorial

Ғылым және технология

Check out my web web design and web development courses!
developedbyed.com/
🎁Support me on Patreon for exclusive episodes, discord and more!
www.patreon.com/dev_ed
🛴 Follow me on:
Twitch: www.twitch.tv/developedbyed
Twitter: developedbyed
Instagram: developedbyed
Github: github.com/developedbyed/
#figma

Пікірлер: 206

  • @ayaan3429
    @ayaan34292 жыл бұрын

    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.

  • @Robert-gh3dh
    @Robert-gh3dh2 жыл бұрын

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

  • @notsogoodafterall7955
    @notsogoodafterall79552 жыл бұрын

    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!

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

  • @AndreTMaciel
    @AndreTMaciel2 жыл бұрын

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

  • @sephiree7317
    @sephiree73172 жыл бұрын

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

  • @ivonaneubeck9966
    @ivonaneubeck99662 жыл бұрын

    Thank you for a nice music in the background

  • @person81045
    @person810452 жыл бұрын

    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

    Жыл бұрын

    Oh yeah the name thing really fixed everything, thanks!

  • @plutonium.

    @plutonium.

    Жыл бұрын

    more animations with figma kzread.info/dash/bejne/k4F6t9eAipyyddY.html

  • @BenabidHind

    @BenabidHind

    Жыл бұрын

    Thanks for mentioning it 😊

  • @niteshtudu6449

    @niteshtudu6449

    Жыл бұрын

    thnx bruh!

  • @MsAmyChuang

    @MsAmyChuang

    Жыл бұрын

    It works. Thanks.

  • @mabroorahmad2182
    @mabroorahmad21822 жыл бұрын

    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

    2 жыл бұрын

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

  • @mabroorahmad2182

    @mabroorahmad2182

    2 жыл бұрын

    @@thesouthsidedev1812Good Linkedin profile and resume

  • @maximeBDX
    @maximeBDX2 жыл бұрын

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

  • @alexmercer5870
    @alexmercer58702 жыл бұрын

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

  • @ingridtrujillo209
    @ingridtrujillo2092 жыл бұрын

    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?

  • @B_Migs
    @B_Migs2 жыл бұрын

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

  • @weeloh5701
    @weeloh57012 ай бұрын

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

  • @nestorarredondo5114
    @nestorarredondo51142 жыл бұрын

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

  • @danceduo212
    @danceduo2122 жыл бұрын

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

  • @ReviewByUzair
    @ReviewByUzair2 ай бұрын

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

  • @edvalencia8167
    @edvalencia8167 Жыл бұрын

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

  • @sairarashid5800
    @sairarashid58002 жыл бұрын

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

  • @meoweth829
    @meoweth8292 жыл бұрын

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

  • @tesorodistinguidollc1656
    @tesorodistinguidollc16562 жыл бұрын

    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.

  • @antonior8895
    @antonior88952 жыл бұрын

    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.

  • @cesarebich
    @cesarebich2 жыл бұрын

    How we can translate these custom animations into code?

  • @davidhopper1615
    @davidhopper16152 жыл бұрын

    thank you! super helpful

  • @Khalid104
    @Khalid1042 жыл бұрын

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

  • @abdulazeez2222
    @abdulazeez2222 Жыл бұрын

    nicely explained Thanks ED

  • @danielaamateus
    @danielaamateus2 жыл бұрын

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

  • @vuongkechuyenma
    @vuongkechuyenma2 жыл бұрын

    Thank you, Dev Ed

  • @dev_franqqi
    @dev_franqqi2 жыл бұрын

    I have waited so loooongg

  • @22-Zar
    @22-Zar7 ай бұрын

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

  • @andesme13
    @andesme132 жыл бұрын

    Thank you teacher I am happy to see you again 😊

  • @letsgetto1millwithoutvids
    @letsgetto1millwithoutvids Жыл бұрын

    very nice tutorial thanks

  • @generationwolves
    @generationwolves2 жыл бұрын

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

  • @ctammissions

    @ctammissions

    2 жыл бұрын

    This got me laughing too

  • @sirbirre
    @sirbirre2 жыл бұрын

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

  • @itumelengseema2921
    @itumelengseema29212 жыл бұрын

    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

  • @marziehafkhami504
    @marziehafkhami5047 ай бұрын

    GREAT tutorial

  • @muhammedahmed1514
    @muhammedahmed15142 жыл бұрын

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

  • @vighnesh153

    @vighnesh153

    2 жыл бұрын

    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

    2 жыл бұрын

    yea

  • 2 жыл бұрын

    Amazing, good job.

  • @laz.go.4015
    @laz.go.40152 жыл бұрын

    i love your content so much

  • @basselturky4027
    @basselturky40272 жыл бұрын

    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?

  • @mohamedanouarjabri271
    @mohamedanouarjabri2712 жыл бұрын

    Does figma generate a code after you save this work?

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

  • @worldshaper1723
    @worldshaper17232 жыл бұрын

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

  • @coofzilla
    @coofzilla2 жыл бұрын

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

  • @miroslavpetrek2321

    @miroslavpetrek2321

    2 жыл бұрын

    Did you tried it ?

  • @niloysikdar6748
    @niloysikdar67482 жыл бұрын

    Now make this using Html, CSS and js

  • @mimitk6642

    @mimitk6642

    2 жыл бұрын

    Yes please

  • @Michael-dp7by

    @Michael-dp7by

    2 жыл бұрын

    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

    2 жыл бұрын

    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

    2 жыл бұрын

    yes right

  • @sabertoothwallaby2937

    @sabertoothwallaby2937

    2 жыл бұрын

    you do it

  • @DEAR_N
    @DEAR_N23 күн бұрын

    thank youuuuu, it works for me

  • @thesouthsidedev1812
    @thesouthsidedev18122 жыл бұрын

    Hey man I sort of miss seeing your videos

  • @mannankhandelwal
    @mannankhandelwal2 жыл бұрын

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

  • @chaitanyavamsi45
    @chaitanyavamsi45 Жыл бұрын

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

  • @joyahmed963
    @joyahmed9632 жыл бұрын

    Let's code this Dev!!

  • @piotrkoodziejczyk1492
    @piotrkoodziejczyk14922 жыл бұрын

    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

    2 жыл бұрын

    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

  • @aryansachdeva3126
    @aryansachdeva31265 ай бұрын

    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

  • @theloneranger1404
    @theloneranger14042 жыл бұрын

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

  • @BishalDas-xu4zi

    @BishalDas-xu4zi

    2 жыл бұрын

    Bro wassup

  • @beastcodm-4rm-yt168

    @beastcodm-4rm-yt168

    2 жыл бұрын

    Check his playlist

  • @kiriseizone2462

    @kiriseizone2462

    2 жыл бұрын

    This is what we neeeeeeeeeed

  • @tomasmatusek6292
    @tomasmatusek62922 жыл бұрын

    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.

  • @hemanthchowdaryd
    @hemanthchowdaryd2 жыл бұрын

    how to export those animations to react js?

  • @wisdomatani1337
    @wisdomatani13372 жыл бұрын

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

  • @benjaminsikira8
    @benjaminsikira82 жыл бұрын

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

  • @promohican8222
    @promohican82222 жыл бұрын

    great tutorial

  • @n-o-i-d
    @n-o-i-d2 жыл бұрын

    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.

  • @makstyle119
    @makstyle1192 жыл бұрын

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

  • @anand.prasad502
    @anand.prasad5022 жыл бұрын

    why did you switch to mac ?

  • @41979la
    @41979la Жыл бұрын

    How do i apply this to my website

  • @electrious_46
    @electrious_46 Жыл бұрын

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

  • @georgikostov6982
    @georgikostov69822 жыл бұрын

    Good video :) thanks.

  • @MKAndreassen
    @MKAndreassen2 жыл бұрын

    "I swear I'm not high" HAHAHAHAHHAAH

  • @anigrigoryan1951
    @anigrigoryan19512 жыл бұрын

    thanks a lot

  • @mpb0406
    @mpb04062 жыл бұрын

    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.

  • @415-sciayushbohra8

    @415-sciayushbohra8

    2 жыл бұрын

    Am with you actually 👍

  • @simonhollad5511

    @simonhollad5511

    2 жыл бұрын

    Watch CJ from coding garden.

  • @gajrajkumar6978
    @gajrajkumar697811 ай бұрын

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

  • @istiakzishan
    @istiakzishan2 жыл бұрын

    Thanks you so much

  • @RuiOut8
    @RuiOut82 жыл бұрын

    Can this be exported as CSS?

  • @Grogutech
    @Grogutech2 жыл бұрын

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

  • @the_growth_mindset.
    @the_growth_mindset. Жыл бұрын

    Great video!

  • @jannahbevelle5815
    @jannahbevelle5815 Жыл бұрын

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

  • @BaxtiyorjonSobirjonov
    @BaxtiyorjonSobirjonov2 жыл бұрын

    Thanks

  • @kinghalib
    @kinghalib2 жыл бұрын

    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

    2 жыл бұрын

    hopefully you can buy a laptop soon

  • @kinghalib

    @kinghalib

    2 жыл бұрын

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

  • @rattybongo100
    @rattybongo1002 жыл бұрын

    "I'm digging the music

  • @tanvirashraf3619
    @tanvirashraf36192 жыл бұрын

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

  • @muktarsaliu640
    @muktarsaliu6402 жыл бұрын

    Pls make a video on submit to email with html, css, javascript/php

  • @bigdaddyproduction7266
    @bigdaddyproduction7266 Жыл бұрын

    How much cost a beef jerky in your country?

  • @RomuloHaack
    @RomuloHaack2 жыл бұрын

    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.

  • @Ran_out_of_handle_ideas
    @Ran_out_of_handle_ideas11 ай бұрын

    the music in the background 😌

  • @sarahigbinosa3004
    @sarahigbinosa30042 жыл бұрын

    Hi Hi, thank you for your tutorials. so helpful.

  • @aitproject5437
    @aitproject54372 жыл бұрын

    Verry good...nice🙏

  • @kingbeebro139
    @kingbeebro139 Жыл бұрын

    Dr. strange is teaching UI design. multiverse madness

  • @mohdahmad
    @mohdahmad2 жыл бұрын

    did you left making web dev tutorials

  • @anthonykimuyaofficial
    @anthonykimuyaofficial2 жыл бұрын

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

  • @kristofbalinth2071
    @kristofbalinth20712 жыл бұрын

    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.

  • @kristofbalinth2071

    @kristofbalinth2071

    2 жыл бұрын

    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.

  • @4988raja
    @4988raja Жыл бұрын

    Fantastic

  • @alfredoklug8053
    @alfredoklug80532 жыл бұрын

    ecllipse lol. Thanks bro, you rule

  • @plarmium8723
    @plarmium8723 Жыл бұрын

    REALLY COOL

  • @ur_meh
    @ur_mehАй бұрын

    Guys do we need figma pro for this??

  • @randomperson7464
    @randomperson7464 Жыл бұрын

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

  • @Toxicblackmambahs
    @Toxicblackmambahs2 жыл бұрын

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

  • @rayorole3065

    @rayorole3065

    2 жыл бұрын

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

  • @mikekhomyn2175
    @mikekhomyn217511 ай бұрын

    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.

  • @baruurey84
    @baruurey84 Жыл бұрын

    song please?

  • @pratikrajsah
    @pratikrajsah2 жыл бұрын

    5:00 yes you are high

  • @rishi9562
    @rishi9562 Жыл бұрын

    15.04 my line doesnt disappear when i do that

  • @RezHimself
    @RezHimself2 жыл бұрын

    You didn't teach how to add it in html page

  • 2 жыл бұрын

    Super nice

  • @Melhor99
    @Melhor992 жыл бұрын

    Where is your item