Create Animated Mesh Gradients in Figma (Tutorial + Files)
Вставка
- Опубліковано 28 лип 2024
- 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... - Навчання та стиль
This is amazing Adrian, Thanks for sharing. And welcome to youtube journey. :)
Thank you Ashish!
This is beautiful Adrian....Many thanks.
Thank you! And no worries Olaitan 🙌
keep giving best practices exist in the industry!!! love to see more
Thanks Sudip, more is coming soon :)
Wow this is beautiful Adrian!
Thank you Oscar!
EXTREMELY HELPFUL, THANK YOU MAAAAN!
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👋
Hey Arief! Thank you, all the best, my friend 👋
Thank you
🔥
I’ll definitely try this out asap
For sure! :)
Love it :)
Very informative
Awesome!
Thank you! Cheers!
Thank You So Much.. I'm Subscribing Right Now..
My guy! Keep up the videos.
Will keep 'em coming! 😁
thanks bruh
amazing
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?
Bro you really Awesome... Good Work! Am start practicing figma your videos are so helpful for me --- Thala !
Am from Tamilnadu, India !
Thanks! Good luck and all the best 😊
Good video brother🎉
Thank you! 🤝
respect++
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?
Amazing Bro :) how do i export to html or gif/webP
sub +1. need more of UI Adrian .
🔥
🙌
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?
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
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 ?
I came through your mail. Nice channel
Thanks a lot!
I'm not familiar ui design but I like so how can I this mash into dev or code
Can we animate widgets in figma ? Like the cards on the right side you have
Yes, you can, but for the most fluid animation I'd go with AE
sir , why my animated is not looping ? im confused bcs its almost done but not looping huuhu
Thanks! How do you show the keyboard presses?
Keystroke Pro 👈
@@uiadrian Thanks!
Hi Adrian, can you use this animated mesh gradient on a website? Like, download this in a video format or so?
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
Yeah this is cool but how do I get it to maintain form using auto-layout?
I'd put this in an absolute position into a hero section so that it scales with the width
My one is saying that a prototype needs to have at least one frame
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 ✌️
it did not happen... I tried exact point to point
Same -My one is saying that a prototype needs to have atleast one frame
@@muneebanjamch are you using frame or square?
Grab the files and look inside the settings. Maybe you didn’t use a frame to create the component set
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