I don't design with GRIDS in Figma. My 3 reasons.

[@DesignCourse]

Do you design with grids?

[@daya07]

Title should've included the word "anymore" as I remember you using this feature in a Figma tutorial for designing a landing page

[@DesignCourse]

@@daya07 I only included that just to show the grid feature. I don't personally use grids on my designs.

[@ninaxiang3781]

No, and exactly because of the third reason you gave. Total unnecessary constraints. I did try so of course it is not by laziness. But in fact it doesn’t even help with the consistency of you have a clear system in mind. Addition to that, if you have work on a scalable one then it is just something that come to disturb you

[@MuratKarakus-to4tr]

Sir, you metioned before "Soon, we will start involving ourselves with more advanced ui and motion design!" in your UX UI free crash course 2024, are you gonna make it happen or you are still going experimental, I dont understand the logic behind your videos, you have amazing valuable content but I dont get the logic, Your ux ui crash course is amazing and I want to see the rest of that:) I want you to teach us hungry passionate designers some more intermediate, advanced stuff, please

[@murtuzabanani]

Yes, so I use it for the first level to structure the layout, it's easier to divide a row in 2, 3, or more cols when I have 12 cols on the back, but for the elements, I don't use it.

[@designerjehovah4453]

I personally think grids are useful and necessary. It provides structure to the project and consistency. I do like my designs to be pixel perfect because I will actually refer to them and compare them with the finished product.

[@remusgogu7545]

But why grids? If you work in Figma, auto layout is much closer to what coders can do in CSS; as a matter of fact, design grids don’t exist in CSS, they have flexbox and grid. I just structure my layout using auto layout, and then I just need to be careful to set components to do the right scaling behavior on the screen. I feel this provides a better handoff process.

[@code.design]

Grids are essential for creating balance in design. If you pick up any design book, you'll see that every well-balanced design relies on a grid system, just like logo's. In fact, most CSS frameworks are built on grids and columns, making it easier for designers and developers to work together and understand the necessary steps. Especially when you work with agencies that follow brand guides. Setting up a grid system or sub-grid system actually helps you to design and align faster. If you feel constrained by grids, I strongly recommend learning how to use them effectively. Grids are meant to help, not hinder. They provide balance and structure, which are the foundations of a good user experience and a clear, concise UI. Check out videos by BONT on how to creatively use grids.

[@DesignCourse]

You don't need grids to create balance. Balance is a core tenant of UI Design principles. If you can't eyeball balance without templates (grids), I'd focus on developing that ability.

[@sergio_grez]

No. While grids are relevant in certain cases and in fact they work, sometimes it is incredibly important and decisive to rely on your own eye to fix balancing problems. For example many logos need the eye to fix kerning or other balancing between different shapes. The human eye will always be superior when balancing this kind of things at the end. So my workflow is always a balance between guides (sometimes made by my own depending on the project) and my eyesight to fix some problems manually. The important thing is to let the developer know about your desicions so they don't fck up the design. 😊

[@chidorirasenganz]

The human eye develops the grid so if your having trouble designing a grid that works for your project it’s probably because you’re having trouble balancing the grid

[@danielapro9755]

My man preaching the gospel here! We need grids!

[@danielapro9755]

@@DesignCourse Yeah but most designers suck and are sloppy. We need grids.

I guess it makes more sense to use grids to set the width of outer elements, like cards, but for elements inside of it, like text and icons, not so much

[@chidorirasenganz]

There’s still a grid then, just a soft grid governed by the gap spacing and padding

[@danielapro9755]

As a dev I'd appreciate if more designers would use grids, it takes out the guess work of having to figure out columns myself. If a Figma design comes without a grid then I myself will enable it, because time is scarce and I need to get my bills paid. EDIT: If a designer isn't gonna use a grid then I'd also want to have my freedom of deciding how components should look in a certain state or if certain types of animations make sense or not. This goes both ways.

[@David-xq7ef]

