Masking in 4 Minutes (Figma Tutorial)

Поділитися
Вставка
  • Опубліковано 11 вер 2024

КОМЕНТАРІ • 147

  • @deliciouspizza4405
    @deliciouspizza4405 Рік тому +3

    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
      @TimGabe  Рік тому

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

  • @jarrettmills8807
    @jarrettmills8807 Рік тому +4

    Seriously best teacher on youtube I would pay for more classes

    • @TimGabe
      @TimGabe  Рік тому +2

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

    • @satoshiedits21
      @satoshiedits21 Рік тому

      Agreed!

  • @ducey99
    @ducey99 5 місяців тому +1

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

  • @VeronicaRrui
    @VeronicaRrui 7 місяців тому +1

    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
      @TimGabe  7 місяців тому

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

  • @workmail1
    @workmail1 2 роки тому +3

    Love the 4 minute format, fast & sweet!

    • @workmail1
      @workmail1 2 роки тому +2

      oh, short & sweet is the saying

    • @TimGabe
      @TimGabe  2 роки тому +1

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

    • @vlasiucion7002
      @vlasiucion7002 2 роки тому +1

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

    • @TimGabe
      @TimGabe  2 роки тому

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

  • @HasimYerlikaya
    @HasimYerlikaya Рік тому +3

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

    • @TimGabe
      @TimGabe  Рік тому +1

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

  • @charleswu9716
    @charleswu9716 Рік тому +1

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

    • @TimGabe
      @TimGabe  Рік тому

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

  • @pigeonanimations6118
    @pigeonanimations6118 Рік тому +2

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

    • @TimGabe
      @TimGabe  Рік тому +1

      that's amazing to hear!!

  • @MuhammadAsif-nb8oc
    @MuhammadAsif-nb8oc Рік тому +2

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

    • @TimGabe
      @TimGabe  Рік тому

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

  • @Jonathan-we3kf
    @Jonathan-we3kf 2 роки тому +1

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

    • @TimGabe
      @TimGabe  2 роки тому

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

  • @SazikimiJaeger
    @SazikimiJaeger Рік тому +1

    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
      @TimGabe  Рік тому

      thanks a lot my friend 🙏

  • @positiveman6
    @positiveman6 Рік тому +1

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

    • @TimGabe
      @TimGabe  Рік тому

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

  • @silverflowerhohocham3711
    @silverflowerhohocham3711 7 місяців тому +1

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

    • @TimGabe
      @TimGabe  7 місяців тому

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

  • @leeheffron623
    @leeheffron623 Рік тому +2

    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
      @TimGabe  8 місяців тому

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

  • @vickypirker3462
    @vickypirker3462 6 місяців тому

    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!

  • @buzugbeblessings5866
    @buzugbeblessings5866 11 місяців тому +1

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

    • @TimGabe
      @TimGabe  11 місяців тому

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

  • @chineduchukwuemerie
    @chineduchukwuemerie Рік тому +1

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

    • @TimGabe
      @TimGabe  Рік тому

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

  • @SourSprout-mn4lg
    @SourSprout-mn4lg 7 місяців тому

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

  • @mileslegend
    @mileslegend 10 місяців тому +1

    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
      @TimGabe  10 місяців тому

      really appreciate it, friend!

  • @arijtrad1805
    @arijtrad1805 Рік тому +1

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

  • @blessingedache6091
    @blessingedache6091 7 місяців тому +1

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

    • @TimGabe
      @TimGabe  7 місяців тому

      appreciate that, sincerely!!

  • @darkot7266
    @darkot7266 10 місяців тому +1

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

    • @TimGabe
      @TimGabe  10 місяців тому

      happy you found me! 😃

  • @djullivitoria2147
    @djullivitoria2147 5 місяців тому

    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.

  • @pourtoujours3130
    @pourtoujours3130 Рік тому +2

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

    • @TimGabe
      @TimGabe  Рік тому +1

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

    • @pourtoujours3130
      @pourtoujours3130 Рік тому

      @@TimGabe aw my pleasure ❤️

  • @Zainz834
    @Zainz834 Рік тому +1

    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
      @TimGabe  Рік тому +1

      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
      @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 :)

  • @gabrielnemro7684
    @gabrielnemro7684 Рік тому +1

    dude this is so useful!

    • @TimGabe
      @TimGabe  Рік тому

      happy you liked it!! 😃

  • @creatoratplay
    @creatoratplay Рік тому +1

    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
      @TimGabe  Рік тому +1

      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
      @creatoratplay Рік тому

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

  • @OshinKoul-su4sb
    @OshinKoul-su4sb Рік тому +1

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

    • @TimGabe
      @TimGabe  Рік тому

      glad you liked it Oshin! ☺️🙌

  • @LuisLopez-xi8gb
    @LuisLopez-xi8gb Рік тому +1

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

    • @TimGabe
      @TimGabe  10 місяців тому

      that's great to hear, my friend!

  • @EM-vc3qy
    @EM-vc3qy Місяць тому

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

  • @tanmaypatra4896
    @tanmaypatra4896 Рік тому +1

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

    • @TimGabe
      @TimGabe  Рік тому

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

  • @iyamuidahosa2177
    @iyamuidahosa2177 2 роки тому +1

    Loved every minute of it.
    Thanks, Tim!

    • @TimGabe
      @TimGabe  2 роки тому +1

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

  • @NoggieB
    @NoggieB 8 місяців тому +1

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

    • @TimGabe
      @TimGabe  8 місяців тому

      thanks a lot, my friend!!

  • @mehmetyilmaz001
    @mehmetyilmaz001 Рік тому +1

    Cool explanations. thanks.

    • @TimGabe
      @TimGabe  Рік тому

      appreciate it Mehmet!! have a great day 🙏

  • @jaysr4353
    @jaysr4353 Рік тому +1

    I love your Presentation for teach us. Nice Video 👍

    • @TimGabe
      @TimGabe  Рік тому +1

      thank you so much Jay 😃🙏

  • @justellie5554
    @justellie5554 Рік тому +1

    really helpful, thanks alot

    • @TimGabe
      @TimGabe  Рік тому

      that’s awesome, Ellie! thanks 🙏🙏

  • @abhishekgharia8808
    @abhishekgharia8808 2 роки тому +3

    Stranger things tutorial waiting for that 😎

    • @TimGabe
      @TimGabe  2 роки тому

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

  • @roshanakgolesorkhi2806
    @roshanakgolesorkhi2806 Рік тому +1

    Your Videos are great, Thanks Tim🤩

    • @TimGabe
      @TimGabe  Рік тому

      thank you for the support, Roshanak! 🤩

  • @TheBestNoobGamer
    @TheBestNoobGamer 2 роки тому +1

    Good and ez learning videos
    thanks for making them

    • @TimGabe
      @TimGabe  2 роки тому

      happy you liked it, Ali 🤩🙏

  • @anastasiyakuzmina7116
    @anastasiyakuzmina7116 Рік тому +1

    Cool, thanks!)

    • @TimGabe
      @TimGabe  Рік тому

      thanks a lot Anastasiya! 🥳

  • @gunnn7514
    @gunnn7514 2 роки тому +1

    THANKS YOU SO MUCH BRO

    • @TimGabe
      @TimGabe  2 роки тому

      my pleasure, my friend!! 🥳🤩

  • @daniyalaslam467
    @daniyalaslam467 Рік тому +1

    Amazing well Explained man!

    • @TimGabe
      @TimGabe  Рік тому +1

      happy you liked it, Daniyal 😃

  • @satoshiedits21
    @satoshiedits21 Рік тому +1

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

    • @TimGabe
      @TimGabe  Рік тому +1

      haha, thaaanks Satoshi!!

  • @dannywiththelight
    @dannywiththelight 2 роки тому +1

    Thank you Tim!

    • @TimGabe
      @TimGabe  2 роки тому

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

  • @UPerfil1
    @UPerfil1 2 роки тому +1

    Thank you, man. 👊👊👊

    • @TimGabe
      @TimGabe  2 роки тому

      thank you for the comment, Renato 🥳🙏

  • @mayangasrirahmatunisa5239
    @mayangasrirahmatunisa5239 2 місяці тому

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

  • @collectorX
    @collectorX Рік тому +1

    awesome tips

    • @TimGabe
      @TimGabe  Рік тому

      thank you my friend 🙏

  • @nicepicbro3425
    @nicepicbro3425 2 роки тому +1

    Thank you for such a great content.

    • @TimGabe
      @TimGabe  2 роки тому

      so glad that it provides value ☺️🥳

  • @noaheben555
    @noaheben555 6 місяців тому

    Amazing help! Thank you sir.

  • @TimGabe
    @TimGabe  2 роки тому +1

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

  • @izuchukwuigwe4185
    @izuchukwuigwe4185 Місяць тому

    Thanks fo this

  • @RiyaBiswas-pq1xo
    @RiyaBiswas-pq1xo Рік тому +1

    super Cool video

    • @TimGabe
      @TimGabe  11 місяців тому

      thank you, internet friend!!

  • @sivareddy7900
    @sivareddy7900 Місяць тому

    super bro i really like it you explanation

  • @teenskeey2157
    @teenskeey2157 2 роки тому +1

    Nice one

    • @TimGabe
      @TimGabe  2 роки тому

      thanks a lot, my friend! 😃

  • @GraveRave
    @GraveRave 2 роки тому +1

    Awesome!

    • @TimGabe
      @TimGabe  2 роки тому +1

      happy you like it!! 😃🥳🙌

  • @dao.808
    @dao.808 Рік тому +1

    commenting 'cause u made me laugh hahaha

  • @SixStringSymphony
    @SixStringSymphony 5 місяців тому

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

  • @ratstar4102
    @ratstar4102 2 місяці тому

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

  • @Mercedes-Benz_CLR_
    @Mercedes-Benz_CLR_ 10 місяців тому

    Respect !👍

    • @TimGabe
      @TimGabe  10 місяців тому +1

      respect right back at you!

  • @santhiyakrishnan9546
    @santhiyakrishnan9546 6 місяців тому

    Nice information

  • @kalasenja634
    @kalasenja634 11 місяців тому

    Thankyouuu very muchhh🫂

    • @TimGabe
      @TimGabe  11 місяців тому

      happy to be of service! 😀

  • @ChristianBrom
    @ChristianBrom Рік тому +1

    finally I get it 😀

    • @TimGabe
      @TimGabe  Рік тому +1

      that's so cool to hear, Christian!!

  • @morriskuria6595
    @morriskuria6595 2 роки тому +1

    🙌🔥

  • @sandstorm7476
    @sandstorm7476 6 місяців тому

    So simple!

  • @lalaeyyubova
    @lalaeyyubova 3 місяці тому

    thanks for videos

  • @SquaredbyX
    @SquaredbyX 6 місяців тому

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

  • @stevekendall3109
    @stevekendall3109 Рік тому +1

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

  • @aryn_rjpt
    @aryn_rjpt Рік тому +1

    awsmmm

    • @TimGabe
      @TimGabe  11 місяців тому

      thanks a lot!!

  • @eunicearmilda1657
    @eunicearmilda1657 3 місяці тому

    Thanks

  • @studbud-qw3yo
    @studbud-qw3yo 6 місяців тому

    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

  • @souleater0815
    @souleater0815 10 місяців тому +1

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

    • @TimGabe
      @TimGabe  10 місяців тому

      can’t have it all 🥲

  • @asherfaulkner5696
    @asherfaulkner5696 Рік тому +1

    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
      @TimGabe  10 місяців тому

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

  • @harshitk._
    @harshitk._ Рік тому +1

  • @AngelMusicGroup1
    @AngelMusicGroup1 5 місяців тому

    Commented😂

  • @ruthfunmilayo-s5q
    @ruthfunmilayo-s5q Рік тому

    HOW DO YOU GET THE TEXT TEMPLATE?

    • @TimGabe
      @TimGabe  Рік тому

      not sure what you mean, my friend?

  • @altere-go6093
    @altere-go6093 Рік тому +1

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

    • @TimGabe
      @TimGabe  Рік тому

      appreciate the comment nonetheless 🤩🙏

  • @snapback9221
    @snapback9221 10 днів тому

    Comment for alg

  • @bluedeath4888
    @bluedeath4888 6 місяців тому

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

  • @delioJorge7
    @delioJorge7 10 місяців тому +1

    COMMENT

    • @TimGabe
      @TimGabe  10 місяців тому

      thank you!!

  • @tonisun4785
    @tonisun4785 9 місяців тому +1

    sehr süß u R

    • @TimGabe
      @TimGabe  9 місяців тому +1

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

    • @tonisun4785
      @tonisun4785 9 місяців тому

      You are very cute@@TimGabe