Create Animated Mesh Gradients in Figma (Tutorial + Files)

Join 2,500+ students and master the foundations of UI design for $9 with my new ebook!
👉 howtodesignbetter.com/ebook
Learn how to create awesome animated Mesh gradients in Figma, in less than 10 minutes. And don't forget to grab the Prototyping Pack and collect your free Figma files to test this animation yourself!
uiadrian.gumroad.com/l/protot...
Timestamps:
00:00 - Intro
00:21 - Getting started
00:52 - Adding shapes
02:31 - Blurring out
04:17 - Adding texture
05:25 - Prototyping the animation
07:08 - Triggers and timing
08:30 - Play the Prototype!
09:05 - Outro
Connect with me 👋
Instagram - / uiadrian
Twitter - / uiuxadrian
Linkedin - / adrian-kuleszo
Thanks for dropping by my channel - if you enjoy what you see, feel free to subscribe and hit that bell notification, and I promise to bring you a ton of free value every week!
----------------------------------------------
P.S. If you're interested in learning UI/UX design feel free to check out my design ebooks - there are free samples available (110+ pages total).
For mobile designers 👇
howtodesignbetter.com/design-...
For website designers & freelancers 👇
howtodesignbetter.com/web-des...
My Figma Mastery video course 👇
howtodesignbetter.com/figma-m...

[@olaitankolawole5483]

This is beautiful Adrian....Many thanks.

[@uiadrian]

Thank you! And no worries Olaitan 🙌

[@aashishchapagain]

This is amazing Adrian, Thanks for sharing. And welcome to youtube journey. :)

[@uiadrian]

Thank you Ashish!

[@wingmann3632]

EXTREMELY HELPFUL, THANK YOU MAAAAN!

[@oscarmattisson2495]

Wow this is beautiful Adrian!

[@uiadrian]

Thank you Oscar!

[@Study_Serenade]

keep giving best practices exist in the industry!!! love to see more

[@uiadrian]

Thanks Sudip, more is coming soon :)

[@shobowalearamide9271]

Thank you

[@hyacinthonyekwuo]

🔥 I’ll definitely try this out asap

[@uiadrian]

For sure! :)

[@terasexperience]

hello Mr. Adrian, thank you very much for this content, it really helps me in learning UI/UX Design. continue, good luck always, greetings from me, an Indonesian citizen👋

[@uiadrian]

Hey Arief! Thank you, all the best, my friend 👋

[@Designmafiya]

Love it :)

[@rahul_lsh]

Awesome!

[@uiadrian]

Thank you! Cheers!

[@fazzyakamello]

My guy! Keep up the videos.

[@uiadrian]

Will keep 'em coming! 😁

[@Watch505]

Very informative

[@yours.337]

Thank You So Much.. I'm Subscribing Right Now..

[@user-zt9yw6uj9o]

amazing

[@oyewoleoluwasegun9093]

thanks bruh

[@thiyagu-8705]

Bro you really Awesome... Good Work! Am start practicing figma your videos are so helpful for me --- Thala ! Am from Tamilnadu, India !

[@uiadrian]

Thanks! Good luck and all the best 😊

[@IamShashi98]

Good video brother🎉

[@uiadrian]

Thank you! 🤝

[@farsolutionspk]

respect++

[@link486]

Hi there, thank you for sharing this. Do you have any suggestion on how to hand off this animation to developers? Do you export as GIFs or have them code it in CSS?

[@piyushgupta809]

sub +1. need more of UI Adrian .

[@m.ehtizan]

Hey Andrian, I just watched your video and I must say that it was really informative and well-made. I loved your videos. I was wondering if I could help you edit your videos and also make highly engaging shorts for you?

[@MohamedAbdo-po5ue]

Hi Adrain, Thank you so much for this tutorial. Now, i need to export the animated background as SVG, when i export it, it becomes static image. How can I do this please?

[@Dopekulture1]

🔥

[@uiadrian]

🙌

[@Lutfurrn]

I came through your mail. Nice channel

[@uiadrian]

Thanks a lot!

[@lala-wb7gi]

Amazing Bro :) how do i export to html or gif/webP

[@mdwahid8625]

Recently I started follow you. You are giving boom type work. I appreciate it. But I want to know how to do you showcase the task which is showing in 8:37 mins. Is there any plugin or tools you used for it. thanks

[@Shuu98]

Cool one to test out but I got my Change to option is not avaible. It is fade grey. Can anyone help me with the issue ?

[@abdikhanihassan]

I'm not familiar ui design but I like so how can I this mash into dev or code

[@farooqmehboob4351]

Can we animate widgets in figma ? Like the cards on the right side you have

[@uiadrian]

Yes, you can, but for the most fluid animation I'd go with AE

[@kreativethinker5987]

Hi Adrian, can you use this animated mesh gradient on a website? Like, download this in a video format or so?

[@uiadrian]

For sure you could although I think it'd be easier to add rotating property on the svg placed inside of the main section div ✌️ If you explain this as a text prompt, chatgpt should help generate the code for it

[@chrispennington5400]

Thanks! How do you show the keyboard presses?

[@uiadrian]

Keystroke Pro 👈

[@chrispennington5400]

@@uiadrian Thanks!

[@melessify]

Yeah this is cool but how do I get it to maintain form using auto-layout?

[@uiadrian]

I'd put this in an absolute position into a hero section so that it scales with the width

[@adeebrazali]

sir , why my animated is not looping ? im confused bcs its almost done but not looping huuhu

[@muneebanjamch]

My one is saying that a prototype needs to have at least one frame

[@uiadrian]

You need to have a component set created out of your gradient frames to make it work. Download the files and take a look inside the file ✌️

[@digvijaysingh984]

it did not happen... I tried exact point to point

[@muneebanjamch]

Same -My one is saying that a prototype needs to have atleast one frame

[@annaszumska1218]

@@muneebanjamch are you using frame or square?

[@uiadrian]

Grab the files and look inside the settings. Maybe you didn’t use a frame to create the component set

[@ahmedhussain3083]

which one is file of this tutorial? because i did same like you even use to create compound set but its still not moving@@uiadrian