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
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)
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.
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.
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.
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..?
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???
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.
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
both.
(b)
I use rectangles to measure the white space (d)
D (both)
(b)
By the way, I dislike not having a publicly viewable dislike count on TH-cam! I advocate for my haters, damnit!
There's a chrome extension called "Return TH-cam Dislike" that is fully functioning
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)
What?
@@TheShmrsh to get your typography to line up with your vertical grid
Can you explain it again with another example? I'm really sorry i couldn't get it
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.
ctrl+shift+4 grid view toggle :)
Btw my answer is (d)
Thanks for the content!
D) and I would also suggest to base your vertical on your style, so your content fit your vertical grid
Always used columns only but I am sold on rows 😍😍 it becomes too easy to get consistency without spending lot of time.
Shift + G is the shortcut for the layout grid (Displaying and undisplaying)
Was really hoping for an explanation on how grids and columns effect the spacing of the elements when the parent frame is resized.
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.
As always, great stuff, Gary!
You are my best figma UI Tutor
Great walkthrough, brother
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.
Was looking for this about a week ago xD great content tho, learning tons
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..?
Thank you for creating this video. very insightful!
Great tutorial
Superb. Invaluable tips. Thank you!
it will be also Interesting to see how do you config it to css.
Very useful and practical 👌 👍 👏
Where do you find the sketch image? :)
Great stuff !
thank you , it was a useful video
Thanks Simon
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???
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.
10:26 | shift + G
P.S. cool cover of the video
Thanks good stuff
CMD +G to toggle Grid on/off
Is there a similar thing in xd?
I am wondering how to show both columns and grids at the same time.
why do you use odd numbers for these settings, or which can have odd numbers. 20, 5?
HAHA I love your humor 3:35
I see the purpose in using the grid to help with layout but why not use auto layout to define the space between objects?
Why not bootstrap grid system and do the margin 150 gutter 30?
❤
Did you mean If we are using CSS padding it sucks ?
Can you do this stuff for mobile layout?
It's the same concept, except for columns, you usually reduce them to 8 on tablet and 4 on phones.
@@DesignCourse thank you ❤️
@@DesignCourse Would the margins be the same or would they be different?
Great video. (b).
b) I use only columns
d