Mhh not sure to get you. Why do you need grid system as developer? I designed and I can develop my design without grids I don't even know how to develop with grids. CSS cares about auto layouts not grids...

[@biggles325]

It's funny seeing comments about pixel perfect designs are necessary to point out flaws to the developers. That's not how the web works. Coming from a development perspective, if a designer is going to be that nit picky about "pixel perfect" representation on the web, then they should design a mockup for literally every pixel of width in the browser... unless they don't want the site to be responsive and optimized. Oh and grids are completely worthless to me (having several years of working for high-profile clients).. they are limiting and just aren't realistic for building unique and immersive experiences imo. All I find that I really need is the live guides. Either way it really just comes down to comfortability in your process. I don't, however, appreciate when I'm on the dev end and I have a designer bitching about a 10 pixel difference on padding when the mockup is a fixed 1400px in width and they are using a Chromebook to review it..... unless all values are in vw, and that is just a terrible practice to get into. Oh and Figma auto-layouts are not even close to what you can do with CSS, so don't even lol

[@zackplauche]

I agree with this take.

[@EuropaUX]

This video has a few points that could be misleading. It's totally valid if you're the one designing and building the thing, or you have a rockstar dev team with awesome communication, and they understand design principles. In any other situation, designers should hand off designs that are as close to the final vision as possible. This gives devs a clear path to follow and removes the guesswork. I agree that you don't need to be pixel-perfect in the early stages of mockups, wireframes, and sketches. But as things progress, striving for that level of detail is crucial. Laying a good foundation early on saves time in the long run. You probably do use grids, just mentally. Your experience means you don't need to overlay them; you already have a spacing system in your mind, and you follow that gut feeling and muscle memory. As an educational channel, your perspective is valuable and appreciated, but it could mislead some viewers. All the hype around grids comes from the Swiss and their influence on digital design. You're spot on that ultimately, what matters is a clean, consistent look.

[@r-i-ch]

I do like grids, but mainly for quick and easy alignment of elements while creating. Pixel perfection is a myth, but it's nice to turn something in that is pretty close to "perfect" instead of already requiring minor tweaks. The human eye likes symmetry, and the reason for an X-column grid is to allow you to more easily put things across the vertical spread in a set of relationships that carry from horizontal section to section. If you want to go 1\2way through a column or gutter. That's fine. Because a thing about grid systems is that they can be abandoned - by repeatedly dividing or multiplication, they can "fit" anything.

[@angelvelazquez1792]

Throughout my career, I've always relied on guides rather than grids for design, trusting CSS to handle the layout during development. With Flexbox, the process becomes even more efficient and time-saving.

[@k-yo]

THANK YOU. Grid is just a legacy from print. I also do front-end work and HATE grid systems. They do constraint A LOT. Flex and CSS Grid are extremely flexible for real flexible layouts for the web. I guarantee is better to make fixed widths and with arbitrary values (based on what looks best for the underlying content) and have the content around adapt to it. When it makes sense, also set a max-width for the outmost container to allow for optimal legibility, but exceptions exist for usage of larger screen spaces. Judging by the amount of people against dropping grids in the comments, we really need more people bringing this discussion back again. Also, abuse of the auto-layout feature in Figma and leverage gaps, padding, tokens and variables as much as possible for consistent spacing. Seriously, DROP THE GRID!

[@Indiesign]

What a BS! Do you know what really slows the process down? Sitting with the dev team and pointing out every single mistake they made! They make mistakes even with pixel-perfect design layouts - imagine the chaos with rough design files! Not on my watch. Never.

[@DigitalaElle]

I’ve just started using Figma, and thanks to you, I’m not going to start using Grids! Now I’ll continue watching your videos-thanks for the inspiration! 🧡🤩

[@HarishChouhan]

I use the grids to get a better idea of the spacing without having to then click and check the spacing between each objects.

[@molle4000]

It always comes down to what you are designing. If you are doing basic landing pages then yeah, no real need for grids. If you are designing dense data tables then you definitely want to design with a grid and communicate this closely with your dev. Otherwise you will have stuff overflowing left and right

