Effectively Use Column & Row Grids in UI Design (Figma)

-- Today, I'm going to show you an approach for creating layouts with consistent spacing/white space. I will specifically show you how to use row based grids in Figma to ensure equal white space between various elements and sections in your UI designs.

0:00 - Introduction
0:57 - An Awesome Offer
1:34 - Setting up a Column Grid
2:20 - Setting up a Row Grid
4:19 - Navbar Layout
5:25 - Headline & Subheadline
8:58 - Testimonials Section
11:20 - Another Section
13:53 - Final Thoughts

Let's get started!

#uiux #grids #figma

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS!

^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Come to my discord server or add me on social media and say Hi!

[DesignCourse]

POLL! Respond below with the appropriate option:

(a) I use no columns or grids when designing
(b) I only use column grids
(c) I only use row grids
(d) I use both

[chidorirasenganz]

My biggest suggestion is to use a vertical grid (row) dividable by your line height to keep vertical spacing even. Or vice versa.

For example a vertical grid of 16px and then use line heights that are multiples of that (16, 32, 48 etc)

[DesignCourse]

By the way, I dislike not having a publicly viewable dislike count on YouTube! I advocate for my haters, damnit!

[Underhills]

I'm not a big "gridnick". As a matter of fact I've always just used guide tools and made sure I'm as consistent with space that I want, cause I believe it's important not to be symmetrical all the time. Asymmetry is important too in order to create visual "tension", otherwise the sameness can become a bit static, making the layout look like a run of the mill thing. It's okay to break the mold and leave the cookie cutter strategy. However, I really enjoyed this tutorial cause it touches on some relevant CSS and markup reference points that I found interesting with column systems and so on. Thanks for sharing. This channel is a gem.

[TommySaucierPlourde]

D) and I would also suggest to base your vertical on your <p> style, so your content fit your vertical grid

[milanmwukovski]

ctrl+shift+4 grid view toggle :)
Btw my answer is (d)
Thanks for the content!

[shyamlohar]

Always used columns only but I am sold on rows 😍😍 it becomes too easy to get consistency without spending lot of time.

[mustafatahir]

Shift + G is the shortcut for the layout grid (Displaying and undisplaying)

[Underhills]

What annoys me is the uneven inner space from the bounding box to the type itself in textboxes, and it varies between the type sizes. This video shows that very well, so if your trying to align text, let's say left align H1 and H2 below ("A snazzy etc) the inside of the textbox has a larger inner "left margin" than the other. So you need to cheat the grid and push the textbox that has a larger space before the actual type starts further to the left. This also affects the CSS reference that Figma generates in the Inspect mode cause it calculates the coordinates of the textbox and not the content of them - developers always ask me about type positioning when they look at the Figma files. It's almost never according to the actual layout. All typefaces come with a spacing strategy that is unique to each type, so some typefaces may have a very large textbox space in front of the first letter you write, other typefaces may have almost none. So optically you need to adjust these things all the time since the text box doesn't hug the text 100%. You can see it even more clearly if you apply a guide to the left side of the textboxes, alongside H1 and H2 in this case. This space issue is the same in most editors but I find Adobe XD to handle this better than Figma cause I'm able to somewhat contract the textboxes manually better, if that makes any sense. It hugs the content (the type in this case) making it easier to align different type sections. You can't adjust this by kerning og spacing cause it is defined by the software. In Figma some robust and well know typefaces is terribly misaligned inside the textbox, overriding the spacing that actually comes with the typeface from the type designer. Sometimes as much as 3-4px above the letters. When trying to adjust the textbox by dragging it downwards towards the letters inside the letters just flows away from the bounding box. Very annoying. This doesn't happen with the same typeface in XD, InDesign or other editors with better typography capabilities than Figma.

[Prz]

Was really hoping for an explanation on how grids and columns effect the spacing of the elements when the parent frame is resized.

[jaza]

Thank you for creating this video. very insightful!

[jorgechain]

Was looking for this about a week ago xD great content tho, learning tons

[datmanUK]

Can you help with how to use grids and columns for responsive web apps / dashboards such as a menu bar down the left and responsive middle section. They always confuse me.

[bones_twisting_sorrow]

I wonder if you have any tips specifically on designing for high resolution like 2K/4K. Container is the obvious one but some parts of design may rely on fullscreen display whilst other not... Or do you ever scale things like fonts up from 1920/1440 design..?

[Sebastian-zscp]

it will be also Interesting to see how do you config it to css.

[Harish-nhrm]

Should you not set up this grid keeping any framework in mind such as Bootstrap??? Most of the developers follow Bootstrap Grid System so could you please set up grids for 1920px canvas size where container max-width is 1140px or 1320px as mentioned in the bootstrap???

[weristsam]

Where do you find the sketch image? :)

[ByInside]

Can one column have 1 additional pixel? I set up a dashboard 1440x1024 100px margin 24px gutters and the width of the columns are sometimes different (1px difference). Did I just ruin the design system that I’m working on? It just stretched this way.

[S.Trev]

I see the purpose in using the grid to help with layout but why not use auto layout to define the space between objects?

[DeepfriedBaby]

why do you use odd numbers for these settings, or which can have odd numbers. 20, 5?