Animated Mesh Gradients in Figma
ฝัง
- เผยแพร่เมื่อ 29 มิ.ย. 2024
- 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 & TH-cam:
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
Thanks for watching :D
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 ❤
Loved this Tutorial !! Thank you!
Awesome..loved this tutorial!!
Thanks for the plug
Very nice and creative way to do this! Thanks @caler
My pleasure! Glad you liked it :D
Awesome brother ❤❤❤
Amazing thank you
great.
keep it up mr. edwards,
How to download this mesh gradient video to use in real website?
the best!
Thank you
thanks
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?
It's literally in CSS, so I think CSS is browser supported
Which instance plugin have you used?
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 🤗
quick gif would be easiest way for the designer i think
Eu ti-as exporta fundalul ca svg, ca sa nu iti mai bati tu capul.
@@grav3ns3n cred ca solutia asta nu ar lua in calcul si animatia 🤔
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?
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🙏🙏
Hi! I followed the exact steps as shown in the video but unfortunately its not animating after i click the play button.
try to press R when you are in simulation mode
@@federicosentineri29 TE AMO!!!! SOS LA UNICA PERSONA QUE DIJO ESTO!! MUCHAS GRACIAS
It's cool in figma, but how do i get it to a developer to implement?
There's literally an option now as Dev mode
How do you export this animation to put on website?
I recreate them in Webflow following similar steps. Not sure there is any plugins do export interactions perfectly if at all.
Aghhhh, this is such a problem
Как экспортировать на сайт объясните нормально
plugin costs money
there are two plugins check for free one which is below the first plugin