[@bl7937]

IMO, I would say whatever works best for the designer / developer who has to make the client happy within the time window. Either using / not using a grid is optional. I personally use a grid system along with consist spacing and typography sizes.

[@twozdo]

I firmly believe in the importance of using grids in design. Our primary goal is to create something that aligns with the client's vision, and even minor imbalances or imperfect spacing can significantly affect the final outcome. Without grids, it's challenging to anticipate how the design will ultimately appear. Grids are crucial for ensuring uniformity, and mastering their use helps prevent poor design choices. They provide an excellent foundation, especially when starting with a blank canvas, and can greatly influence the overall design quality. This is just my perspective .

[@NareshUgaonkar]

I have tried to use grids but it becomes very limiting and instead of making progress in end up trying to satisfy my grid OCD. With the current software we have we really don't need grids. Guides and live guides are super useful though.

[@rahulkuulsingh]

So Garry created this video so that we can comment how useful grids are and how we use it. I don’t use them, too. Snapping and guides are a much faster approach. But for final iteration it’s a good idea to have a grid in place defined by the org or client framework.

[@MicahKillian]

I agree. The cost isn't worth whatever benefits grids provide. This is probably more true for jack-of-all-trades developers than for people that work in teams.

[@Tero_50]

This is so true tbh, I use that a lot.. I only use grids for the spacing. You aren’t crazy

[@moritzmaier9749]

I was expecting your solution is that you use Auto Layout instead. That would make so much more sense. Using Auto Layout to simulate flex box and use a defined margin system like 4/8px. Then you have a similar structure but are more free in your design decisions with the awesome responsive possibilities based on components rather than on whole pages.

[@BengaloFFM]

Amen brother. Balance does not need a prefabricated grid. Design is in flux. Balance holds everything together, not a grid system.

[@tylnedriavalendorf]

Also no one uses bootstrap anymore, modern css frameworks don't have native grid support as bootstrap does

[@MrTomas2280]

The problem with not using a grid system is that when it goes to development and a designer sized it just right to make sure the text doesnt wrap or a line fits just right and it breaks the sites grid, the dev has problems because now the design doesnt match the live code. If the dev goes and starts messing with font sizes or something to make it fit they usually get push back from the designer saying it doesnt match their layout. As a dev I've seen it a lot from designers that dont understand grids or CSS so grids in design is important to help them wrap their head around the concept.

[@keith9776]

I think you make some valid points. I would like to push back in two areas. While it does take a few minutes for a designer to set up a grid, it can save a few hours for the developers (considering larger websites here). The second thing I have ran into is issues around breakpoints and responsive design. If both the designers and developers are using a grid system, the layout and text wrap will be a lot more consistent between design and development. While yes it is possible, It can get really tedious to force elements to line up exactly how the designer envisioned it through all breakpoints without a grid. This is just what I have experienced at my agency. Would love to hear other takes.

[@NareshUgaonkar]

I could never complete a single design project with grids on. It's just too restrictive and it starts that OCD in your brain. I found it impossible to work with grids. As for breakpoints no developer has complained to me about not using grids if you show them enough examples they are quite capable of making it work.

Yes, love this statement. As a dev it is literally a pain in the A**, if you have to align every little element to the grid system for a complex UI. It is ok for aligning cards and stuff like this, but please don't think it is easy to align content that is nested deep in the card with the main grid. It is sufficient to have some predefined spacings and be ok with it, instead of dividing everything by 12.

[@Edwardctk]

i think the grids is helpful but not a must, actually most of the creativity starts with no grids design, because the grids is limiting our design. design is a math, we dont need a rule.

[@twozdo]

you say design is a math and refusing that grids arent necessary wow. also you can always go beyond the grids its just there to guide you as a starting point on a blank canvas

[@UITricks]

You know what slows the process down? Reviewing the developed design by dev. And pointing tons of problems they’ve made to design that.

[@nadavhalevi9365]

