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).
On the right toolbar, select "layout grid". A grid will automatically generate, but this isn't what we want.
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!
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
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!
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.
Get in touch
