How to set up a grid for web design

Step 1: Selecting a frame

Open your figma file and create a frame. I like to make mine 1728px wide (MacBook Pro 16") to have larger margins on the side (we'll come back to this in step 4).

Step 2: Adding a grid

On the right toolbar, select "layout grid". A grid will automatically generate, but this isn't what we want.

Step 3: Editing boxed grid to a column grid for web design

Click into the grid by selecting the icon with 9 dots.

Hover over "grid" and select columns. Select 12 column grid with 24px gutter. But what about the margins? Follow this next step!

Step 4: Do the math to create margins

As I mentioned in step 1, I like to design with large margins. The optimal desktop grid for web design is 1440px wide with 24px margins. So I follow this math equation to create margins at 1728px:

(1728-1440) / 2

This gives me a margin of 144px.

However, I still need to take into account a 24px margin for when our devices do reach that desktop size, so i will add another 24px to my 144px margin:

144+24=168px margin

Step 5: Be creative

Let's say you want large margins on every breakpoint. Use the above equation to create a margin you can implement on all your breakpoint devices!

You can choose to be creative with your grid, or stick to the same one every time. Most designers have a set grid they like to work with, but if you want to switch it up, feel free!

Last thoughts:

If you are just getting started with web design, I would suggest sticking to a simple grid for web design. Really focus on learning as much as you can about user experience, sitemaps, user flows, and grids for web design. The fun part - creating super cool interfaces with awesome animations - will come! Do your homework and get in shape.

Come back every week for more content!

Follow me on instagram | Connect with me on linkedin

Keep reading

© 2021 Portfolio Ace