Highly depends on what you do and who you work with. Designers don't deal in absolutes.

[@iRushab]

Wow, that's a big statement! I don't know what would I do without grids.

[@chrisowemz]

Yes, I do... But it majorly is important for me when trying do dashboards and define regions... Mostly the margins are what I usually use for other Mobile projects or websites, even though I still use four or 12 columns 😁

[@Hitchhiking786]

Hello guys, I am very new to Figma I want to create a rope, I can create a straight rope but I couldn't bend it as I like. Since my straight rope is nothing but a copies of small chain element grouped together. I was thinking of making own custom stroke design, and use it as stroke for a like but not lucky to make it possible. I appreciate any inputs.

[@sepheiba]

since I'm still new to design, discovering grid systems helped me a lot, but maybe a pro have grids printed in their retinas

[@ClaviHaze]

I agree. I just recently learned to use auto layout whenever I want padding, so grids are not useful.

[@DesignCourse]

@ClaviHaze I also only use auto-layout for repeating items sometimes, and for centering text in a button for example. I do not at all rely on auto-layout for any other layout scenario. I find that it's also a time consuming constraint.

[@cjn2109]

I think you might be right in terms of not using grids in ''more creative'' mockups. That make sens :D

[@aloysiofranca]

I don't use it either. All my frames and paddings are multiples of 4 or 8. So the tendency is for the layout to be coherent even without grids.

[@chidorirasenganz]

That’s a soft grid

[@termorey]

Designer: let's make all with absolute positions! Developer: really? That's the same i feel.

[@waynejohnsonsbicep5133]

So, you hand off messy designs to dev and expect them to clean it up?

[@FawazeHoulelFOFANA-SEIDOU]

Guide an auto-layout are my bread and butter in figma ❤ love that take

[@Theosapcom]

Great new video format. You must have a great teacher :)

[@SerenityReceiver]

The developers need pixel perfect reference...many of them do not have an eye for it.

[@TeHzoAr]

"I hate grids because they make me design within a uniform system" yes that's the point genius

[@shezzor]

I'll never understand why designers force pixel perfection into their designs. Even worse when they try and align everything to 4 or 8 pixels. There's zero guarantee that content and viewports will ever align to this limitation.

[@randybeaver]

You clearly have no idea what you're doing then

[@RLNDcaST]

I can't understand why devs can't make border radius or headline size or other text styles like they are in design😂 when you get all that info u just do jour part not guessing what goes whereandhow itshould look😅

[@Speedy4you10]

I don't use anything. Even guides. Because when you have an object and you duplicate it and put it on the bottom next to each other, the guides do show up allowing for a consistent design. If I do use guides I only use it only for the first object before duplicating.

[@haykazkhroyan]

This works only if you’re a designer and a developer at the same time.

[@carltongordon]

I think the grids should be snapable like the guides

[@norvisnorvis7592]

I work for a company in which I'm the designer and developer. Figma just doesn't work for me. Penpot leave me my hallelujah moment.

[@hannasavostianova7155]

Is it better for me, cause things will be faster? Yes. Will be developers happy about it? Not sure :)

[@kuwandak]

if you wanted to be fast youd be using css from the get go with tailwind thats just a L take

[@Hefss]

100% agree with this Gary. I might sometimes use the rulers, but with auto layout, alignments and the guides you can't go wrong

[@aashanyoutube]

This is Click bait.. i usually design without any grids but later implement it if the designs get approved. Its definitely a hassle to followup both design and grid without abrupting both. But i definitely follow grid subsequently after the confirmation of designs.

[@oyesomibenedict7521]

Grid system In my opinion aren’t that useful, personally I don’t use any at all, I use the automatic guidelines + rectangle thingy only

[@marklnz]

As a dev, I endorse this point of view. I hate the restriction that grid systems introduce (your 3rd reason) - and I'll get very annoyed with a designer that comes to me with a design that is clearly based around a fixed column grid system. Forget it.

[@Gd22708]

Ummmm idk what devs YOU work with but the ones I work with have to have perfect statics otherwise they’ll botch it lol

