Few things to avoid in Sketch for a great design and development collaboration

Since Sketch provides a simple method to implement pixel perfect designs for interfaces, it is also important to use it in a way that the files can be accessed by collaborating designers and developers without any difficulty. The method of using various elements like text boxes, groups, symbols, layers, spacing etc… can make a lot of difference to the collaboration process.

Here’s a quick snapshot for all the things you should avoid, to create designs that are easier to understand and faster to code. Read further to know each point in detail.

Text boxes

Avoid : manually adding height for the text boxes. Let the content decide the height of the text box.
Why : extra text height when not required messes up with other layers. And it either makes it hard to know the distance between different layers or gives an incorrect information.

Example:

Don’t add height. Let the text wrap by giving it a fixed width. Makes it hard to know the placement of the three lines below the text.

Avoid creating text boxes by clicking and dragging (if the text does not need to be hidden).

Avoid : Not defining the width of the text boxes properly — either leaving extra width where it is not required or removing completely when it is.
Why : It is an important piece for information for when you’d want the text to wrap. It again may make it hard to know the distance between different layers or give an incorrect information.

If proper width is not added, developers will never know when the ‘For Volunteers’ text will wrap in case the title is longer than that.

Sign in with Google’s width is auto so that left and right spacing can be checked. For Volunteer’s text width is 216px so that if a longer title like ‘For University Volunteers’ is used, collaborators will know that the text will wrap accordingly.

Avoid: putting multiple link texts in one text box — both horizontally and vertically.
Why: makes it difficult to check the spacing between each link.
Tip: use separate text boxes for each link and group them together if needed for the ease of moving it around and changing order.

Example of horizontally putting the links in one text box.

Correct way is to create separate text boxes for links and give space between them.

Groups

Avoid : Group within group within group within group.
Why : It may help in quickly moving things around while designing but it exponentially slows the process down of accessing each element for developers. Ideal thing for handoff would be to not have any groups, where each element could be accessed with one click.

Avoid creating groups when the something can be handled without the need for any group. Reaching ‘Sign in with Google’ will require so many double clicks or search through layers.

Having one group for the entire Sign in box might be okay here.

Avoid: Grouping multiple icons, and especially without grouping each icon itself.
Why: This would make it harder for collaborators to export the icon correctly.
Tip: Group all the elements together which can be exported as a single unit.

Example: avoid grouping all the ticks and circles together. it can get more messy for complicated icons. also avoid grouping only the circles together and ticks together.

The idea is to make the design files as understandable and navigable as possible not just by designers who may have experience with Sketch tool, but also with collaborating developers.
Also, a tool’s flexibility and diverse features may be used in various ways but it is upto us to devise systems and optimum methods for smoother collaboration among various people.

This list isn’t conclusive, I shall keep updating it as I come across more cases.

Benefits of this approach:
- Lesser back and forth between design and development.
- Reduction in the time to change designs later.
- Saves cost by reducing the time to construct.