How to fix grouping errors?

Grouping errors which should be fixed inside the Sketch design document

A grouping error happens when Codegen lacks information about the structure of your design layers. Some of these errors can be easily resolved by arranging the offending layers into groups.

Plugin Grouping Error

In the following sections we’ll look at different cases where you need to arrange layers into groups.

Group Individual Elements

The individual elements in your design are often made up of multiple layers. These layers should always be arranged into a group of their own.

In the example below the button is made up of a text layer and rectangle layer. Unless you arrange both the layers into a group, it will be a grouping error.

Group Individual Elements

The names of the layers do not matter, only the structure is important.

Group Row Elements

Multiple elements which logically constitute a row ordering should be arranged into a group. The default ordering is a single column. So if your design layers form a single column, no additional grouping is necessary.

In the design below, the two layers title (which is a text layer) and action (which is a group) together sits on a row. So they should be put inside a group.

However, the text layer description, and the group layer title + action form a single column, and so it doesn’t require any additional grouping.

Group Row Elements

Group Column Elements

When your design layers are organized into multiple columns, each column should be arranged into a separate group of its own.

Group Column 1

In the design below there are two rows. The top row is description (which is a text layer) and the bottom row consists of three column groups. You cannot mix rows and columns within the same level in your design. This is a grouping error.

By putting all three columns in the second row into a group layer Group 4 you can fix this grouping error. Now the description text layer and Group 4 group layer together form two rows.

Group Column 2

A group should contain either only row elements or only column elements, otherwise it will be marked as a grouping error

Group & Rename SVG Icons

Another common source of grouping errors are images.

For example, an icon may have several shapes overlapping each other. The remedy is to suffix the group containing all the layers with the .svg extension. Codegen will now treat the entire group and children as an image element and not a grouping error.

Group SVG Icons

Suffix .svg to the layer name of the parent group of SVG icon.

Group & Rename Masked Bitmap Images

A bitmap image with a mask should be arranged into a group and attach the suffix .png to the name of the group.

Group Masked Bitmap

The .png suffix is not needed for standalone bitmap layers.

Example: A Header Component

The following is an example of how a header component looks like after arranging into groups consisting of either a row or column ordering.

This header has a two column layout. On the left side the logo.svg forms a group and the content on the right side forms another group named right. Inside the content group there are three rows. The title + action has to be grouped into a row since there are multiple elements on the same row. The description text layer does not need a group because it is the only item on that row. Then in the final row group named 3-col again contains three columns of content.

Grouping Header Example

Grouping errors which should be fixed from the web interface

In this section we will look into handling grouping errors when:

  1. There are multiple elements overlapping each other and,
  2. There are multiple rows or columns arranged in a grid configuration

Continue with errors

Continue 1

When you click on the Continue with errors >> button, it will take you the web user interface of Codegen. But all the the grouping errors will be appear to be greyed out.

Continue 2

Show only errors

You can toggle the view to show only those elements which have grouping errors by clicking the Show only errors button.

Show only errors

In the next section we will inspect the design layers to see why this is being classified as a grouping error and then how to go about fixing it.

Handling Overlapping Elements

In the design below we see a book view component with a book cover, title, description. There is also add button icon overlapping the book cover. The layer grouping is displayed on the right side.

Overlap 1

The grouping error is because the add-button.svg button icon overlaps the book-cover.png book cover image element.

Overlap 2

This is one of the few instances where absolutely positioning the button icon relative to the book cover image is the correct way. You can easily do this from the web user interface.

In the web interface select the add button element. From the panel on the right side change the positioning from static to absolute.

You can verify that the grouping error is fixed when it is no longer visible when Show only errors button is turned on.

Overlap solved

When exporting you will still see this classified as a grouping error in the Sketch client. You can safely ignore this as long as it is not visible as a grouping error in the web interface.

Turn on Show only errors button to see remaining grouping errors from the web user interface.

Setting up a Grid

Let us look at the design which has now been updated to represent a 3x2 grid of book view components.

Grid in Sketch

On exporting the Sketch design we’ll see that a new grouping error has appeared in the Sketch client.

Grid Grouping Error

There are three groups on each row. You have both columns and rows at the same level. This is a grouping error. One way of fixing it is to follow the steps from earlier. In this case though there is a better way. Tell Codegen that these groups form a grid view. This can be easily done from the web interface.

Grid in web UI

Select the parent group which contains all the six groups and switch the element type to Grid. The number of columns is set to three and divided into equal flexible parts. The column and row gap should be set to the same values as in the design. Press Ok to finish configuring the grid view.

All three grid configuration inputs accept valid CSS values.

The grouping error will vanish from the web user interface. It will be still visible in the Sketch client when exporting the document. But like in the earlier section you can safely ignore them.

The web view will now be a proper 3x2 CSS responsive grid. In Firefox you can use the grid inspector from developer tools to verify the same. You can see the inspect view below.

Grid Solved

Summary

To recap there are three possible actions for any grouping errors you will encounter in your designs:

  1. Arrange the layers into either a row or column group
  2. Absolutely position an overlapping element
  3. Configure a grid view