Master Stacks, Position & Sizing (Framer For Beginners)

Learn how to use Framer stacks, position and sizing-in 10 minutes.
🔴 Working File: timgabe.com/resources/framer-...
Timecodes
0:00 - Tutorial introduction
0:16 - Positioning elements with frames
0:43 - Fixed positioning in frames
1:01 - Centering and fixing elements
1:13 - Understanding relative positioning with Stacks
1:46 - Stack's menu options explanation
2:34 - Absolute positioning in Stacks
2:59 - Sticky positioning in Stacks
3:45 - Exploring sizing options, fixed width
4:16 - Relative sizing discussion
4:53 - Fill width option in Stacks
5:30 - Fit content sizing, button example
6:11 - Viewport height sizing explanation
6:34 - Frames vs Stacks usage
7:01 - Creating a card layout using Stacks
10:23 - Tutorial conclusion
#framer #framertutorial
➡️ QUESTION - Have a question about UI, UX or Product Design? Designing in Framer? Or Anything Else? Post in the comments section of this video-I’m happy to answer!

Пікірлер: 58

  • @row2117
    @row211711 ай бұрын

    Thank you so much for this. Figured a lot out just playing around but after watching this video I feel like I have a good understanding of the possibilities. Much appreciated, loving all your videos! Please keep making more :)

  • @TimGabe

    @TimGabe

    11 ай бұрын

    that's so cool to hear! thanks a lot!!

  • @osks
    @osks11 ай бұрын

    Very nicely explained and presented - well done!

  • @TimGabe

    @TimGabe

    11 ай бұрын

    happy you liked it!

  • @andressmendess
    @andressmendess11 ай бұрын

    wow that's a really helpful tutorial! Thanks a lot I was struggling with these stacks tools on framer and you helped me! Keep doing these videos about framer I am still learning it and will help a lot :)

  • @TimGabe

    @TimGabe

    10 ай бұрын

    awesome that you liked it!

  • @Michael.design
    @Michael.design11 ай бұрын

    Never knew you could change the 1fr to 2 etc😅 This is why these videos are so helpful. Usually there’s a huge gap between the KZreadrs that make the videos and the people who are watching it, as they are much more experienced. These type of videos are the ones that help to bridge that gap and is what the people are looking for! So thanks a lot!

  • @TimGabe

    @TimGabe

    10 ай бұрын

    that's amazing to hear!! thank you for this comment my friend!

  • @outofbathluke
    @outofbathluke11 ай бұрын

    Thank you Tim, this is brilliant tutorial 👍

  • @TimGabe

    @TimGabe

    10 ай бұрын

    thanks a lot luke!!

  • @demeterkopcsuk4702
    @demeterkopcsuk4702Ай бұрын

    not only this but the rest of the videos as well are so good, straight to the point and no bla bla bla bullshit. thank you for videos!

  • @thaisanttune
    @thaisanttune5 ай бұрын

    Wow! I loved this video, thank you!! I'll apply in my portfolio :)

  • @PeteStueve
    @PeteStueve8 ай бұрын

    Fantastic job and examples

  • @TimGabe

    @TimGabe

    8 ай бұрын

    thanks a lot Steve 😃

  • @user-dz9vd1eq5w
    @user-dz9vd1eq5w11 ай бұрын

    finally !!! love your tutorial

  • @TimGabe

    @TimGabe

    10 ай бұрын

    thank you so much!!

  • @des7638
    @des763811 ай бұрын

    great teaching. thank you

  • @TimGabe

    @TimGabe

    10 ай бұрын

    thank you!!

  • @satoshiedits21
    @satoshiedits2110 ай бұрын

    Master teacher! Hurry up and drop the course please! 🙏🏿

  • @TimGabe

    @TimGabe

    8 ай бұрын

    thank you so much, my friend 😃 gonna do my best to get it out asap!

  • @Jediluvs2kill
    @Jediluvs2kill11 ай бұрын

    Thank god much needed

  • @TimGabe

    @TimGabe

    11 ай бұрын

    amazing to hear!!

  • @balaj.hussain1905
    @balaj.hussain19058 ай бұрын

    How much you charge if I give you access of my web file, all the things looks good in it I just wanted to make it mobile responsive and change those setting stacks and so for things!

  • @TimGabe

    @TimGabe

    8 ай бұрын

    hey Balaj! i only take on bigger gigs i'm afraid, but i hope you'll find someone who can help you... if not, my course will be coming out in 2024 -- i'll be covering responsive design extensively in that one!

  • @NicoloSodano
    @NicoloSodano10 ай бұрын

    Hello Tim! I'm new to Framer, I'm learning and would like to understand more, I've followed your tutorial and this point I just can't get past it.... The position types; fixed, relative, fill and fit content, min and max width and height. I still can't, even though I am training myself, understand the layer hierarchy (I come from the world of graphic design), and to understand and use these options quickly, I often find myself confused about them. What can I do to better understand it? A more comprehensive focused explanation? It seems so simple, even from your video, but when I'm on the project I get lost...I've studied the official guides as well, but they haven't been enough for me to understand the real differences and proper use. thank you

  • @TimGabe

    @TimGabe

    10 ай бұрын

    this tutorial was supposed to make all of this understandable, so then i failed! what specifically is it that makes you lost?

  • @NicoloSodano

    @NicoloSodano

    10 ай бұрын

    I follow your videos and I found them extremely well done, in this case maybe I am having a hard time applying, maybe examples are needed, I don't know but I get lost... example "I have to get this, I do this and not this for this reason" let's just say a step by step... ,

  • @RaffiRexer-dp4qt
    @RaffiRexer-dp4qt2 ай бұрын

    Thanks Tim, do you do any 1on1?

  • @98Ebonee
    @98Ebonee10 ай бұрын

    how do i prevent the image from cropping as i change from breakpoints? for example in your video, as you change sizes, the image in the rounded square crops because it's filling the box. so as i'm moving my home or tablet view, the width changes but the height stays the same, and since my image is in fill, it fills the box but crops as i'm sizing! i just want my images to scale down as i go from desktop to tablet. i noticed when i place videos, i'm able to change the height to 'fit content' and it does what i want! but 'fit content' is greyed out for images..

  • @gauravdhawan3179
    @gauravdhawan317911 ай бұрын

    Hey man, can you please make a complete and explained video on Figma variables and advanced prototyping with variables and conditions? Waiting for your tutorial on that for a long time.

  • @TimGabe

    @TimGabe

    11 ай бұрын

    really appreciate you suggesting video ideas and commenting here, my friend! will add it to my list!

  • @aarzooali2364
    @aarzooali236410 ай бұрын

    Thanks much!

  • @TimGabe

    @TimGabe

    10 ай бұрын

    thank YOU for commenting!

  • @patrickyeboah570
    @patrickyeboah57011 ай бұрын

    Thank you so much for this tutorial….this is the clarity I need ❤️…how do I reach out when I need help ?

  • @TimGabe

    @TimGabe

    10 ай бұрын

    hey Patrick! i'm afraid i'm very crowded with things and don't have time for consultation 💜

  • @RealMehedi
    @RealMehedi11 ай бұрын

    Can you please make a video on grid? Seems like the grid in framer has some limitation. I might be wrong or may be doing it the wrong way. For some reason my grid is not fluid when I make a card component. It breaks apart in different breakpoints. Please give me the best way to use grids and how to start designing a card from scratch.

  • @TimGabe

    @TimGabe

    11 ай бұрын

    as soon as i saw this comment i added it to my list of ideas!! thanks man!

  • @Michael.design

    @Michael.design

    11 ай бұрын

    @@TimGabe A vid on applying a grid in Framer would definitely be appreciated! Theres tons of using them in Figma but none with Framer. I would be especially interested in how to set up a website according to a 4 or 6 column grid in Framer (Swiss Grid).

  • @MrMutenRoshi
    @MrMutenRoshi10 ай бұрын

    Good job

  • @TimGabe

    @TimGabe

    10 ай бұрын

    thanks a lot Muten!

  • @awadabbad
    @awadabbad7 ай бұрын

    I LOVE YOU 😍😍

  • @TimGabe

    @TimGabe

    7 ай бұрын

    haha! much love back to you, friend 💜

  • @georgezorbas9036
    @georgezorbas90367 ай бұрын

    We need more tutorials for 0 knowledge to a website step by step without AI made website. for example I can't understand why my backgrounf moves or how to create circles to put inside a logo and then group it!!!! please help ...yesterday

  • @TimGabe

    @TimGabe

    7 ай бұрын

    that's what i'm hoping my upcoming course will be, but still some time until it's released... for now, i hope the free tutorials i have in my playlist will help you!

  • @georgezorbas9036

    @georgezorbas9036

    7 ай бұрын

    @@TimGabe a beginner wants 1st: a) to be able to build the UI/UX, then b) make all the buttons working and taking to the proper place, then c) learn how to upload the page to any domain he wants and d) continue with learning about database & backend. ( I would like to know what you propose about database and backend) 2) About UI / UX, you are selling your product to people that know from Nothing to Something. So simple things for U are not simple for us. A big video with the above steps but mainly the UI / UX without AI, showing how and why. ( why when I use a background picture or color is always moving, how to put my logo in a frame and bring it forward / backward, how to make "one" my logo with in circle I created or how to make "one 4 pictures" and move them around, how to create a Sign Up and make it working with more options, how to create my login with name and email and make it working.. Simple things that building a website. First we care to build it...I don't care to learn the database or the domain if I can't see if I can build it in your website. UIZARD is even more simple..but I prefer you ay the moment.

  • @awandamai
    @awandamai8 ай бұрын

    from malaysia thank you

  • @TimGabe

    @TimGabe

    8 ай бұрын

    thank you for supporting all the way from malaysia!!

  • @rgcalderon3458
    @rgcalderon34582 ай бұрын

    How the fuck do i create a mosaic grid? It’s not letting me and im going crazy

  • @afreenshaikh938
    @afreenshaikh9385 ай бұрын

    1:32

  • @TimGabe

    @TimGabe

    5 ай бұрын

    not sure what this means, but happy you engaged!!

  • @edge-rps
    @edge-rps7 ай бұрын

    Messiah Jesus is merciful. Kyrie Elesion

  • @TimGabe

    @TimGabe

    7 ай бұрын

    merciful he is!!

  • @user-lx7xb7cp3g
    @user-lx7xb7cp3g10 ай бұрын

    Мда

  • @TimGabe

    @TimGabe

    10 ай бұрын

    not sure what this means, but the letter in the middle looks awesome!

  • @demeterkopcsuk4702

    @demeterkopcsuk4702

    Ай бұрын

    пиздатые видео чорт

  • @madhoundes
    @madhoundes11 ай бұрын

    Actally its figma 😂

  • @TimGabe

    @TimGabe

    11 ай бұрын

    have you started tinkering with Framer yet, my friend?

  • @madhoundes

    @madhoundes

    11 ай бұрын

    @@TimGabe yes my friend , and I am wondering about the similarities between framer figma , Unlike webflow feel like it made for developers!