Sketch best practices

Organizing designs for effective automatic code generation and team collaboration

Objective of this document

  1. Guideline to structure and organize your Sketch file

  2. Ensure getting the best possible generated code

  3. Best practices to avoid miscommunication and improve collaboration

1. Grouping and Symbols

In order to generate the cleanest code possible, logically group your Sketch elements wherever you can. Meaning, think about what would make a component on your webpage. Make sure to create and use as my symbols as possible. Using symbols makes sure that the dimensions of your repeated elements are always consistent.

A bad example of grouping

A good example of grouping

All the items in the example above are ungrouped and placed on the same layer level. This makes your designs less readable and also difficult to generate code from.

All the items in the example above are properly organized into logical groups. This makes the `CardPortrait` group easily readable by the rest of your team and also easy to generate code from.

2. Positioning and sizing fixes

The most common mistakes we see are improperly aligned elements. This not only creates an imperfect code output but also makes your designs look "off" and unappealing. Sometimes unaligned elements confuse your developer teammates as well. Here's how to fix it:

Step 1

Use the Pixel Perfecter Sketch plugin to eliminate all the decimal pixel values on your elements

Before applying Pixel Perfecter:

After applying Pixel Perfecter:

Step 2

Make sure there are no elements that start or end outside of the bounds of the artboard. These "overflowing" elements are not captured by the code generator since they could be outside of the viewport of the web page

Bad example with overflowing elements (notice how the starting point of the group is outside of the artboard):

Good example without overflowing elements (notice how the starting point of the group is outside of the artboard):

Step 3

If you cannot move overflowing elements inside the artboard, create a slice in Sketch and replace the element with the exported PNG from the sliced layer

An overflowing element that you cannot bring inside the artboard:

Sliced, exported, and re-imported element to bring it within the bounds of the artboard:

Step 4

For any elements that have text on top of them, make sure to make a table-like view by changing their height and width. Stretch text elements horizontally and/or vertically, to occupy maximum width inside their group.

Example 1:

Before:

After:

Example 2:

Before:

After (stretch the text element horizontally and vertically to fit the button):

Step 5

Symmetrically align the elements inside a group by making sure that the left-hand side and right-hand side paddings are equal

Before (Notice that even though the width of the title and timestamp is the same, there is no padding on the right-hand side):

After (In this case, the padding on the left-hand and right-hand sides is equal. This makes up a much cleaner grid in CSS):

3. Naming conventions

Make sure to use descriptive names for all your elements, groups, symbols, and even text elements. This ensures maximum readability for your development team after generating the code.

Step 1

Rename the layers to a descriptive and readable name

Before:

After (notice the name change of the text element from "Why Re Invent The Bu" to "Title"):

Step 2

Use Pascal Case convention when there are multiple words in the layer name (every word is capitalized and there are no spaces in the names)

Before:

After (notice the name change of the text element from "6 days ago" to "PostDate"):

And that's all! :)

Using these guidelines will not only allow our algorithms to generate the cleanest possible code but also allow your team to communicate much more effectively if you rely on sharing Sketch files among them.

Cheers,

Team VanGoux