Masking in 4 Minutes (Figma Tutorial)

[@vasilistsoulis8968]

I heard your prayer! Your directions on using the Figma mask were short, sweet, and incredibly helpful. Thanks for making it so easy to follow!

[@jarrettmills8807]

Seriously best teacher on youtube I would pay for more classes

[@TimGabe]

that’s just… so surreal to hear. would have never expected comments like this when I started the channel 😳🤩

[@ROLLTIDEJOE]

Agreed!

[@ducey99]

The way that you made this so easy to understand...WOW! I cannot thank you enough!

[@MuhammadAsif-nb8oc]

mask is simple and you are making it more easier for viewers, im complementing it with official figma videos

[@TimGabe]

that’s so nice to hear. thanks, my friend!!

[@deliciouspizza4405]

2:50 you know your videos are just so great. I searched and watched several Figma tutorials but couldn't find the one clear and fit for me. But Tim you are amazing 💜 I'm leaving this comment here

[@TimGabe]

this is such a nice comment. thank you so much 🙌☺️ really glad you found it helpful! 💜

[@Jonathan-we3kf]

4 minutes are optimal. Very thankful you explain things that I do sometimes, but I understand it more somehow then. Cheers!

[@TimGabe]

grateful for your feedback and so happy that it was helpful, Jonathan 🥳🙏

[@workmail1]

Love the 4 minute format, fast & sweet!

[@workmail1]

oh, short & sweet is the saying

[@TimGabe]

@@workmail1 hahaha, whatever the saying is I LOVE that you love it ❤️ thanks Alfred, my friend!!

[@vlasiucion7002]

The most important thing is that it is not only fast and sweet, is also informative ^_^ THX Tim Gabe!

[@TimGabe]

@@vlasiucion7002 Vlasiuc, thank you so much for continuing to support 🥳 really means a lot!!

[@VeronicaRrui]

That's soooo sick! This is the first time I know how to use figma mask correctly and It's really fun! Thank you so much Tim!!!!

[@TimGabe]

ahh, that's great to hear. happy i could be of help! 😃

[@positiveNature6]

thank you for the big help. i wish this video gets to as many people who are learning figma.

[@TimGabe]

that's such a nice comment, thank you!!

[@vickypirker3462]

Your tutorials are incredibly engaging and dangerously captivating at the same time 😉🤣. Every time I start one just to learn a small technique, I find myself half an hour later still engrossed in your videos, because each one is so well explained and extremely valuable. Can't wait to check out your Framer course! It will definitely be worth the money!

[@HasimYerlikaya]

I'm learning Figma with your videos. Your contents are great. Thank you.

[@TimGabe]

happy that I can assist on your design journey, Hasim 🤩🙌

[@SourSprout-mn4lg]

Wow this was amazing! I've watched so many masking tutorials and I just NOW get it! Why is everyone making it so complicated!

[@EmptycatArt]

you quick videos are literally saving my final project lmao tysm man

[@TimGabe]

that's amazing to hear!!

[@silverflowerhohocham3711]

Your tutorials are fantastic, thank you for making figma so easy to understand!

[@TimGabe]

that's so cool of you to say. thank you!

[@djullivitoria2147]

Obrigada! Não sei ler e nem falar inglês, mas consegui entender e foi o vídeo que me salvou. Já tinha visto outros em português mas não havia explicado o que eu precisava! Obrigada, obrigada! Deixo aqui uma sugestão para legendas em português, teria um ótimo alcance e mais visualizações.

[@charleswu9716]

Hey Tim! I just want to say, your videos & channel deserve more views and you're a real g for sharing this!

[@TimGabe]

Charles, that is so appreciated. thank you so much for the kind words 🙌🙏🤩

[@Zainz834]

Thanks for showing how the tool works. One thing maybe you can add in you video that would help is to have short displayed at the bottom when ever you use them in the video. Not for everything but at least for the main context that you are presenting. It would help even more. Thanks again for making these video. I think they are the best I have seen so far on figma.

[@TimGabe]

so happy that you like the tutorials, Zain! thanks a lot for being so supportive 😃 what kind of short description/label are you thinking?

[@Zainz834]

@@TimGabe Thanks for the response Tim. Sorry I made a typo. I meant to say that you could display Short Cuts at the bottom of the screen when you use them in videos. But later I saw some of your videos had them already so probably the one that didn't have were the old ones. Thanks :)

[@tanveerali8073]

very helpful thanks so much and please keep sharing this type of tutorials

[@buzugbeblessings5866]

You have revealed so much, many thanks! You've earned my subscription 😀

[@TimGabe]

thank you, happy to have you as a subscriber! 😃

[@arijtrad1805]

bro ur utube channel is lit i don t like videos on utube because that s how i mark videos to watch later but hell bro u desreve it it s simple short precise and straight to the point with showing xactly the examples of the direct application of the techniques u use

[@TimGabe]

Arij, this means a lot!! thank you so much. appreciate the really thorough comment as well. take care for now, hope I can continue providing you with helpful stuff 🤩

[@creatoratplay]

