UI Design   •   October 1, 2020

In this week’s article we’ll explore how design becomes code using Inspect by InVision.  I’ll walk you through some of the challenges Designers and Developers have traditionally faced during this exchange. Then, I’ll discuss how you can combine a few popular tools to make the perfect handoff between design and development. Let’s get started…

Problem

The process of handing off design specs and assets to developers can be a stressful, and seemingly never-ending experience. In the past, designers have had to manually write-out the specs, drop assets into folders, email links, etc. -all of which can be extremely time consuming. In addition, developers have had to constantly chase down images, fonts, measurements, and require further clarification from the designer. As a result the collaboration can become difficult (or breakdown altogether), tension can rise, and you put yourself at risk to delay delivery.

Solution

Just as problems emerge, so do solutions and in our case, we see new tools! While there are many tools to choose from (Zeplin, Handoff, etc.) we’re going to focus on Inspect by InVision. To be transparent, I chose Inspect because of its popularity and it’s what I am the most comfortable with -I currently/actively administer an enterprise InVision account. That said, Inspect is a great way to collaborate with developers and ensure a smooth handoff.

A solid playbook

As a designer, you’ll need to have your assets organized, in repeatable patterns, and easy to access and maintain. You’ll want to spend as little time as possible maintaining the assets so you can focus on putting them into practice. This is where a design symbol library can help you. If you are unfamiliar with the power of symbol libraries, checkout my article here to learn more. In a nutshell, symbol libraries exponentially speed-up your time to deliver assets. You’ll have to sacrifice a little extra time up front but it’s well worth it in the long run. Once you have a library in place, you can assemble interfaces with ease.

Tip: Name your layers. Try following a naming convention that your developers will understand. In my example, we can see elements represented in their respective code format (e.g. H1)

Good communication

Your playbook wont do you much good if your teammates don’t know what to expect. I suggest consulting with at least one developer throughout your entire design process. Don’t keep developers guessing until it’s time to hand-off the assets. I’ve found that including developers in the initial planning meeting, and the design reviews, is a great way to ensure they know what’s coming their way.

Tip: Design System Documentation. Another great way to keep your developers, um, developing, is to document your specs online for reference. You don’t need to include everything, just the basics. 

The perfect handoff

At this point, we should have a solid playbook and a shared understanding of how to make it work. Now, it’s time to execute the play! Once your mockups/prototypes are approved, you can start handing off the design assets. In my example, I exported my design assets from Sketch into InVision via Craft. The developers can view the design in ‘Inspect’ mode and see the fonts, spacing, colors, and other specifications, as well as download images and icons -all in one place! Also without the need for the designer to document anything, the software does all of the work.

Benefits

With a perfect handoff in place, our process becomes smoother, clearer, and faster. For me personally, I have a mechanism that enables me to keep-up with an entire team of high-performing engineers. I can spend more time with my users, learning more about our products, and our Product Owners can feel confident that quality is built-in to the process. Further, with everything in one place and a common and clear vision on how to implement it is included, we’ve set ourselves up for success.

Conclusion

Now that you have an idea on how to handoff design assets to developers, it’s time to give it a shot. To get started, organize your design assets and interface patterns into a library. Then, distribute/communicate your library (and the specifications it contains) to your development team early and often. Finally, spend some time pairing with your developers and walking them through how to read the spec -regardless of what tool you are using. Until next time, thanks for reading!

Have an idea I could help with? Let’s chat! While I’m currently on assignment, I’m excited to hear about the next big thing. Email me.