Animated Mesh Gradients in Figma
Вставка
- Опубліковано 28 лип 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 & UA-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 ❤
Awesome..loved this tutorial!!
Thanks for the plug
Awesome brother ❤❤❤
Amazing thank you
How to download this mesh gradient video to use in real website?
great.
keep it up mr. edwards,
Very nice and creative way to do this! Thanks @caler
My pleasure! Glad you liked it :D
the best!
Thank you
thanks
Love this! Is there any way to export it as a video?
Which instance plugin have you used?
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 🤗
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 🤔
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
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
Too many plugins.
Why is it bad
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.
plugin costs money
there are two plugins check for free one which is below the first plugin