3 Ways Developers Can Benefit from Designs in InVision

There is a division that can form between the roles of design and development when building digital products. This division is often exacerbated by tools that are designed to meet the needs of one party or the other — Visual Studio for developers, Sketch for designers. Yarn package manager for developers, Font Awesome 5 for designers.

Rarely do you find a tool that helps bridge the gap between product design and development.

Here at Learning.com, our lead designer, Linda, has been exploring several of the amazing digital product design tools available through InVision Cloud. Because I am a programmer on one of our development teams, I didn’t initially see how their suite of tools could impact my work. However, during a recent meeting I had with Linda, she eagerly introduced me to one of the features she had discovered inside of InVision’s prototypes — the Inspect Mode.

What is InVision’s Inspect Mode?

When you upload a prototype to InVision and select an individual screen, there is an action bar that appears at the bottom of the view. One of the options within the action bar allows you to enter Inspect Mode. Selecting this mode will expose the different layers and assets used by the designer to create the screen, similar to Photoshop or other advanced editors. Selecting a layer or asset reveals all the details related to that layer — colors, sizes, placement, assets, styles, and more.

So, what’s the big deal?

It also converts all this data into code.

Designers simply need to add their developers’ InVision accounts to a project, and voilà, they immediately have access to code generated by the Inspect Mode. While this may seem like a hidden or insignificant tool, this has dramatically changed the way I, as a developer, collaborate with Linda.

3 Benefits for Developers

1 — Saves Time

With other prototyping tools, the output of the designers’ work is in a format that is hard for developers to translate into code. Unless you’re a programmer who can pick apart photoshop files or rattle off the exact pixel dimensions of a drop shadow on sight, writing the code to exactly match the prototype is often time consuming.

With the InVision Inspect Mode, I didn’t have to spend hours fiddling with and tweaking various css properties. All the small details that the designer has already so carefully knit together to form an attractive prototype is immediately converted to code that I can easily access.

2 — Enables a Seamless Handoff

For designers, it can be very discouraging when the final conversion of their prototype to code looks very little like the original. But without a simple way of collecting all the styles that make the original so powerful, developers can become disheartened by the number of hours required to make their code reflect the prototype.

By converting the designers’ efforts into a format easily consumed by the developer, the anxieties of both parties can be alleviated. The designer can rest assured that their work is being accurately incorporated into the product, while the developers have a source of truth they can reference as they work. For our team at Learning.com, the Inspect Mode serves as a stepping stone toward our goal of blurring the lines between design and development. It is just one of the tools that enables us to pursue collaboration on projects from start to finish.

3 — Creates Opportunity

Ok, so maybe the title of this last point is a bit grandiose. But with tools like Inspect that automatically generate the code I need, I see several opportunities created.

1. I get time back. This creates opportunity for me to collaborate with others and adds some margin for me to complete other work.
2. I have seen new and different code solutions that I had not considered.
3. I can continue to improve my eye for design by seeing how a designer’s prototype breaks down to code.

What’s Next?

Learning.com is a smaller company and we are still working hard to get our own design system fully fleshed out. But tools like the InVision Inspect Mode have helped bridge the divide between our design and development processes; hopefully it can bridge the gap for your team too.

We are now experimenting with InVision’s newer tools such as Studio and DSM. In the future, it would be awesome to see if InVision can extend the Inspect Mode to provide the code for animations and transitions generated from the timeline.

Ultimately these tools have allowed our development teams at Learning.com to continue to focus on what matters to us the most — providing quality digital literacy curriculum to equip teachers and students to succeed.