Tips to improve design handoff using Sketch and InVision

In a lot of companies collaboration only happens when the designer hands off the design specs to the developer. This is wrong for so many reasons because collaboration should be a handshake, not a handoff. Designers should be collaborating with developers through the whole software development process.

Automating parts of your handoff process should free up time for more collaboration. It will also help with:

• Saving hours of manual work for designers and developers.
• Increasing in the development quality of designs.
• Completing projects quicker because specs are more accurate and easier to understand.
• Improving team skills both from a designer’s perspective and a developer’s.

We use a wide range of tools throughout our design process. I’m gonna be talking about two of these tools, Sketch and InVision. This article contains a list of tips for making the most out of these tools. Giving you more time to collaborate with developers.

We use Sketch for all our UI design. It has an interface that is intuitive, and the plugins help to power our workflow.

InVision is our one-stop shop for both prototyping and developer handoff. I’ve been using InVision for years and it is one of my favourite design tools. It works super smooth with Sketch through the Craft plugin.

The Craft Plugin in Sketch helps us to sync our designs with InVision and waste time creating specs which can automate parts of our handoff process.

If you want to know more about how Craft works with Sketch then, click here.

Tip 1: Document Structure & Layer Naming

The first of my tips is to remove unused layers and groups before uploading to InVision. Next, rename the layers so that they make sense to developers. To do this you’ll need to sit down with them to discuss how they’d like layers named and work with them.

Trust me this will help to remove confusion for developers. Not only that but it will show them that you want to make their job easier which shows that you care about them.

Tip 2: Make It Interactive

It may seem obvious but make your InVision prototypes interactive as it helps developers to clearly understand the functionality that they’re gonna build.

Tip 3: Use Inspect Mode

Using Inspect Mode turns your Sketch designs into specs in a breeze without the need of spending hours creating them. Giving developers instant access to the important details of a design such as heights, widths, colours, and even code for implementation.

Tip 4: Exporting Assets

Inspect mode is a great way to share assets with developers.

But a few weird things can happen when exporting assets through the Craft plugin. One being duplicate assets getting uploaded and the other is poor naming of assets which is sure to annoy developers.

To solve these problems we do the following:

1. We create an asset screen that gets uploaded to InVision. This is one way to ensure that only one instance of an asset is exported and it keeps up files nice and tidy.
2. We’ve spent a bit of time coming up with a naming convention for assets. You can create folder structures through the way you name assets in Sketch. Meaning when a developer downloads the assets from InVision they will get a lovely laid out folder with the assets that are easy to understand.

Tip 5: Commenting

Commenting is a great way to increase collaboration between designers and developers. It also a fantastic way of providing feedback about design decisions.

Tip 6: History Mode

Use History Mode to see previous iterations of a design for a screen.

This is great for designers, as it lets you view older versions of your work. Now you can compare and change designs without needing to upload designs.

But this feature is also good for developers too.

A developer once came to me asking if there was a way to check if the designs had changed since he last looked at them. I told the developer that there is a way to check but I asked why he wanted it? He had developed the UI for a screen but designer said it was completely wrong. But the developer was convinced that he built the right one and that the designs were not the same. We checked the history of the designs and it turned out that the designs were a few minutes old. The designer was trying to blame the developer for not building the right UI. But we were able to show that they forgot to update the designs and it wasn’t the developer’s fault. This is good because it provides ownership for designers on what they share with the team.

That’s it!

Most of these tips are about using the tool to its fullest but they will speed up and improve the handoff process with developers. Meaning you spend less time building specs and more time collaborating with other members of the team. Win-win!

Got any tips of your own?

If you’ve got any tips of your own I’d love to hear them so please reach out.