Animated Mesh Gradients in Figma

Create amazing & animated mesh gradients in Figma.
Sign up for Figma:
psxid.figma.com/kh2feohwvmqd
Chapters:
0:00 Intro
0:17 Quick Gradients
1:04 Creating Gradients
3:36 Animating
6:04 Adding Noise
6:52 Final Result
7:02 Outro
-
Become a Member (Access to Completed Project Files):
/ @caleredwards
Sign up for Webflow:
webflow.grsm.io/caleredwards
Get 30% Off ProtoPie with Code: "CALER"
bit.ly/ProtoPie-Caler
My Desk Setup for Design & KZread:
kit.co/caleredwards/my-setup
-
Visit my website:
caleredwards.com
Find me on Instagram:
Instagram: / caleredwards
-
Disclaimer: This video and description may contain affiliate links. By using any of my affiliate links, I receive a very small commission at no extra cost to you. Thank you for supporting the channel!
Music: Epidemic Sound
Animated Mesh Gradients in Figma
#figma #figmatutorial #uidesign

Пікірлер: 33

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

    Thanks for watching :D

  • @digitalnomad29
    @digitalnomad299 ай бұрын

    Awesome..loved this tutorial!!

  • @SehaamBhinder
    @SehaamBhinder3 ай бұрын

    Loved this Tutorial !! Thank you!

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

    Thanks for the plug

  • @Earth_Being
    @Earth_Being8 ай бұрын

    Most of tutorials just show how to draw something in 1st frame, they straight up skip all IMPORTANT options to select & call it a "Tutorial" 💀. But you showed every step clearly, thank you buddy ❤

  • @suryad6824
    @suryad68249 ай бұрын

    Awesome brother ❤❤❤

  • @user-sn3hz1eu3q
    @user-sn3hz1eu3q6 күн бұрын

    great. keep it up mr. edwards,

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

    How to download this mesh gradient video to use in real website?

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

    Very nice and creative way to do this! Thanks @caler

  • @CalerEdwards

    @CalerEdwards

    Жыл бұрын

    My pleasure! Glad you liked it :D

  • @orelhassid5812
    @orelhassid58123 ай бұрын

    Amazing thank you

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

    the best!

  • @believe0000
    @believe000010 ай бұрын

    thanks

  • @aayushdighe6739
    @aayushdighe673911 ай бұрын

    Which instance plugin have you used?

  • @Clarity-808
    @Clarity-808 Жыл бұрын

    Cool effect. However I think we want to know: can we realistically use this? Does this have browser support? How do we hand it off?

  • @Earth_Being

    @Earth_Being

    8 ай бұрын

    It's literally in CSS, so I think CSS is browser supported

  • @barqisayyid
    @barqisayyid11 ай бұрын

    after connecting the third/end state to the first state, why doesn't my prototype turn out to be like yours at 5:43 min? (which has only one image under "Tutorial"), meanwhile mine still have many vector just like your at 5:40. Please help me sir🙏🙏

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

    How to export?

  • @barqisayyid
    @barqisayyid11 ай бұрын

    after connecting the third/end state to the first state, why doesn't my prototype turn out to be like yours at 5:43 min?

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

    If you were to give this design to a developer, would you keep the gradient as it is or would you create a video with the movement or do something elss? 🤔 I'm curious how a developer is supposed to implement it 🙇‍♂️ Thank you! It was a cool video 🤗

  • @robertpaciorkowski2247

    @robertpaciorkowski2247

    Жыл бұрын

    quick gif would be easiest way for the designer i think

  • @grav3ns3n

    @grav3ns3n

    Жыл бұрын

    Eu ti-as exporta fundalul ca svg, ca sa nu iti mai bati tu capul.

  • @cojeagabriel7584

    @cojeagabriel7584

    Жыл бұрын

    @@grav3ns3n cred ca solutia asta nu ar lua in calcul si animatia 🤔

  • @aayushdighe6739
    @aayushdighe673911 ай бұрын

    Hi! I followed the exact steps as shown in the video but unfortunately its not animating after i click the play button.

  • @federicosentineri29

    @federicosentineri29

    7 ай бұрын

    try to press R when you are in simulation mode

  • @emilianacapriotti4727

    @emilianacapriotti4727

    2 ай бұрын

    @@federicosentineri29 TE AMO!!!! SOS LA UNICA PERSONA QUE DIJO ESTO!! MUCHAS GRACIAS

  • @nicoleleblanc786
    @nicoleleblanc7865 күн бұрын

    How do you export this animation to put on website?

  • @CalerEdwards

    @CalerEdwards

    4 күн бұрын

    I recreate them in Webflow following similar steps. Not sure there is any plugins do export interactions perfectly if at all.

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

    It's cool in figma, but how do i get it to a developer to implement?

  • @Earth_Being

    @Earth_Being

    8 ай бұрын

    There's literally an option now as Dev mode

  • @artimity
    @artimity4 ай бұрын

    Как экспортировать на сайт объясните нормально

  • @socialkruption
    @socialkruption7 ай бұрын

    plugin costs money

  • @user-jy9ck5cg5c

    @user-jy9ck5cg5c

    6 ай бұрын

    there are two plugins check for free one which is below the first plugin