Create Animated Mesh Gradients in Figma (Tutorial + Files)

No video

Create Animated Mesh Gradients in Figma (Tutorial + Files)

Рет қаралды 21,367

Күн бұрын

Work with my design studio → designme.agency
Master UI design for $9 with my new ebook!
👉 howtodesignbet...
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.gumro...
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 👇
howtodesignbet...
For website designers & freelancers 👇
howtodesignbet...
My Figma Mastery video course 👇
howtodesignbet...

Пікірлер: 58

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

@Study_Serenade Жыл бұрын

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

@uiadrian Жыл бұрын

Thanks Sudip, more is coming soon :)

@aashishchapagain Жыл бұрын

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

@uiadrian Жыл бұрын

Thank you Ashish!

@oscarmattisson2495 Жыл бұрын

Wow this is beautiful Adrian!

@uiadrian Жыл бұрын

Thank you Oscar!

@olaitankolawole5483 Жыл бұрын

This is beautiful Adrian....Many thanks.

@uiadrian Жыл бұрын

Thank you! And no worries Olaitan 🙌

@wingmann3632 Ай бұрын

EXTREMELY HELPFUL, THANK YOU MAAAAN!

@hyacinthonyekwuo Жыл бұрын

🔥 I’ll definitely try this out asap

@uiadrian Жыл бұрын

For sure! :)

@fazzyakamello Жыл бұрын

My guy! Keep up the videos.

@uiadrian Жыл бұрын

Will keep 'em coming! 😁

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

@shobowalearamide9271 Ай бұрын

Thank you

@Watch505 2 ай бұрын

Very informative

@rahul_lsh Жыл бұрын

Awesome!

@uiadrian Жыл бұрын

Thank you! Cheers!

@endgamefond 20 күн бұрын

now how to save it into video format?

@yours.337 8 ай бұрын

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

@IamShashi98 Жыл бұрын

Good video brother🎉

@uiadrian Жыл бұрын

Thank you! 🤝

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

@Designmafiya Жыл бұрын

Love it :)

@Lutfurrn Жыл бұрын

I came through your mail. Nice channel

@uiadrian Жыл бұрын

Thanks a lot!

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

amazing

@oyewoleoluwasegun9093 Жыл бұрын

thanks bruh

@abdikhanihassan 5 ай бұрын

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

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

@mdwahid8625 5 ай бұрын

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

@link486 8 ай бұрын

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 .

@MohamedAbdo-po5ue 8 ай бұрын

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?

@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

@farsolutionspk 10 ай бұрын

respect++

@lala-wb7gi Жыл бұрын

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

@adeebrazali Жыл бұрын

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

@Dopekulture1 Жыл бұрын

🔥

@uiadrian Жыл бұрын

🙌

@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