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.
In the following sections we’ll look at different cases where you need to arrange layers into groups.
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.
The names of the layers do not matter, only the structure is important.
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.
When your design layers are organized into multiple columns, each column should be arranged into a separate group of its own.
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.
A group should contain either only row elements or only column elements, otherwise it will be marked as a grouping error
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.
Suffix .svg to the layer name of the parent group of SVG icon.
A bitmap image with a mask should be arranged into a group and attach the suffix
.png to the name of the group.
.png suffix is not needed for standalone bitmap layers.
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 errors which should be fixed from the web interface
In this section we will look into handling grouping errors when:
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.
You can toggle the view to show only those elements which have grouping errors by clicking the
Show only errors button.
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.
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.
The grouping error is because the
add-button.svg button icon overlaps the
book-cover.png book cover image element.
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.
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.
Show only errors button to see remaining grouping errors from the web user interface.
Let us look at the design which has now been updated to represent a 3x2 grid of book view components.
On exporting the Sketch design we’ll see that a new grouping error has appeared in the Sketch client.
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.
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.
To recap there are three possible actions for any grouping errors you will encounter in your designs: