How To Create Mesh Gradients in Figma (Beginner Tutorial)

Рет қаралды 146,172

Жыл бұрын

Mesh and Aurora gradients are not only popular and beautiful-they're also very easy to create. In this step by step tutorial video you'll learn everything you need to create them yourself.
🔴 Working File: timgabe.com/resources/figma-m...
#figma #figmatutorial
➡️ QUESTION - Have a question about UI, UX or Product Design? Designing in Figma? Or Anything Else? Post in the comments section of this video-I’m happy to answer!

Пікірлер: 141

@tielcoelecdu4431 4 ай бұрын

very simple yet detailed work..great job..learned a lot thanks!

@hugocardenas2449 Жыл бұрын

This was an amazing tutorial, thank you so much Tim!

@TimGabe Жыл бұрын

appreciate you Hugo! really nice of you to both comment and post on Twitter 🤩🙏

@nicolekesselring3398 4 ай бұрын

your labeled artboards of "Apply color" "blurs".. etc to show each step was helpful! Thanks

@bahatiyves 9 ай бұрын

Your videos are really amazing and straight to the point. Thank you Tim

@TimGabe 8 ай бұрын

that's amazing to hear, thanks my friend!

@nikithasshenoy694 3 ай бұрын

amazing tutorial... thanks.. this was a real timesaver

@EDIRomanul Жыл бұрын

Thanks mate, exactly what I wanted. The last part of the video is the most helpful.

@TimGabe Жыл бұрын

really happy you liked it, my friend 🥳

@aniives5495 Жыл бұрын

This was highly needed! Thanks a bunch Tim.🤞🏿

@TimGabe Жыл бұрын

that’s great to hear, Ani! really grateful for the support ☺️🙌

@aniives5495 Жыл бұрын

@@TimGabe I’d try it out and would love to show you the outcome.

@lenaspektor1325 2 ай бұрын

Thank you so much for sharing🤩

@marekbitka7283 5 ай бұрын

Very nice resource!

@jjn9750 2 ай бұрын

Very specific and helped a lot.👍

@digitalnomad29 11 ай бұрын

Beautiful...that was a great piece of art... Loved this tutorial..U just got another subscriber fan!!

@TimGabe 11 ай бұрын

thanks a lot, friend!!

@nathansimula8058 Жыл бұрын

Amazing Tim, thanks for the tips !

@TimGabe Жыл бұрын

thanks a lot for the comment and encouragement, Nathan 🙏☺️

@acya05 3 ай бұрын

Love-it! you are so underrated imo. Very adhd friendly clear, fun and super useful vids!! hope you'll get to you 100k follower milestone well like yesterday!! :D :D

@comedybites14 Жыл бұрын

Amazing tutorial and explanation. I randomly cliked on it and i found it super helpful. Keep growing buddy!

@TimGabe Жыл бұрын

really appreciate the kind comment and so happy that you found it helpful, Mudit! 🤩

@nguyenthanh1328 Жыл бұрын

Thank u bro 🤘 I've been looking for this tutorial for a long time 😩👌

@TimGabe Жыл бұрын

happy you found it, my friend 😃

@HauNguyen-su4rb Жыл бұрын

That's awesome! Thanks for sharing ❤

@TimGabe Жыл бұрын

thank you for supporting, Hau!!

@prashlovessamosa Жыл бұрын

You don't how much you helping me. Thanks for providing knowledge for free.

@TimGabe Жыл бұрын

comments like these 🙏 thank you for supporting me!!

@dmaLab 7 ай бұрын

Fantastic video. Thanks Tim!

@TimGabe 7 ай бұрын

thanks a lot, my friend!

@aleks4307 Жыл бұрын

You are a shining silver angel in the dark quilt of the night. Thank you.

@TimGabe Жыл бұрын

haha, that's a very nice comment Aleks!! thanks a lot!!

@kyt2245 Жыл бұрын

Amazing content! Thank you!

@TimGabe Жыл бұрын

really appreciate it, Kyt! 🤩

@maed73 Жыл бұрын

Amazing, Thank you so much :)

@TimGabe Жыл бұрын

you’re welcome Maedeh! ☺️ thanks for the comment!!

@gungunparakh Ай бұрын

Amazing

@Docutain22 Жыл бұрын

Thanks alot Tim

@TimGabe 8 ай бұрын

appreciate the comment, larry!

@quadrifxNg Жыл бұрын

Thank you so much

@TimGabe Жыл бұрын

thank you for commenting, my friend ☺️

@anmol3457 9 ай бұрын

thanks a lot. I'm a noob trying to do this in my free time and it really helps.

@TimGabe 9 ай бұрын

happy that it helps you, my friend 😃

@DEV_XO Жыл бұрын

Amazing!

