Responsive Grids: How and why NOT to use them
Vložit
- čas přidán 19. 06. 2024
- Here’s a video on how to structure your responsive grids, and why I don’t use them.
Be sure to subscribe and hit the notification icon! It really helps me help you and others like you be better designers, freelancers, entrepreneurs, and people in general!
/ @amdesignanddev
00:00 - How to set up responsive grids (you can skip this part if you don't care)
06:58 - Why don't I use responsive grids
09:28 - Who gives a crap? Use autolayout! .
Have a project? Send me a message on sales@thesmallsquare.com or contact me on LinkedIn.
/ asaadmahmood .
.
👉 Follow me on LinkedIn and Twitter for more content.
/ asaadmahmood
/ asaadmahmood5 .
Sign up for Figma: psxid.figma.com/821dltt72sqv .
Subscribe to my newsletter to keep up to date on latest design/tech trends, update, tools and information! 🔥
the-optimal-designer.beehiiv.... - Zábava
Hands down the best Figma Tut channel I have discovered. I know you will be famous someday and it is my sincere request to you to never sell out like most famous channels. We need more honest chaps like yourself in design.
Thanks man!
I totally agree, I cannot even tell you how much experience I gained by watching AM Design videos
Your channel is one of the most practical and REAL out there. Many of these 'popular' channels just pull out some feature that can be done, but they fail to apply it to a real-world situation (or fail to point out how faulty is really is) -- especially when it comes to the actual code implementation.
Exactly! ;)
Hello again, I started with Figma a couple of months ago and learned a lot from Mizko, Gary (DesignCourse) and Jesse Showalter. I even took Mizko's course to get an insight into the Figma basics. And then I discovered your tutorials about Figma Design Systems - it was an eye opener. Your approach is more practical, efficient, methodical and "webdev oriented". Since my goal is to build good Figma templates for the webdev department, I come back to your (and Kevin Powell's css/webdev) channel to deepen my knowledge. And about the grids: In the beginning I tried the "Mizko method", but I found the grids kind of disruptive for my workflow. Nothing that can't be solved faster with containers, autolayout and rulers ;)
So glad to hear this EM, glad you're finding value, whether its from me or anyone else. :)
I love your confidence to call this out.
I've also been of the opinion that the grid thingy is really not necessary so far auto layouts are well used.
Thanks so much. I'll be here often
Thanks a lot Sylvman!
I personally feel when people try to find any solution ..they try to follow some well known youtubers blindly ..and blindly follow them what they are teaching or a solution they are providing to a problem is correct or not without thinking we take it as a thumb rule..and due to this most of the designers are loosing their creativity and stop using their brains... and really i am glad that there are few youtubers like you ...who comes up with a logical solution..and helping designers to follow a correct path..and think rather than blindly follow them ...thanks a lot..
Thank you, means a lot.
5 mins into your video. I'm sold. Subscribed. I like your no-BS approach.
I absolutely think your channel is better than mizako & designcourse for learning.
Though they have lot of content but at the end Quality matters. not that their content is no good but i personally felt more confident since the day i discovered your channel.
You are exactly talking about the problems new designers like me are facing rather than just focusing on posting new video every week. Thats where u stand out.
Thanks man, much appretiated!
I totally agree.
Yup! Human to human, not robot to human.
I was also telling a friend about this just on Saturday 😅
Thank you so much for this! I thought I was the only one who found responsive grids such a massive pain to work with. Glad to see that there's a much less stressful way to lay out my work.
Finally somebody is on board with me too! I was like wtf is going on with these youTubers.
I love this
Keep doing great work here
I’ll try out what I just learned
Thank u
Just Awesome.
Thank you bro you are awesome 👍🏻
Here's my official Figma paid course which you can check out on:
www.asaadmahmood.com/courses/figma-noob-to-pro
Use AMSUBSCRIBER voucher to get a 50% off. I can’t wait to see you all inside.
I'm glad that I'm working like you, I didn't know there were people doing it the harder/more complicated way hahahha thanks Asaad! 😉
Hello AM! I hope you make a tutorial on the grid systems for cellphones, ipads and laptops. Thank you!
Thank you so much,, This is really great video.. Wanna see another long auto layout class from you,, And live projects A to z,, IF possible plzz,,,
You tell the truth! Auto-layout is enough.
Great tutorial! I had the same problem as you show at the end of the tutorial with the card and the title near to him... so I believe that the grid is more between the cards and if you want to organize things. but it does not work in a perfect way all the time...
Great tutorial! Would you be able to create a tutorial on how you handle auto-layout grid in iOS and Android mobile devices. Also display screens that you use for both the devices?
I am glad I found your channel... can you make a video on how to make mobile navigation bar in your style? 🤠 Thanks in advance
God bless the day I subscribed to your channel
Your content is really useful for they are practical, efficient, and applicable. Can you please do a content on how to decide on the size of UI elements such as buttons, input fields, search bar, icons, font sizes, etc? Should we reference popular design system and follow design guidelines for different devices? Some concrete examples would be very much appreciated. (I'm never sure whether something is too small or big when designing and I want to know how other designers decide the size of UI elements with confidence apart from experience.) Thanks. 🤓
nice
You need to be an auto-layout master to be able to design a full-blown site with it.
I feel like you can use rulers to set the container and work within it. But I don't think full blown sites even obey the grid structure to a tee.
I feel the same about the grids. I'm new to Figma, and I just couldn't make it work the way I wanted to. Especially when there was some autolayout involved as well. But how do you resolve the situation when your autolayout structure have to be other than evenly sized columns? For example, can you do a column layout 75% + 25% using autolayout? I would really like to know, thanks.
In my about 10 years or more as a designer, I haven't used resizing frames to show the responsive layouts of a design.
We usually have different artboards for clients to see the different layouts.
So if that's the case, I usually just give them fixed sizes.
If you have a frame or a shape, that's taking full width of a container, and you change the width to 75%, it takes the width 75% of its container.
This is awesome. So what do you suggest we use then?
Rulers if you want, though an autolayout container would be sufficient.
I am developer that also love designing and I agree 100% with you.
I am glad to get some developer approval on this :)
@@AMDesignAndDev it was your figma tokens tutorial that brought me to your channel. Been playing with a workflow from my designs to code. Love your stuff!
@@JacquesvanWyk Glad to know! I probably should consider posting a lot more dev stuff.
Anything that you'd be interested in seeing?
could you please share your experience and some tips on English.
I mean you really speak very fluently.
I wish I had such fluency
Go AM! All the way. I’ll just say I knew him when
Totally with you! Autolayout rocks. But it has its issues. Seems a bit buggy and it takes me forever to get things configured properly because it keeps changing the fixed/hug/fill parameter on me, or it doesn’t offer the Fill option sometimes.
It’s not buggy. It’s about using it properly.
@@AMDesignAndDev :) Do you have a video that might explain why the resizing settings change on you? I set it to fill and it changes other things to fixed. Also I cannot set things to fill sometimes. I feel like I’m playing whack-a-mole!
@@teegees The reason why you can't fill sometimes, is because the fill container option only appears if there's an autolayout container around the element.
If not, no fill container option would appear.
If you remove autolayout from an elements's parent, and the child had fill container, it would automatically be removed from the child as well.
It's just understanding autolayout a bit, and you'll get a hang of it.
Watch this video:
czcams.com/video/hicPvJDH7J4/video.html
After setting my 12 columns and 72 pixels on the margin, I always find myself taking it off and then replace with the ruler for the rest of the project😅
Enough breathing space for me to see my actual design
What do you do when you want the content to adjust when the screen gets narrower, but to stay centered when it gets wider..? If you make it into an auto layout and set it all to 'fill' I believe you can't give the containers constraints right?
That's not possible in Figma right now as of my knowledge.
Layout grids are there just for presentation and adjustments, it has no bearing on actual implementation.
So if you want something to stay centered, after a particular width, and to shrink when it gets narrowers, you would have to do that via two separate screens, maybe connected by a responsive plugin.
@@AMDesignAndDev Just figured it out yes via a video of Arnau Ros. He had another Figma frame for what the design would look like beyond 1440, which would be centered. And then you do the actual implementation in the web builder tool (like Webflow or Framer) with a max width setting. Correct? Im still very new but looking at all this I guess most designers just make the 1440 design and then just set a max width in the builder tool and only design what happens when things get narrower.
@@Michael.design Yup, that's one possible way.
@@AMDesignAndDev Thanks! Great videos by the way. Learning a lot.
it would be nice for auto layout to limit the amount of siblings per row, if you have 12 siblings, limit the amount set to 4 that it automatically set the rest as vertical stacks of 4
I agree, that would be a great feature.
Hey man, The grid is not for the designer is for developers. I know it's a pain in the ass for designers but it helps the development a lot. When working on a big team you gonna have some kind of grid system. Most cases are the bootstrap grid. Also, the way you are using it for responsivness is exactly how it should be used. Chreers!
Bro, I'm a developer myself. Bootstrap and Columns grids are way outdated.
We have flexbox now and actual css grids. And I've shown real examples of popular sites that don't use it.
@@AMDesignAndDev I did not attack you in any shape or form.
I was just saying that the bootstrap 12-column grid is beneficial for developers, mainly when the focus is building reusable components. When building such components it is generally recommended to avoid using fixed widths. Bootstrap grid system provides a structured approach to manage component widths within a responsive layout, offering flexibility and consistency in your reusable components.
Just because some popular websites do not use the system it doesn't mean that it's not useful or used. It really depends on various factors, such as the specific design requirements, project constraints, and development preferences. The examples you have shown are just simple landing pages (styling-wise) that do not need such a system.
Also, flexbox is way older than bootstrap. In fact bootstrap grid system was built using flexbox. It also uses the css native grid system since bootstrap 4, but I might be wrong about that.
@@charlesxavier77 Unfortunately bootstrap grids wasn't built using flexbox.
I have been in the field since about a decade now, and it used floats for their grids way back then instead of flexbox.
@@charlesxavier77 And I understand you didn't attack me, I'm just talking about practicality and how the world has changed. Back in the days, I also used the 12 column grid structure quite frequently too in my dev process, not anymore.
@@charlesxavier77 However, if you want to use them, by all means go ahead, we can agree to disagree.
I don't mind people using column grids, especially in particular instances, but I never want to be rigid about design or dev patterns as I think that inhibits creativity.
Figma = Auto Layout!
Responsive grids are more for tablets and phones than desktop. For Desktop it’s better to use a fixed sized grid that is set to your max width for your columnn(s)
I tried it for mobile and tablets too, useless for me.
An auto layout container works much better for me.
@@AMDesignAndDev I could see that. It mainly comes down to soft grids vs hard grids. I prefer hard grids for visualization and planning. And soft grids using autolayout to refine and iterate on those initial designs.
@@chidorirasenganz Sounds good, as mentioned, if you're getting value out of it, great!
Who cares. You're making the same mistake: a CZcamsr who preaches his system is holy with the followers screaming "preach brother!". In the end it's all just methods to achieve something. It's about experimenting, learning and understanding the pros and cons so you can see what works for you and what you can use in what situation.
My viewers care, I want people to be free from constraints from designing like "pros", especially if its costing them time and energy without any real benefit.