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
Thanks for watching :D
Awesome..loved this tutorial!!
Loved this Tutorial !! Thank you!
Thanks for the plug
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 ❤
Awesome brother ❤❤❤
great. keep it up mr. edwards,
How to download this mesh gradient video to use in real website?
Very nice and creative way to do this! Thanks @caler
@CalerEdwards
Жыл бұрын
My pleasure! Glad you liked it :D
Amazing thank you
the best!
thanks
Which instance plugin have you used?
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
8 ай бұрын
It's literally in CSS, so I think CSS is browser supported
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🙏🙏
How to export?
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?
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 🤔
Hi! I followed the exact steps as shown in the video but unfortunately its not animating after i click the play button.
@federicosentineri29
7 ай бұрын
try to press R when you are in simulation mode
@emilianacapriotti4727
2 ай бұрын
@@federicosentineri29 TE AMO!!!! SOS LA UNICA PERSONA QUE DIJO ESTO!! MUCHAS GRACIAS
How do you export this animation to put on website?
@CalerEdwards
4 күн бұрын
I recreate them in Webflow following similar steps. Not sure there is any plugins do export interactions perfectly if at all.
It's cool in figma, but how do i get it to a developer to implement?
@Earth_Being
8 ай бұрын
There's literally an option now as Dev mode
Как экспортировать на сайт объясните нормально
plugin costs money
@user-jy9ck5cg5c
6 ай бұрын
there are two plugins check for free one which is below the first plugin