@TimGabe Жыл бұрын

thank you, my friend! ☺️🙌

@ambroUX 4 ай бұрын

Good explanation bro. Really helpful.

@TheJaitan Жыл бұрын

Amazing. Thanks.

@TimGabe 8 ай бұрын

happy to help, my friend!

@sahilak4351 7 ай бұрын

Nice, easy simple and plain explanation 👍🏻👍🏻👍🏻

@TimGabe 7 ай бұрын

glad you liked it 🤩

@SzabatDesign Жыл бұрын

Great Content Bro! Thanks :)

@TimGabe Жыл бұрын

Christopher!! thanks a lot, my friend 🥳🙏

@ferlomano1139 Жыл бұрын

Great!

@TimGabe Жыл бұрын

🤩

@tumon001 Жыл бұрын

Thanks bro!

@TimGabe Жыл бұрын

no worries, my friend!!

@alibekazimov3877 Жыл бұрын

Clean explain!!

@TimGabe Жыл бұрын

appreciate it, Alibek 🙏😃

@JustPlainRob Жыл бұрын

Best gradient I ever made was just a picture of a pile of marshmallow Peeps blurred beyond recognition.

@Commandraa 11 ай бұрын

😂

@Jab7kO Жыл бұрын

Cool thing ;) thx!

@TimGabe Жыл бұрын

glad you liked it! 🤩

@krishnakedia9343 7 ай бұрын

tHANKS BROTHER

@TimGabe 7 ай бұрын

glad to help, krishna!!

@kureji9337 Жыл бұрын

bro ur gonna grow a lot bigger with your quality contents now that many people are interested in ux ui designing

@TimGabe Жыл бұрын

that would be amazing! I’m staying consistent and hope that it will pay dividends ☺️

@TimGabe Жыл бұрын

and thank you for the kind comment!! 🙏

@TasfidMahfuj Жыл бұрын

Thanks

@TimGabe Жыл бұрын

my pleasure! 💜

@cory_who Ай бұрын

Nice tuturial but some commands prompts on the screen would be helpful during your workflow ie: when you copied the base color and applied it to multiple objects (I have no clue how you did that). Thanks for the video!

@kashyap263 Жыл бұрын

tim bro is the real pro

@TimGabe Жыл бұрын

really appreciated, Kashyap! 🙏

@akenjinicole1499 Жыл бұрын

amazing

@TimGabe Жыл бұрын

glad you liked it!! 😃

@MehediHasan-141 Жыл бұрын

very helpfull video thanks a lot love from bangladesh

@TimGabe Жыл бұрын

thank you so much, Mehedi! 🤩

@user-zb5uh2fw5t 9 ай бұрын

It's exactly what I was looking for, thanks! :) What shortcut did you use to change color (01:19) ?

@TimGabe 9 ай бұрын

so nice of you to drop by and comment! good luck on your journey, my friend!!

@psychedelicloli 10 ай бұрын

Nice

@TimGabe 10 ай бұрын

thanks!!

@Fredricanderson 3 ай бұрын

Thank you for much for the clear instructions! I tried plugin but found it quite unhelpful because there were limited options to change it after the fact.

@digitalnomad29 10 ай бұрын

Tim ... Your big fan from India.. 😊.. do u have a tutorial on gradient types like linear, radial, etc...and their best applications in design

@TimGabe 9 ай бұрын

really appreciate the support!! i have a tutorial on the different gradiets inside of figma 😃

@groeneveldagencynl Жыл бұрын

2k likes!

@thecommunityenascruz2661 10 ай бұрын

very amazing.. thank you.. please how do i get this noise image

@TimGabe 9 ай бұрын

if you search for "noise" in the community you should find multiple files!

@azin84y Жыл бұрын

thanks for this amazing lesson, I just wonder why my frame section doesn't have a clip content checkbox, I dont know what to do without it

@TimGabe Жыл бұрын

that's weird. are you sure you're targeting the frame? thank you so much for the comment!!

@peterhobbs9107 Жыл бұрын

Fantastic Tim! Can these be exported as svgs?

@TimGabe Жыл бұрын

hey Peter! they can technically be exported as .svgs, but I'm not sure how they'll render though... probably better to go with .pngs and compress them 😃

@peterhobbs9107 Жыл бұрын

@@TimGabe Makes sense Tim. Thank you. So appreciate all you do.

@TimGabe Жыл бұрын

appreciate the kind comments, Peter 🙏😃

@MilanB Жыл бұрын

When lazy, I use blobs plugin :D. Anyway, what are your thoughts on Spline, do you plan uploading content related to it?

@TimGabe Жыл бұрын

that’s a great hack, Milan! 🤩 I think Spline is a game changer when it comes to 3d, but haven’t had the time to dig my teeth into it… maybe in the future though! 🧐☺️

