How to make your design fluid?

In this section we will see how to make your designs fluid and assign semantic tags to your design elements.

Keyboard Navigation

It is faster to use the keyboard to navigate the elements in the web interface. To begin traversal using the keyboard simply click on any element.

  • Use arrow up and arrow down to move between sibling elements.
  • Use arrow right to descend into children of the group.
  • Use arrow left to return to parent group.

Assign Tags

In the design below, you should assign either Button or Link from the element type dropdown for the FOLLOW group.

Assign Tags

The FOLLOW group is then converted to either a Button or Link based on your choice. Later even if you move the element in your Sketch design, Codegen will remember your earlier assignment.

On the other hand if you copy the FOLLOW group anywhere in the design, the new group will have to be assigned separately. If the FOLLOW is a symbol instance, every other instance will be assigned the same tag.

Centering

If you horizontally center the layers within the artboard or inside a group layer, the centering will happen in the browser as well. If centering does not work for you verify that the layer is actually aligned to center in Sketch.

Centering

Assign Width

Width

In the design below, the text layer on the second row is aligned to center and also spans multiple lines.

Design in Sketch has width

After exporting in the web interface but it is displayed as a single line of text. This the default behaviour of a block element in the web browser. A paragraph is a block element. They take up the entire width of their containers. To make it same as the above design you have to set the width property.

In browser default is no width

For that you have to click on the paragraph element. Then from the side panel you can choose either in px or in % . The in px property will set the width of the paragraph element to the same as the width of the text layer in Sketch. The in % property will set the width as a percentage of the parent layer. In this case let us pick the in px property to set the width same as that of the text layer.

Setting width

Max-width

The max-width property can be set similar to the width property. You need it for situations when you don’t want to assign a fixed width to the element. The element should never grow beyond the assigned max width, but at the same time it should be flexible that it can grow smaller. This is unlike the width property where the element is not at all flexible.

The value of max-width is set to the original layer size in the design.

Min-width

This is a useful property in combination with the max-width setting. When the browser is resized to be smaller, the element will not shrink below its min-width.

Unlike width or max-width you can assign a custom min-width value.

Confirm Padding Right

Let us revisit the example we used for configuring the grid view for book components. You can see that the grid has a horizontal padding of 60px.

Padding Right 1

After export and configuring the grid, when browser preview is resized you’ll notice that the right padding is not set.

Padding Right 2

You can turn on right padding by selecting the whole grid container and toggling Padding Right from the side panel. If you resize the browser preview you’ll see that the right padding is set. The value of right padding will be the same as that in your design.

Padding Right 3

Snap to Scale

In the design below, you can see that the horizontal padding of the button text is not symmetrical.

Snap To Scale 1

When developers write css they will regularly adjust the value to be symmetrical by picking one of the values. But in a design with several artboard and numerous components, you are bound to miss a few.

A designer implicitly works with scales for spacings, typography, colours etc. From the web interface the designer can save a white list of valid pixel values. When the Snap to Scale setting is turned on the errant values are changed to their closest value in the design scale. This reduces a ton of error prone manual effort from the developer and ensures that the CSS will always contain clean numerical values.

We already provide a default setting which you can override with your own values from the web interface.

Snap To Scale 2

Without snapping the CSS generated will be:

margin-left: 20px;
margin-right: 19px;

In the default scale we provide the nearest scale value the above is 16px . So when you turn on Snap to Scale the CSS generated will be normalised into:

margin-left: 16px;
margin-right: 16px;

It is in our roadmap to extend this feature to also cover other custom values like text colours, background colours, font sizes, line heights etc.

Codegen makes transferring the designers scale to the CSS the developer will use and modify an explicit, rather than implicit process. This results in a higher quality always compared to manual effort.