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.
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.
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..
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
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 ;)
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.
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.
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.
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.
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?
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...
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. 🤓
@@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!
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.
@@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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-hicPvJDH7J4.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.
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.
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
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)
@@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.
Who cares. You're making the same mistake: a RU-vidr 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.
