Figma layout grid — where development meets design

What is it all about?

The layout grid itself is a feature included in the Figma toolkit which provides a visual structure to designs by applying rows, columns, or pixel grids on top of mock-ups. It allows to establish consistency across multiple platforms and make fewer decisions when defining layouts, thus reducing the time taken to define layouts for mock-ups or wireframes.

Figma layout grid now is a Flutter package that imitates all functionalities of the previously mentioned Figma’s layout grid. It aims to help developers and manual testers determine whether the UI components match the design file and align properly. Not to mention, it is super easy to plug it into any Flutter project.

Hookin’ it up

Run the following command inside your project in order to install the package.

$ flutter pub add figma_layout_grid

After that, fetch the dependencies by running

$ flutter pub get

Now you should be able to use the library.

To do so, simply wrap the desired widget with LayoutGrid like that

LayoutGrid(
    ...
    builder: (context) => Scaffold(),
)

This won’t change much in terms of the UI, because by default all of the layout overlays are disabled.

Make use of it!

Basic usage

The package provides three types of layouts: rows, columns, and pixel grid. You can easily steer each of them via LayoutGrid.of(context) methods without forcing any particular state management approach. For the sake of an example, let’s see the possible options for a row layout.

• To show a row layout: LayoutGrid.of(context).showRows()
• To hide a row layout: LayoutGrid.of(context).hideRows()
• To toggle a row layout: LayoutGrid.of(context).toggleRows()
• To check whether a row layout is enabled: LayoutGrid.of(context).visibleRows

In a similar way you can do that with columns and pixel grids.

Mimicking Figma

First thing you need to do is enable the layout grid feature in your Figma project.

You can do that manually like in the picture below or by pressing Shift+G.

Now select a specific UI component or a whole frame and you should see the layout grid section in the right sidebar. Let’s consider row layout properties since it is enough to illustrate the idea behind layout customization.

Count

Above Figma’s setting will translate to the following piece of code:

LayoutGrid(
  ...
  rowsParams: RowsParams(
    count: 5, 
  ),
)

Note: Do not pass the count parameter if you want to imitate Figma’s Auto Count option.

Arrangement

Above Figma’s setting will translate to the following piece of code:

LayoutGrid(
  ...
  rowsParams: RowsParams(
    arrangement: RowsArrangement.center,  
  ),
)

Here is a table with corresponding arrangements

Color

Above Figma’s setting will translate to the following piece of code:

LayoutGrid(
  ...
  rowsParams: RowsParams(
    color: const Color(0xFFFF6500).withOpacity(0.10),  
  ),
)

Distance parameters — Height, Gutter, Offset & Margin

Above Figma’s setting will translate to the following piece of code:

LayoutGrid(
  ...
  rowsParams: RowsParams(
    offset: 24,
    height: 16,
    gutter: 32,  
  ),
)

Note: Margin parameter is available only for Stretch arrangement so it is not visible in the example

… and obviously, as it is Figma, you are able to combine multiple layouts.

Extras

• Most likely you will be using LayoutGrid just like in the above snippets, but there is a possibility to pass your own LayoutGridController and manage its lifecycle to have even more control over overlays and be able to use it multiple times within a single page.
• The package allows for avoiding the device’s intrusions for a specific layout. Each of the three layers has optional SafeAreaParams within which you can pass what SafeArea parts should be handled. The available options are top, bottom, left, and right which correspond to Flutter’s SafeArea parameters with the same names. By default this feature is disabled.
• For more information head to the API documentation or try out the example app.

Final thoughts

Figma layout grid serves as an auxiliary package that can be really useful not only in high-end products but also in casual ones. It provides an optimal way to see whether the UI matches the design file without using the widget inspector or other developer tools. It is easy to plug in and convenient to use. Enjoy!