I was struglling with masking before this. Thank you!! What cool examples/tutorials too! Some other recent uncertainties I'm having around UI design are: - How do experienced designers align text? Do they still use different-sized squares or is there a way to format the text for better alignment? - When designing hi-fi mockups do designers design the whole page or just what can be seen above the fold? For a recent UI challenge I designed only one screen but when placing it inside an iphone mockup I ended up using 4 different iphone shots to show off the entire page. 😳 I'm assuimg that for a real project you wireframe/mockup the entire page, but for dribbble shots or for sharing online, is it okay to just design above the fold? Anyways, just some UI questions I'm wondeirng about. Thanks for all your informative videos!!

[@TimGabe]

happy you found it useful 😃 1) text containers will be determined by the line height and the width of the text, but if you put two text fields into an auto layout you can use the “text base alignment” feature in the “…” menu in the auto layout settings to align them 👌 2) you would usually create either a prototype or just have the full page to show when showing a client (without the mock-up). dribbble shots and visual presentations are more free and up to you! ☺️

[@creatoratplay]

@@TimGabe This was really helpful. Thanks for taking the time to answer my questions!

[@OshinKoul-su4sb]

This was a great video......u shared lots of imp points in brief....loved it

[@TimGabe]

glad you liked it Oshin! ☺️🙌

[@yashwantraikwar1432]

THANKS FOR THE VALUABLE INFO ❤

[@blessingedache6091]

You're such a good tutor. Cheers! You just gained a new subscriber😊

[@TimGabe]

appreciate that, sincerely!!

[@SazikimiJaeger]

God damn you're so up to the point with the most effective methods (not limited to 1 but how many available) & then explaining things with example like a child play, Man, I'm really starting to love your videos. This is the 2nd one watching & already subscribed. Keep up the good work mate! 🥰🥰

[@TimGabe]

thanks a lot my friend 🙏

[@iyamuidahosa2177]

Loved every minute of it. Thanks, Tim!

[@TimGabe]

thank you so much for this kind comment, Iyamu! 🤩

[@nathanielimalay6985]

anotherrr amazinggg content from gabe!

[@pourtoujours3130]

2:43 wow!! this really worked on me, anyway you are making nice videos. Thankyou❤

[@TimGabe]

haha, the old trick!! thanks for being nice enough to act on it, my friend 💜

[@pourtoujours3130]

@@TimGabe aw my pleasure ❤️

[@leeheffron623]

Likewise...I have to say these videos are great mate. I very rarely subscribe to any such videos, but I'm finding them really useful and easy to follow. Subscribed! Go Timbo!!!

[@TimGabe]

that's such a great compliment! thanks lee!!

[@jaysr4353]

I love your Presentation for teach us. Nice Video 👍

[@TimGabe]

thank you so much Jay 😃🙏

[@darkot7266]

Lucky to stumble upon your channel, great content. Keep it up mate

[@TimGabe]

happy you found me! 😃

[@tanmaypatra4896]

Your videos are really great. you explain so beautifully !! Thanks for your resources.

[@TimGabe]

that’s amazing to hear, Tanmay! thanks a lot 🤩👌

[@daniyalaslam467]

Amazing well Explained man!

[@TimGabe]

happy you liked it, Daniyal 😃

[@UPerfil1]

Thank you, man. 👊👊👊

[@TimGabe]

thank you for the comment, Renato 🥳🙏

[@mehmetyilmaz001]

Cool explanations. thanks.

[@TimGabe]

appreciate it Mehmet!! have a great day 🙏

[@roshanakgolesorkhi2806]

Your Videos are great, Thanks Tim🤩

[@TimGabe]

thank you for the support, Roshanak! 🤩

[@LuisLopez-xi8gb]

Great vid bro! make it easy to understand specially for a new rookie like me hahah

[@TimGabe]

that's great to hear, my friend!

[@dannywiththelight]

Thank you Tim!

[@TimGabe]

Danny, I’m the one to thank you for engaging with the content!! thanks man 🙏🤩

[@gabrielnemro7684]

dude this is so useful!

[@TimGabe]

happy you liked it!! 😃

[@justellie5554]

really helpful, thanks alot

[@TimGabe]

that’s awesome, Ellie! thanks 🙏🙏

[@abhishekgharia8808]

Stranger things tutorial waiting for that 😎

[@TimGabe]

it's brewing!! thanks for commenting, Abhishek 🥳🙏

[@gunnn7514]

THANKS YOU SO MUCH BRO

[@TimGabe]

my pleasure, my friend!! 🥳🤩

[@noaheben555]

Amazing help! Thank you sir.

[@TheBestNoobGamer]

Good and ez learning videos thanks for making them

[@TimGabe]

happy you liked it, Ali 🤩🙏

[@NoggieB]

Commenting :) I like your videos! Great length also :) Thanks!

[@TimGabe]

thanks a lot, my friend!!

[@mileslegend]

yeap it has worked thanks man....i have picked insight from yuor video and because of that i gave you a like and a subscribe

[@TimGabe]

really appreciate it, friend!

