Starting a grid sounds simple enough. You know roughly how many columns you want and how the content should sit. Then you end up digging through old Figma files for something close, bringing it over and changing it for the new project.

Omni gives you that starting point inside the project. If you have already chosen the archetype while setting up Type or Colour, Grid carries it across, so you don't have to select anything again.

You can open the tool with the relevant breakpoints and the layout ready to review, and then change whatever the interface needs.

Omni is now free to use. Open it in another tab and try the Grid tool as you follow the walkthrough.

Open Omni

Give each product the grid it needs

For a website, you can set a maximum content width or let the grid scale with the screen.

But for a dashboard, for instance, you need to account for the sidebar too. Omni treats it as part of the layout, so you can choose whether it is sticky or floating, set the width for its expanded and collapsed states, and watch as the grid adjusts around it.

For mobile products, you can choose iOS or Android and work in portrait or landscape.

See how your grid works across breakpoints

Website and Dashboard projects begin with Bootstrap breakpoints, a familiar baseline for responsive web layouts. Mobile breakpoints follow real iOS and Android device sizes. You can keep these, change them, remove any you do not need or add your own.

At each breakpoint, you can set the columns, gutters and margins from the controls on the left, or drag the grid directly in the preview. The columns can stretch with the screen or stay fixed, and you can turn rows on when the layout needs them.

Switch to the UI preview to see the grid on an interface. Turn on the overlay, move between breakpoints and adjust the values to watch the layout change in real time.

Let’s walk through the full grid workflow in the video below. I’ve included a shorter version underneath in case you want to come back to a particular control.

Starting with the product archetype, you can adjust the grid across breakpoints and exports it to Figma, where the layout grid styles and ready-to-design frames are already waiting.

Follow the setup in five steps

1. Choose the archetype
   Select Website, Dashboard, iOS or Android. If you have already set up Type or Colour, Omni carries your earlier selection across.

2. Add the layout details
   Set the website width, configure the dashboard sidebar, or choose the mobile device and orientation.

3. Review the breakpoints
   Keep the defaults, change their sizes, remove any you do not need or add your own.

4. Adjust and preview the grid
   Change the columns, gutters and margins for each breakpoint, then use the grid overlay to check the result.

5. Export it
   Download a design.md file for your design agent, or copy the generated code into the Figma Console. Omni creates a named layout grid style for each breakpoint. You can also have it create an empty frame with the relevant grid already applied.

Once you run the export, the layout grid styles appear in Figma. If you selected the frame option, there is also an empty frame waiting for you at each breakpoint, with the right grid already applied.

The breakpoints also stay with the project, ready for the Spacing tool to use when you move on to the rest of the system.

Omni is free to use, so try Grid on your next project and tell us how it goes.