Figma Constraints & Resizing Made SIMPLE

แชร์
ฝัง
  • เผยแพร่เมื่อ 13 มิ.ย. 2024
  • Let’s learn how to use Figma constraints and resizing in just 10 minutes!
    Video on how to MASTER auto layout:
    • Master Figma Auto Layo...
    Subscribe to the channel here:
    / @timgabe
    Timestamps:
    0:00 Intro
    0:13 General constraints & resizing
    4:18 Clipping
    5:00 How to use it for prototyping
    7:18 Fix position when scrolling
    Music:
    - coffee - lofi hip hop beat (FREE FOR PROFIT USE)
    - FREE Lofi type beat Lighter lofi hiphop beat
    - 5 MINUTES OF (No Copyright Music) CHILL LOFI HIP HOP BEAT (Royalty free)
    #figma #beginner #tutorial #constraints #resizing

ความคิดเห็น • 73

  • @youssefayman994
    @youssefayman994 5 หลายเดือนก่อน +4

    What I love in your videos that you explain the logic of the feature not just how to use it, Thank you

    • @TimGabe
      @TimGabe  5 หลายเดือนก่อน

      appreciate your comment, youssef!!

  • @dopsejimmy
    @dopsejimmy ปีที่แล้ว +1

    I love your devotion to making all of these videos soooo understandable, I will be using TH-cam’s ‘new’ features by liking and subscribing!!😂

  • @musicxmoreno
    @musicxmoreno 10 หลายเดือนก่อน +1

    @7:52 - Pure Magic! Love the way you teach. Love all your videos!!!

    • @TimGabe
      @TimGabe  9 หลายเดือนก่อน

      happy to hear it my friend!!

  • @mathivathani3650
    @mathivathani3650 9 หลายเดือนก่อน +3

    Hey Bro, I just came across your video and was absolutely blown away by the way you narrated it. You explained everything so clearly. I immediately subscribed to your channel after watching the video. I don't want to miss any information from your channel.
    Thanks much bro.
    Great job!

    • @TimGabe
      @TimGabe  9 หลายเดือนก่อน

      that's such a nice comment, Mathi! really appreciate that 🙏

  • @andrescastillo07
    @andrescastillo07 ปีที่แล้ว +6

    Simple and clear, thank you Tim! I'm learning a lot about Figma and understanding how it works thanks to you.

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      Andrés, this makes me so happy. thanks for letting me know, my friend ☺️🙏

  • @mohamadpirelyas3383
    @mohamadpirelyas3383 11 หลายเดือนก่อน +2

    hey man your teaching is perfect. thank you🤩😘

    • @TimGabe
      @TimGabe  6 หลายเดือนก่อน

      that's amazing to hear. thnak you mohamad!

  • @rajaarunachalam8550
    @rajaarunachalam8550 ปีที่แล้ว +3

    Thank you thank you thank you very very very much. I have nothing to say except my graditude.

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      thank you so much for the comment, Raja!! I’m just delighted to be of service 🤩🥳

  • @shahabuddinahmedohi8788
    @shahabuddinahmedohi8788 ปีที่แล้ว +3

    Nice Video Man! I have tried for almost 3 months to learn about constraints but have not found any simple, easy method to learn this technique. But your video was really Amazing! Thanks, Bro ❤

    • @TimGabe
      @TimGabe  ปีที่แล้ว +2

      these comments just make my day, man. so so happy I could help a fellow designer!! 🙏😃❤️

  • @underscoreroa
    @underscoreroa ปีที่แล้ว +2

    RELIEVED that I discovered your channel!! All of your videos have been very useful!! Keep up the good work!

    • @TimGabe
      @TimGabe  ปีที่แล้ว +1

      so happy to hear it 🥳🤩

  • @meharjawadhashmi6723
    @meharjawadhashmi6723 ปีที่แล้ว +3

    Simple & Clear as always, Thank You! We want more videos on figma and also on Webflow.

    • @TimGabe
      @TimGabe  ปีที่แล้ว +1

      thanks a lot for the comment, Mehar 🙌 and thanks for the suggestions. 🥳

  • @Ahmed-fq3kz
    @Ahmed-fq3kz 4 หลายเดือนก่อน +2

    So underrated, keep it up.

    • @TimGabe
      @TimGabe  4 หลายเดือนก่อน +1

      thanks a lot, my friend 😃

  • @supreethkoundinya309
    @supreethkoundinya309 4 หลายเดือนก่อน +1

    what a legend what a video
    was always finding constraints difficult
    thank you for simplifying it

    • @TimGabe
      @TimGabe  4 หลายเดือนก่อน

      that's amazing to hear! thank you for commenting!!

  • @kevinrandomly643
    @kevinrandomly643 หลายเดือนก่อน

    Thank you so much!

  • @UmairUlhaque
    @UmairUlhaque ปีที่แล้ว +5

    Hi Tim,
    I have just switched into Figma from XD and having problem these days fighting with constraints, auto-layouts and stuff like that. Some of the elements like icons for example; start to move along with the frame resizing so your insights in this video were very helpful.
    Thanks a lot, and btw I just subscribed to your channel today and clicked in the bell icon as well ha ha 😁👍

    • @TimGabe
      @TimGabe  ปีที่แล้ว +1

      Umair, it's always so cool to hear people's stories like this. thanks a lot for sharing, my friend 🥳 really appreciate your support!!

  • @carloscodling5084
    @carloscodling5084 3 หลายเดือนก่อน

    Thank you!

  • @ruturaj1111
    @ruturaj1111 หลายเดือนก่อน

    Thanks for sharing 😊

  • @clevercrumb
    @clevercrumb 10 หลายเดือนก่อน +1

    You're actually awesome! Made it so easy to understand. Thank you :) Roxy

    • @TimGabe
      @TimGabe  10 หลายเดือนก่อน

      thank you for the nice comment Roxy!!

  • @VimuThe5ifer
    @VimuThe5ifer 11 หลายเดือนก่อน +1

    YOUR VIDEOS ARE SUPER HELPFUL❤❤❤❤ THANK YOU VERY MUCH!!

    • @TimGabe
      @TimGabe  6 หลายเดือนก่อน

      thank you for the kind comment 💜

  • @mahdieharaghi
    @mahdieharaghi ปีที่แล้ว +1

    perfect explanation thank you

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      glad you liked it, Mahdie! 🥳

  • @nicepicbro3425
    @nicepicbro3425 ปีที่แล้ว +1

    You are the best, Tim !

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      thank you so much, my friend! it really makes me happy 😃🙏

  • @disandev
    @disandev 8 วันที่ผ่านมา

    you make really simple to learn figma... even if english is not my native ... xoxo

  • @kaldarges
    @kaldarges ปีที่แล้ว

    Awesome my friend!! beautifully explained!

    • @TimGabe
      @TimGabe  ปีที่แล้ว +1

      thank you so much, Kalyan! 🙏

  • @vcodev108
    @vcodev108 ปีที่แล้ว +1

    Excellent!!!

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      thank you so much!! 🥳🤩

  • @xhongaronga
    @xhongaronga ปีที่แล้ว +1

    Life-saver, Tim!
    This feature has been bugging me for a while now.
    But now I (kinda) get it!
    Just have to try it out myself first, hihi.

    • @TimGabe
      @TimGabe  ปีที่แล้ว +1

      my brother 💜 comments from you always make my day a little bit brighter, especially if I had the honor to transfer some knowledge 🤩

  • @radhikachhabra1742
    @radhikachhabra1742 ปีที่แล้ว +1

    So much helpful😇

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      so cool to hear, Radhika ☺️

  • @monadang172
    @monadang172 ปีที่แล้ว +1

    This is the best video I watched so far explaining how constrains & resizing work in Figma. Very clear and straightforward.

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      so happy to hear it, Mona!! thank you 😃

  • @davidschaer
    @davidschaer ปีที่แล้ว +1

    yeeah.. Suuuper simple..! 👍

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      I’m glad you liked it, David!! 😃 thanks a ton for the comment!

  • @user-nr2fw2wo1w
    @user-nr2fw2wo1w 4 หลายเดือนก่อน +1

    Awesome

    • @TimGabe
      @TimGabe  4 หลายเดือนก่อน

      happy you liked it! 😃

  • @GraveRave
    @GraveRave 2 ปีที่แล้ว +2

    Nice one, constraints can be a bit of a challenege.

    • @TimGabe
      @TimGabe  2 ปีที่แล้ว +2

      indeed!! just by researching for the video I learned new things, and I’ve been using Figma for years 😅🤣

  • @teleportkontrola2006
    @teleportkontrola2006 ปีที่แล้ว +1

    Awesome as always, thanks! Is there a way to lock the proportions of the scaling element? In your example, the rainbow circle, not to become an ellipse while scaling but whatever axis is scaled the other one scales proportionally?

    • @TimGabe
      @TimGabe  ปีที่แล้ว +1

      appreciate it, my friend 😃 you can lock the proportions in the top right constraints menu, but I'm afraid that's the only real lock feature you have..

    • @teleportkontrola2006
      @teleportkontrola2006 ปีที่แล้ว

      @@TimGabe Got it, so there is no proportion lock for responsive scaling, just for manual "static" scaling. Thanks!

  • @kaartoonka
    @kaartoonka 5 หลายเดือนก่อน +1

    Hi Tim, Great explanation🤓, however, I have a doubt, when you mentioned about using constraints for responsiveness, wouldn't the fill feature (explained in auto layout) do the same thing or is there any difference?

    • @TimGabe
      @TimGabe  4 หลายเดือนก่อน +1

      hey! thank you!! exactly, they can both be used to achieve similar results!! 😃

  • @pearlite6243
    @pearlite6243 ปีที่แล้ว +1

    Thanks for the explanation, Tim! (Don't mind me, binge-watching all your content hahaha)
    I have a question for you. I've been watching a lot of videos about design systems as I'm trying to learn the best practices for making and applying them, but there's a topic that I have not found addressed anywhere as of yet: **What is the difference between designing an app for Android versus iPhone?**
    All the designs for mobile apps I've seen don't seem to necessarily be employing human interface guidelines, or material design guidelines. They are using their own design system. And since I have never owned an Apple product, and the phone I use (an Oppo) runs Android but does not seem to use the material design system, I haven't really seen these design systems in action.
    So if I needed to design the same app for both android and iPhone, what would be the differences in their designs? I know there has to be more to it than just changing the screen size, status bar, modals, device mockup etc.

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      haha!! I'm sooo flattered to have someone binge watch my content, that's really the ultimate compliment!! 🤩😍
      for your question:
      everyone does it differently, but I'd say that in many cases one should try to at least stick to the platform's design patterns for status bars, navigation, etc.
      in the end, these guidelines are just that-GUIDELINES meant to help us with best practices on a general basis. in some cases, we might be forced to not stick to them because our use case isn't covered within those guidelines 😃
      apps should generally feel exactly the same across platforms, but of course adhere to the specific design needs for that specific platform. 🙏
      a bonus tip is to check this website out:
      mobbin.com/
      it's great for looking how different apps do it for Android and iOS. 😀

    • @pearlite6243
      @pearlite6243 ปีที่แล้ว +1

      @@TimGabe Hi Tim, thanks so much for taking the time to answer my question, I really appreciate it. I feel I understand better now and that website you linked is really great!! 🤩
      I did a UX/UI bootcamp course but Figma and other best practice things were not taught well, so now I am trying to level up my skills so I can enter the work with confidence. Looking forward to watching your future videos! 😁
      Cheers from Australia! 💟

    • @TimGabe
      @TimGabe  ปีที่แล้ว +1

      I'm just so happy that people like yourself watch and enjoy the content 🥳🙏 so a big thanks right back at you, all the way to Australia!! 💜
      my ambition is to cover most of what Figma has to offer, so hopefully I'll be able to supply you with what you need 🤩

  • @Mary55113
    @Mary55113 ปีที่แล้ว

    Thanks, dear Tim. But why in dark mode? It's so hard to watch...😢

  • @CrazyFriends-wm3bf
    @CrazyFriends-wm3bf 6 หลายเดือนก่อน +1

    Hey Bro, do video on dropdown menu in a simple way i tried that one what you have done but its not working

    • @TimGabe
      @TimGabe  6 หลายเดือนก่อน

      not making figma videos atm, but might be something for 2024 when i'm back with figma stuff!!

    • @CrazyFriends-wm3bf
      @CrazyFriends-wm3bf 6 หลายเดือนก่อน

      cool @@TimGabe

  • @khandakamal9212
    @khandakamal9212 3 หลายเดือนก่อน

    ciao 😁

  • @seancarlopiodo2685
    @seancarlopiodo2685 7 วันที่ผ่านมา

    I cant find resizing tool, only constraints is only I have 🥺

  • @ebrahimelmkawy2588
    @ebrahimelmkawy2588 ปีที่แล้ว

    It's great, but why don't you leave the figma file so we can work with you

  • @bobbyb6412
    @bobbyb6412 11 หลายเดือนก่อน

    don't get it, scrolling also works if you just drag out the frame and hit play, so you don't need to clip the content at all. confusing

    • @TimGabe
      @TimGabe  7 หลายเดือนก่อน

      if you're referring to fixed, that's a different kind of use case than just regular scrolling!

  • @NOX_PC
    @NOX_PC ปีที่แล้ว +1

    u ur sound is too low i can't hear..bro can u increase ur sound?

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      thank you for the feedback, my friend!!