@MilanB Жыл бұрын

@@TimGabe I played with spline a bit. For sure it is not feature rich like blender but i think their aim is 3D for the web.It allows to export assets to react projects and interactions through code... Thanks for replying mate have a good weekend.

@frederikkedahl4508 Жыл бұрын

Great video! (Y) how do you scroll through the colors at 5:00?

@TimGabe Жыл бұрын

you can target the hex and then just use your keyboard arrow keys (up and down) 🤩

@frederikkedahl4508 Жыл бұрын

Nice, thanks! cool feature :D

@e69advitam 6 ай бұрын

@@TimGabe Hi, pin this comment please)

@melodydaniel8043 4 ай бұрын

Can I make the mesh gradient a style to reuse on other components?

@yo-is4yx Жыл бұрын

How do you use the mesh gradient in CSS later on? My only worry (as a designer) is that a dev team won't be able to develop it further.

@TimGabe Жыл бұрын

if you want to make it very easily transferrable, you could just make circles instead of random shapes. then your devs could just create divs with the correct sizes, colors and blur settings 😃

@shivaniswaraj1857 Жыл бұрын

can you please provide the link to that jpg that was used in the optional step?please.thankyou

@TimGabe 8 ай бұрын

oufff, so long ago since this tutorial was made 😢 can't find it!

@khanayan-v7z 9 ай бұрын

Hey Tim, I couldn't find that noise image, can you please link it up?

@khanayan-v7z 9 ай бұрын

Found it, thanks!

@TimGabe 9 ай бұрын

great!!

@tabmax22 Жыл бұрын

how do we get the css for this when we're actually coding the website?

@TimGabe Жыл бұрын

if you're not planning on having it animated you could just export it as a big .PNG and then compress it enough to not impact load times too much, but if you do want to animate it on a website you could either a) export the individual shapes as .SVGs and place them with position absolutes on your website or b) create divs on your website and use the inspect tool in Figma to map them as closely as possible (again, also using position absolutes) 🤩

@vivlogs9752 11 ай бұрын

how do u clip the rectangle ? I didn't get it...

@TimGabe 11 ай бұрын

Clip content (but it's only available on Frames 😃)

@tologonkudaiberdi2306 Жыл бұрын

then think about front end developers making it with code and how hard will be them ))

@TimGabe Жыл бұрын

a solution could be that you either make it an image or you try to stick to only circles 👌😃

@tologonkudaiberdi2306 Жыл бұрын

@@TimGabe

@LearnWithBahman 11 ай бұрын

how do we code this ? or this is only possible in prototype

@TimGabe 11 ай бұрын

you can create them in Framer, check this tutorial: kzfaq.info/get/bejne/Y7R4oKeT2MeZe2Q.html

@Scott_C 3 ай бұрын

How would a developer build this?

@thanveerkhan1353 10 ай бұрын

Is there any plugins for creating mesh gradients

@TimGabe 10 ай бұрын

there are -- one is mentioned in the video!

@daryleong988 Жыл бұрын

Hi, how do I get the PNG Image at 3:33? thank you

@TimGabe Жыл бұрын

you can search for "grain" in the Figma community and you'll find a bunch of free files including those kinds of grains!

@daryleong988 Жыл бұрын

@@TimGabe thank you !

@khanayan-v7z Жыл бұрын

@@TimGabe Bro I can't find it, can you maybe link it?

@rixdomingo967 9 ай бұрын

I appreciate the tutorial but how can it be a for a beginner if everything is laid done and the follower literally has a blank canvas? :(

@TimGabe 9 ай бұрын

i think midjourney.... can't remember!

@Blumentalovic Жыл бұрын

Great tutorial, but the one i did looks terrible.

@TimGabe Жыл бұрын

just keep playing around with different colors and you’ll find something that works 😃

@honeypatel343 Жыл бұрын

HOW TO DO TARGET ??

@TimGabe Жыл бұрын

what kind of target are you referring to, my friend?

@jdanielortega 8 ай бұрын

Sadly you cant use it as a background inside of figma unless you export it.

@TimGabe 8 ай бұрын

you mean as an image background in figma?

@jdanielortega 8 ай бұрын

Yes, If I have an Auto Layout Frame, I can't use this as the background of let's say a section unless I export it as image. And then I would lose all editability@@TimGabe

@JuaNSkter Жыл бұрын

Great Tutorial, however, I would suggest doing things a bit slower. I'm just starting on Figma and your explanation was great, but you do things too quick, and I needed to scroll back over and over again.

@TimGabe Жыл бұрын

thanks for the feedback, Juan!! will keep this in mind 😃

@UXMuskan Жыл бұрын

@@TimGabe add time stamps so it will be easier for us thanks.