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 & KZbin:
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

[@CalerEdwards]

Thanks for watching :D

[@digitalnomad29]

Awesome..loved this tutorial!!

[@adamkenton2585]

Thanks for the plug

[@Earth_Being]

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 ❤

[@aa18ish]

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

[@CalerEdwards]

My pleasure! Glad you liked it :D

[@user-sn3hz1eu3q]

great. keep it up mr. edwards,

[@orelhassid5812]

Amazing thank you

[@suryad6824]

Awesome brother ❤❤❤

[@ismaeltafo]

Thank you

[@cabeloSaudavelColombia]

the best!

[@believe0000]

thanks

[@Raghudesign]

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

[@zuuazua]

Love this! Is there any way to export it as a video?

[@aayushdighe6739]

Which instance plugin have you used?

[@barqisayyid]

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?

[@barqisayyid]

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]

How to export?

[@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]

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

[@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]

quick gif would be easiest way for the designer i think

[@grav3ns3n]

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

[@cojeagabriel7584]

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

[@aayushdighe6739]

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

[@federicosentineri29]

try to press R when you are in simulation mode

[@emilianacapriotti4727]

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

[@nicoleleblanc786]

How do you export this animation to put on website?

[@CalerEdwards]

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

[@rockingnick]

Aghhhh, this is such a problem

[@vndk8363]

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

[@Earth_Being]

There's literally an option now as Dev mode

[@artimity]

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

[@jkoblivion4175]

Too many plugins.

[@musicgood838]

Why is it bad

[@jkoblivion4175]

Plugins need updates. many of this ones lack update for 2 or 3 years. You should never build your profession on someone shoulders. Make your own plugins. Thats apply to everything, including figma.

[@socialkruption]

plugin costs money

[@user-jy9ck5cg5c]

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