[@xdddd-gz3ob]

You are wrong. A 8px grind would also allow you to use 4px as a breakpoint. Not much of a point..if you talk about grids, yet only display collums.

[@HariNair108]

If you think grids make your execution slower, you are not a designer yet.

[@grahammiller7614]

I get what you are saying, but a grid is useful when you start learning to use figma

[@thebmkav]

I agree completely. As a designer AND a dev, majority of my aligments in the dev phase is gonna be done by flex, grid, and site wide margin, along with consistent CSS properties across element, so setting up a grid system for the design in the mockup phase feels like a complete waste of time and a creative hinderance. I don't need to see the rows and columns because I know how it works in my head, and I'd rather have the freedom to design how I want, freeform (within a site margin) and then I'll fine tune the spacing in the dev prototype anyway when I get round to building. It's not as if your gonna suddenly design complete chaos without a grid. If you have a good eye, it won't allow you to make a mess regardless! If I was handing off a design to a dev, then I'd probably spend the extra time ensuring things are where I want them to be, or ensure there is a system for them to follow, just because there's no guarantee the dev would spend the time on the alignment other than just doing a 1:1 replication of the mockup. Depends on the dev, but you also don't wanna piss them off on the handoff too. But since I also built everything I design, that's effectively a non-issue, and with the way most of the designer are going these days, more and more people are building their own designs too in Framer or Webflow.

[@thebmkav]

Afterthought. Once you start building what you design, you realize that rigid grids aren't always responsive anyway. You should be designing fluidly, and thinking about how things are going to shift and change in the build phase too. No need to lock things in during design and then get butthurt when the grid needs to be broken or modified in the build phase. Just design more freely, enjoy it, and don't worry about it until build. Simples.

[@gdj777]

You miss Flash.

[@1974vorvon]

Assuming your dev is not using a grid, no, you're not crazy. But if your dev is using a grid and you're just being "creative", that's not going to work out at all.

[@Chrome2310]

thank god this is a troll video

[@brigibb]

Just use auto layout

[@vac1e]

I swear Gary and Michal are doing God’s work in this industry. 🔥

[@gargulec6085]

I would love if every designer aimed to achieve UX perfection, instead of pixel perfection. In a real product your users want to have a seamless experience, and do not care if an image has ratio of 5x3 or 5x3.5. As a developer it drives me crazy when I have to change 20px to 25px. Noone cares about those things except designers themselves. Good vid sir.

[@KD-tp6er]

Just no.

[@phishdough]

L take 👎

[@이재홍-c7f]

나도 당신이 쓰는거처럼만 쓴다

[@artemkozyrevofficial]

Advice isn't for beginners...

[@dk80211]

Worthless, bad advice. Especially if you're just learning design. Grid systems have been a foundational element of design since inception. Learn to use grids. You'll become a better designer.

[@DesignCourse]

I know how to use them. I've been doing this for 26 years, they just slow me down.

[@ayomikunboyede8589]

Nonsense

[@vac1e]

All these “ui gurus” crying about not using grid is hilarious 👑

[@KD-tp6er]

Go work for any decent company with design and development teams and let me know how you get on with no grid usage.

[@vac1e]

@@KD-tp6er Thank you but I follow Malewicz’s and Gary’s advice and focus on what matters. Clients just don’t care about any of these fancy stuff that the majority of this industry is so caught up on. Btw I have a full time PD job and also have clients as a freelancer, never a bad word. Also it’s pretty easy to tell which designer has at least average sitebuilding skills, because they know that in the majority of the time dev’s first thing is to turn off the grid. Usually what matters are how many col’s you’ll have, what’s the container size on certain breakpoints, what are those breakpoints, and the gap’s between cols.

[@azad01_]

who in the world made you messiah for this lost souls? no, use grids (jk😂)

[@DesignCourse]

@azad01_ I guess starting UI Design in the 90's 🤣. We didn't have grids back then! I get along just fine without em today, too.