[@itswildlifemoments]

mehn, i love your videos, its amazing bro, a shout out from Nigeria!

[@TimGabe]

that’s so cool to hear, Chinedu. thank you so much my friend 😃

[@ROLLTIDEJOE]

as I've said...your a baaaddd man! 💯

[@TimGabe]

haha, thaaanks Satoshi!!

[@FelicianaSoul]

Thank you for this video

[@nicepicbro3425]

Thank you for such a great content.

[@TimGabe]

so glad that it provides value ☺️🥳

[@ColorfuD]

Thanks youu soo muchhhh!!!!❤🤩

[@SixStringSymphony]

his personality when he imagines us commenting got me to hit the like button

[@Capalo]

new suscriber, thank you

[@EM-vc3qy]

thanks for uploading this amazing video! I purposely paused the video just to give you a like and sub!

[@anastasiyakuzmina7116]

Cool, thanks!)

[@TimGabe]

thanks a lot Anastasiya! 🥳

[@GraveRave]

Awesome!

[@TimGabe]

happy you like it!! 😃🥳🙌

[@collectorX]

awesome tips

[@TimGabe]

thank you my friend 🙏

[@asherfaulkner5696]

Hey hey! I'm a year late to this tutorial, but it's super helpful, thank you! Do you have a tutorial on the hover effect using masks? For example, you have two images of the same thing, but one is black/white, and the other is colored, and when you hover over the black/white image, the colored version is revealed as you mouse over the image. Does that make sense?

[@TimGabe]

i think you could do that by just layering the images and using opacity! 😃

[@sivareddy7900]

super bro i really like it you explanation

[@izuchukwuigwe4185]

Thanks fo this

[@towiet6671]

thank you

[@ratstar4102]

Im an old school Photoshop user LMAO , thank you for quick tutorials

[@SamuelMok-es8qh]

Subscribed liked and commented

[@sandstorm7476]

So simple!

[@CodyKerrMusic]

what camera do you use for your videos and where can I cop those transitions! thanks mate

[@bluedeath4888]

Very useful information...thank you very much....Deeply appreciated!

[@kalasenja634]

Thankyouuu very muchhh🫂

[@TimGabe]

happy to be of service! 😀

[@RiyaBiswas-pq1xo]

super Cool video

[@TimGabe]

thank you, internet friend!!

[@eunicearmilda1657]

Thanks

[@mayangasrirahmatunisa5239]

no need to long.. I will definitely sub and like haha

[@teenskeey2157]

Nice one

[@TimGabe]

thanks a lot, my friend! 😃

[@stevekendall3109]

If you have an image already on your figma canvas, is there a way to make that a fill without saving it to an outside folder?

[@TimGabe]

you can copy the image in the right sidebar (by highlighting it and copy it), then you can choose a fill and just paste it!

[@santhiyakrishnan9546]

Nice information

[@ChristianBrom]

finally I get it 😀

[@TimGabe]

that's so cool to hear, Christian!!

[@lalaeyyubova]

thanks for videos

[@Mercedes-Benz_CLK_LM]

Respect !👍

[@TimGabe]

respect right back at you!

[@TimGabe]

here's the Figma file if you want to follow along 🤩: www.figma.com/file/ogrN5kzX25tfsoCOyAPfqM/Figma-Masking?node-id=0%3A1

[@RiviThushara]

love that

[@SquaredbyX]

How do I keep only the image after without all of the layers after creating the mask

[@morriskuria6595]

🙌🔥

[@TimGabe]

🥳🙏🤩

[@souleater0815]

I think it's very odd the mask does not keep its color and you have to add another layer in between.

[@TimGabe]

can’t have it all 🥲

[@aryn_rjpt]

awsmmm

[@TimGabe]

thanks a lot!!

[@ytpremiumnyafff]

hahaa i subscribed. thank you

[@studbud-qw3yo]

dont know why the styled png masking is not working while I am trying to do it as it is, firstly I was doing mistake of not selecting the png which i want to mask below the image but after doing it still unable to bring out that effect that looks dope! can someone help me

[@dao.808]

commenting 'cause u made me laugh hahaha

[@TimGabe]

haha, thanks!!

[@harshitk._]

♥

[@TimGabe]

💜

[@altere-go6093]

I'm commenting for no reason. Thanks, you interrupted.😁

[@TimGabe]

appreciate the comment nonetheless 🤩🙏

[@ruthfunmilayo-s5q]

HOW DO YOU GET THE TEXT TEMPLATE?

[@TimGabe]

not sure what you mean, my friend?

[@AngelMusicGroup1]

Commented😂

[@snapback9221]

Comment for alg

[@delioJorge7]

COMMENT

[@TimGabe]

thank you!!

[@tonisun4785]

sehr süß u R

[@TimGabe]

i don't know what that is, but i dig it!!

[@tonisun4785]

You are very cute@@TimGabe

[@Domi-nq3uo]

The mask is not on top anymore

[@virtualperfectioncowboy4075]

very helpful thanks!

[@ChArham-bs1ne]

Thanks