Figma Constraints & Resizing Made SIMPLE

Поделиться
HTML-код
  • Опубликовано: 2 июн 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

Комментарии • 71

  • @youssefayman994
    @youssefayman994 5 месяцев назад +3

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

  • @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 ☺️🙏

  • @dopsejimmy
    @dopsejimmy Год назад +1

    I love your devotion to making all of these videos soooo understandable, I will be using RUclips’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 🙏

  • @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. 🥳

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

  • @mohamadpirelyas3383
    @mohamadpirelyas3383 11 месяцев назад +2

    hey man your teaching is perfect. thank you🤩😘

    • @TimGabe
      @TimGabe  6 месяцев назад

      that's amazing to hear. thnak you mohamad!

  • @ruturaj1111
    @ruturaj1111 Месяц назад

    Thanks for sharing 😊

  • @Ahmed-fq3kz
    @Ahmed-fq3kz 4 месяца назад +2

    So underrated, keep it up.

    • @TimGabe
      @TimGabe  4 месяца назад +1

      thanks a lot, my friend 😃

  • @kevinrandomly643
    @kevinrandomly643 18 дней назад

    Thank you so much!

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

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

  • @carloscodling5084
    @carloscodling5084 2 месяца назад

    Thank you!

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

  • @nicepicbro3425
    @nicepicbro3425 Год назад +1

    You are the best, Tim !

    • @TimGabe
      @TimGabe  Год назад

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

  • @VimuThe5ifer
    @VimuThe5ifer 11 месяцев назад +1

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

    • @TimGabe
      @TimGabe  6 месяцев назад

      thank you for the kind comment 💜

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

  • @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!! 🙏😃❤️

  • @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!! 🥳🤩

  • @mahdieharaghi
    @mahdieharaghi Год назад +1

    perfect explanation thank you

    • @TimGabe
      @TimGabe  Год назад

      glad you liked it, Mahdie! 🥳

  • @davidschaer
    @davidschaer Год назад +1

    yeeah.. Suuuper simple..! 👍

    • @TimGabe
      @TimGabe  Год назад

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

  • @radhikachhabra1742
    @radhikachhabra1742 Год назад +1

    So much helpful😇

    • @TimGabe
      @TimGabe  Год назад

      so cool to hear, Radhika ☺️

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

  • @user-nr2fw2wo1w
    @user-nr2fw2wo1w 4 месяца назад +1

    Awesome

    • @TimGabe
      @TimGabe  4 месяца назад

      happy you liked it! 😃

  • @GraveRave
    @GraveRave Год назад +2

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

    • @TimGabe
      @TimGabe  Год назад +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 4 месяца назад +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!! 😃

  • @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 😃

  • @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 11 месяцев назад

    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  5 месяцев назад

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

    • @CrazyFriends-wm3bf
      @CrazyFriends-wm3bf 5 месяцев назад

      cool @@TimGabe

  • @khandakamal9212
    @khandakamal9212 3 месяца назад

    ciao 😁

  • @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  6 месяцев назад

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