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
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
11 ай бұрын
that's so cool to hear! thanks a lot!!
Very nicely explained and presented - well done!
@TimGabe
11 ай бұрын
happy you liked it!
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
10 ай бұрын
awesome that you liked it!
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
10 ай бұрын
that's amazing to hear!! thank you for this comment my friend!
Thank you Tim, this is brilliant tutorial 👍
@TimGabe
10 ай бұрын
thanks a lot luke!!
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!
Wow! I loved this video, thank you!! I'll apply in my portfolio :)
Fantastic job and examples
@TimGabe
8 ай бұрын
thanks a lot Steve 😃
finally !!! love your tutorial
@TimGabe
10 ай бұрын
thank you so much!!
great teaching. thank you
@TimGabe
10 ай бұрын
thank you!!
Master teacher! Hurry up and drop the course please! 🙏🏿
@TimGabe
8 ай бұрын
thank you so much, my friend 😃 gonna do my best to get it out asap!
Thank god much needed
@TimGabe
11 ай бұрын
amazing to hear!!
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
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!
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
10 ай бұрын
this tutorial was supposed to make all of this understandable, so then i failed! what specifically is it that makes you lost?
@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... ,
Thanks Tim, do you do any 1on1?
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..
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
11 ай бұрын
really appreciate you suggesting video ideas and commenting here, my friend! will add it to my list!
Thanks much!
@TimGabe
10 ай бұрын
thank YOU for commenting!
Thank you so much for this tutorial….this is the clarity I need ❤️…how do I reach out when I need help ?
@TimGabe
10 ай бұрын
hey Patrick! i'm afraid i'm very crowded with things and don't have time for consultation 💜
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
11 ай бұрын
as soon as i saw this comment i added it to my list of ideas!! thanks man!
@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).
Good job
@TimGabe
10 ай бұрын
thanks a lot Muten!
I LOVE YOU 😍😍
@TimGabe
7 ай бұрын
haha! much love back to you, friend 💜
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
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
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.
from malaysia thank you
@TimGabe
8 ай бұрын
thank you for supporting all the way from malaysia!!
How the fuck do i create a mosaic grid? It’s not letting me and im going crazy
1:32
@TimGabe
5 ай бұрын
not sure what this means, but happy you engaged!!
Messiah Jesus is merciful. Kyrie Elesion
@TimGabe
7 ай бұрын
merciful he is!!
Мда
@TimGabe
10 ай бұрын
not sure what this means, but the letter in the middle looks awesome!
@demeterkopcsuk4702
Ай бұрын
пиздатые видео чорт
Actally its figma 😂
@TimGabe
11 ай бұрын
have you started tinkering with Framer yet, my friend?
@madhoundes
11 ай бұрын
@@TimGabe yes my friend , and I am wondering about the similarities between framer figma , Unlike webflow feel like it made for developers!