Animated Mesh Gradients in Figma

No video

Animated Mesh Gradients in Figma

Рет қаралды 39,178

Күн бұрын

Create amazing & animated mesh gradients in Figma.
Sign up for Figma:
psxid.figma.co...
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.i...
Get 30% Off ProtoPie with Code: "CALER"
bit.ly/ProtoPi...
My Desk Setup for Design & KZfaq:
kit.co/calered...
-
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

Пікірлер: 38

@CalerEdwards Жыл бұрын

Thanks for watching :D

@Earth_Being 10 ай бұрын

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 ❤

@zuuazua 27 күн бұрын

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

@Raghudesign Жыл бұрын

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

@adamkenton2585 Жыл бұрын

Thanks for the plug

@digitalnomad29 Жыл бұрын

Awesome..loved this tutorial!!

@user-sn3hz1eu3q 2 ай бұрын

great. keep it up mr. edwards,

@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 🤔

@aa18ish Жыл бұрын

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

@CalerEdwards Жыл бұрын

My pleasure! Glad you liked it :D

@ismaeltafo Ай бұрын

Thank you

@suryad6824 11 ай бұрын

Awesome brother ❤❤❤

@orelhassid5812 6 ай бұрын

Amazing thank you

@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 10 ай бұрын

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

@manasgedam688 Жыл бұрын

How to export?

@aayushdighe6739 Жыл бұрын

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

@federicosentineri29 9 ай бұрын

try to press R when you are in simulation mode

@emilianacapriotti4727 4 ай бұрын

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

@cabeloSaudavelColombia Жыл бұрын

the best!

@believe0000 Жыл бұрын

thanks

@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🙏🙏

@vndk8363 Жыл бұрын

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

@Earth_Being 10 ай бұрын

There's literally an option now as Dev mode

@aayushdighe6739 Жыл бұрын

Which instance plugin have you used?

@artimity 7 ай бұрын

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

@designlyonco 2 ай бұрын

How do you export this animation to put on website?

@CalerEdwards 2 ай бұрын

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

@jkoblivion4175 Ай бұрын

Too many plugins.

@musicgood838 Ай бұрын

Why is it bad

@jkoblivion4175 28 күн бұрын

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.