OH EM GEE... a year later from when this video was made... and this is EXACTLY what I needed. Videos that are current are made with less details in explanations and automatically assume that the user is familiar with both the screens and the lingo. This video needs to be remade by this person ONLY so that it's a more current training video. Great explainer. Perfect speed. Does not talk like he needs to hurry up and show you something or he's going to piss himself. No really! Sheesh! ⭐⭐⭐⭐⭐ 5 stars!
These last tutorials have been golden for us designers which are not used to working with traditional website design elements like sections, rows and columns. Thank you, more like this please!
This video is an absolute game changer for me. I was banging my head against the wall, unsure if it was me or Framer acting up. After this, everything resolved so smoothly and I finally feel in control of my progress.
Ive been putzing around without any training. other than coming from CSS web flow systems. really impressed at the speed and ease of use. language is a little different of course but is visually very logical so far.
Definitely helpful. But why not default the topmost frame (at the breakpoint level) to a stack to begin with? Framer seems to assume everything you put in to be fixed size and position absolute - like you're trying to 'draw' a site in a Figma mindset. Is that the idea? It feels like a container-first approach vs a content-first approach. Also, speaking of Figma, maybe "fit content" could just be "hug" since that is easier to grasp and more literally what is going on. Lastly, why are css grids called grids, but css flexbox are 'stacks'? Maybe just call them flexbox? As a whole, the UI of Framer is great, but the vocabulary is mixed all over the place and confusing to someone coming in that knows CSS and the way elements are supposed to naturally behave at the HTML level.
I agree. You are right! However, this is because the main audience of Framer is designers. So, very often these terms are more familiar to them and so this makes more sense from a product perspective.
Thank you! Very well explained. One thing I didn't see though in relating to "Sizing" is the option to use 'Viewport' for the Height and how it works. But I guess I'll encounter and learn about it soon in one of your contents or in the community page.
I dunno you haven't figured it out by now, but leaving it in case it helps other designers: 1. Go to Layout > Grid 2. Set Grid width to Relative 100% and Height Fit. 3. Framer will then create a grid with some preset for the image size. In Layout options you can actually go to "Advanced" and see this default. I changed the height to 320px 4. Add you Gap and Padding 5. Select each frame and change Fill to an Unsplash Random image And continue following along the tutorial :) That is playing around with Column number in different breakpoints.
I'm unhappy with the grid component. It is absolutely un-visual and trying to do a complex layout with it while not seeing where i am putting the elements is nerve wracking.
I couldn't find anywhere information about what the Distribution options in Layout panel mean, specifically Space Between / Around / Evenly. It does not make sense that there isn't any documentation about it :(
Is there any possibility that horizontal images placed side by side will adjust to size of the page and keep orginal aspect ratios? I found funny that Framer advertises itself as a simple tool for creating websites, recommended as e.g. a portfolio, but it cannot give correct tools for the simplest situations such as maintaining the original aspect ratio, such as Behance do. You have to think and look for ways around.
Trying like hell to figure out how to put text in an overlay where the text is longer than the page, and have the text scroll without the page underneath scrolling. PLEASE HELP!
I come from the React world. I'm very new to Framer. I have to say that I'm struggling with Framer right now. It's hard to control. I'm not sure which button does what.
Hello! I need to understand something, can you have a focus on Framer to do Mobile First? Design first on mobile and adapt the content? It happens to me that both in framer and in webflow they have that approach of starting to do everything from desktop, which translates as adding media queries or adding many breakpoints. The best thing would be for everything to be fluid.
I followed the steps as much as I can but on opening the site on my mobile it opens without the icon, when I click on the frame then the about and contact vanishes and icon pops up.. It reverts when the page is refreshed.. Also the way you changed the screen size on "play" you got the icon, I couldn't. dont know where I messed up
Nice! Just going over these videos and exploring Framer and wanted to ask about the content within stacks. It seems like the space bewteen items (title, desciption text and button in this example) can only be spaced evenly. Is there no way to space out the button below the description text to have a unique measurement value?
what you can do is add a frame (a box) between the button and the element before to space them out, then remove the frame's fill, making it invisible. this should fix it!
Does framer support "Negative Gap/padding/margin"? It seems I can't overlap frames in relative mode. Only way to do so is to apply negative gap. but seems like its not supported. Can someone help me?
can variables be set as fit content? i.e title of website is 2 letters in large font(and is set as variable- animation on tap ) which seems good on tablet and desktop but I want it to auto adjust itself as 2 line on mobile. Currently I'm using a separate variable chain for mobile.
I have added images of different aspect ratios and they dont stack well in the grid layout or the stack layout - so frustrating. Unable to add the iamges into frames. this will allow the user to create grids better.
OH EM GEE... a year later from when this video was made... and this is EXACTLY what I needed. Videos that are current are made with less details in explanations and automatically assume that the user is familiar with both the screens and the lingo. This video needs to be remade by this person ONLY so that it's a more current training video. Great explainer. Perfect speed. Does not talk like he needs to hurry up and show you something or he's going to piss himself. No really! Sheesh! ⭐⭐⭐⭐⭐ 5 stars!
These last tutorials have been golden for us designers which are not used to working with traditional website design elements like sections, rows and columns. Thank you, more like this please!
Once you design with stacks, you’ll never go backs.
Very well explained. Nice work.
This video is an absolute game changer for me. I was banging my head against the wall, unsure if it was me or Framer acting up. After this, everything resolved so smoothly and I finally feel in control of my progress.
Ooooh NOW I finally understand "fill"! This is a gamechanger for me (:
Ive been putzing around without any training. other than coming from CSS web flow systems. really impressed at the speed and ease of use. language is a little different of course but is visually very logical so far.
Thank you for these tutorial, is helping me understand Framer.
Definitely helpful. But why not default the topmost frame (at the breakpoint level) to a stack to begin with? Framer seems to assume everything you put in to be fixed size and position absolute - like you're trying to 'draw' a site in a Figma mindset. Is that the idea? It feels like a container-first approach vs a content-first approach. Also, speaking of Figma, maybe "fit content" could just be "hug" since that is easier to grasp and more literally what is going on. Lastly, why are css grids called grids, but css flexbox are 'stacks'? Maybe just call them flexbox? As a whole, the UI of Framer is great, but the vocabulary is mixed all over the place and confusing to someone coming in that knows CSS and the way elements are supposed to naturally behave at the HTML level.
I agree. You are right! However, this is because the main audience of Framer is designers. So, very often these terms are more familiar to them and so this makes more sense from a product perspective.
Thank you! Very well explained. One thing I didn't see though in relating to "Sizing" is the option to use 'Viewport' for the Height and how it works. But I guess I'll encounter and learn about it soon in one of your contents or in the community page.
very well explained Benjamin, thanks :)
How do i change the sizesof the cards if i want to create a mosaic style grid? im stuck and going crazy
Super helpful! Thanks so much!
Yes!!! Have you thought about making a Spanish translation of these essential videos?
very helpful with the summary!
The layout example with images is not longer availble or is it placed somewhere else?
I dunno you haven't figured it out by now, but leaving it in case it helps other designers:
1. Go to Layout > Grid
2. Set Grid width to Relative 100% and Height Fit.
3. Framer will then create a grid with some preset for the image size. In Layout options you can actually go to "Advanced" and see this default. I changed the height to 320px
4. Add you Gap and Padding
5. Select each frame and change Fill to an Unsplash Random image
And continue following along the tutorial :)
That is playing around with Column number in different breakpoints.
@@SilverAsakura Thanks a Lot
a very helpful video- thank you for making it and explaining everything so clearly
Great job
Very helpful
I'm unhappy with the grid component. It is absolutely un-visual and trying to do a complex layout with it while not seeing where i am putting the elements is nerve wracking.
I couldn't find anywhere information about what the Distribution options in Layout panel mean, specifically Space Between / Around / Evenly.
It does not make sense that there isn't any documentation about it :(
Is there any possibility that horizontal images placed side by side will adjust to size of the page and keep orginal aspect ratios? I found funny that Framer advertises itself as a simple tool for creating websites, recommended as e.g. a portfolio, but it cannot give correct tools for the simplest situations such as maintaining the original aspect ratio, such as Behance do. You have to think and look for ways around.
Trying like hell to figure out how to put text in an overlay where the text is longer than the page, and have the text scroll without the page underneath scrolling. PLEASE HELP!
Excellent video! Well explanatory.
I come from the React world. I'm very new to Framer. I have to say that I'm struggling with Framer right now. It's hard to control. I'm not sure which button does what.
I'm actually super annoyed with the fact that you never start from the blank page. How did you create those cards?
Stack = Autolayout yes?
Stack = Flexbox ~= Autolayout
Hello! I need to understand something, can you have a focus on Framer to do Mobile First? Design first on mobile and adapt the content? It happens to me that both in framer and in webflow they have that approach of starting to do everything from desktop, which translates as adding media queries or adding many breakpoints. The best thing would be for everything to be fluid.
You should be able to do so by setting the mobile as the primary!
it seems like there is no frame tool anymore :( or maybe it was moved
updated
ps: now it is located under the Layout section
I followed the steps as much as I can but on opening the site on my mobile it opens without the icon, when I click on the frame then the about and contact vanishes and icon pops up.. It reverts when the page is refreshed.. Also the way you changed the screen size on "play" you got the icon, I couldn't. dont know where I messed up
I don't like how my images are cropping as I pull the side of my screen in, it chops typography off etc?
How to undo the changes ?
Awesome!
Nice! Just going over these videos and exploring Framer and wanted to ask about the content within stacks. It seems like the space bewteen items (title, desciption text and button in this example) can only be spaced evenly. Is there no way to space out the button below the description text to have a unique measurement value?
exactly what i've been trying to do! you ever figure it out?
what you can do is add a frame (a box) between the button and the element before to space them out, then remove the frame's fill, making it invisible. this should fix it!
Does framer support "Negative Gap/padding/margin"? It seems I can't overlap frames in relative mode. Only way to do so is to apply negative gap. but seems like its not supported. Can someone help me?
can variables be set as fit content? i.e title of website is 2 letters in large font(and is set as variable- animation on tap ) which seems good on tablet and desktop but I want it to auto adjust itself as 2 line on mobile. Currently I'm using a separate variable chain for mobile.
The stack auto-sizing doesn't work at all! So frustrating.
why the small window ?
I Cant export file from framer why?
I have added images of different aspect ratios and they dont stack well in the grid layout or the stack layout - so frustrating. Unable to add the iamges into frames. this will allow the user to create grids better.
❤
how does someone use negative margin on framer
Paste a damn pics on the grids
Not really for beginner...
zooming in - zooming in - zooming in.... *squinting*
This is so difficult to listen to, the commentary is very staccato sounding. Was it produced with an AI voice?
I couldn't get through this video purely on account of how he pronounces his T's... literally shaking with fury
Verdammt, immer nur english, warum nicht auf deutsch?
You are a terrible teacher
Thanks!
Is there any recommended watching order to help beginners? The tutorial informations are piecemeal🥲