Master Stacks, Position & Sizing (Framer For Beginners)
Вставка
- Опубліковано 9 лип 2024
- 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!
![Learn FRAMER in 1 HOUR(Crash Course) - Portfolio Website [Free Template]](http://i.ytimg.com/vi/K_RQlI6OUvQ/mqdefault.jpg)
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 :)
that's so cool to hear! thanks a lot!!
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 :)
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 UA-camrs 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!
that's amazing to hear!! thank you for this comment my friend!
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 :)
awesome that you liked it!
Thank you Tim, this is brilliant tutorial 👍
thanks a lot luke!!
Very nicely explained and presented - well done!
happy you liked it!
finally !!! love your tutorial
thank you so much!!
Fantastic job and examples
thanks a lot Steve 😃
great teaching. thank you
thank you!!
Master teacher! Hurry up and drop the course please! 🙏🏿
thank you so much, my friend 😃 gonna do my best to get it out asap!
Thank god much needed
amazing to hear!!
Thanks much!
thank YOU for commenting!
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..
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
this tutorial was supposed to make all of this understandable, so then i failed!
what specifically is it that makes you lost?
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... ,
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!
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!
Good job
thanks a lot Muten!
I LOVE YOU 😍😍
haha! much love back to you, friend 💜
Thanks Tim, do you do any 1on1?
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.
really appreciate you suggesting video ideas and commenting here, my friend! will add it to my list!
Thank you so much for this tutorial….this is the clarity I need ❤️…how do I reach out when I need help ?
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.
as soon as i saw this comment i added it to my list of ideas!! thanks man!
@@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).
from malaysia
thank you
thank you for supporting all the way from malaysia!!
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
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!
@@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.
How the fuck do i create a mosaic grid? It’s not letting me and im going crazy
1:32
not sure what this means, but happy you engaged!!
Мда
not sure what this means, but the letter in the middle looks awesome!
пиздатые видео чорт
Actally its figma 😂
have you started tinkering with Framer yet, my friend?
@@TimGabe yes my friend , and I am wondering about the similarities between framer figma , Unlike webflow feel like it made for developers!
Messiah Jesus is merciful. Kyrie Elesion
merciful he is!!