How to sync designer-developer tools for easy collaboration

4 min read
Lizzie de Cantor
  •  Oct 7, 2019
Link copied to clipboard

There are points in the product delivery cycle where projects are at high risk to slow down or derail—with handoff being the riskiest. When design teams are getting close to wrapping their work and development is gearing up to build, friction and blindspots for functional differences can cause slowdowns that put a project’s success in jeopardy.

“But there’s a tool for that!” you might be screaming at your computer. If so, you’re right—there are many. None of which succeed in linking project management, design, dev,  and all your other stakeholder workflows together seamlessly.

As my position has me working with design, development, marketing, and customer-facing teams daily, this pain point is real for me. I keep asking myself: if each different function requires different toolsets to arrive at a single, live product, how can these functions stay in sync?

It starts with integrating tools—respecting every team’s workflow (and toolkit) and helping them meet each other at preset junctures. Helping create a mutual language built on commonalities. Taking advantage of what’s already working.

InVision’s design, development, and product management workflows stay connected through a simple Jira integration. We can surface inspectable InVision prototypes directly within a Jira task, giving developers and designers a straight line of communication without ever leaving their preferred workflows.

This is what our process looks like, step-by-step.

Designers: Copy and paste a link once, instead of back-and-forth with redlines.

Once your design team has enabled the integration for Jira, you can share a preview of their prototype along with spec information through a share link. This link updates in realtime for both parties. Anything you change will be visible to a developer instantly, and any comments they provide will also get to you in realtime within InVision.

</ br>

Here’s how to make it work for your team.

    1. Within InVision, create a share link to the prototype you would like to share.
    1. Paste the copied share link directly into a Jira task under the InVision section.

</ br>

*Reminder: to make this work, install the app from the Jira Marketplace.

</ br>

    1. The live prototype automatically populates inside of Jira with the option to sign in or continue as a guest to view for your developers.

</ br>

  1. Developers can now play, comment, and Inspect your InVision prototypes all from within Jira.

Developers: Collect the information you need from the sources you trust.

The linked prototype that automatically populates in Jira gives developers multiple information sources to collaborate and build better products based on what’s handed off from design. You can toggle between three different modes within the linked prototype that are described below.

Try out Inspect to make collaboration a breeze.

Play mode

Play mode allows you to interact with the prototype—screen transitions, animations, button interaction—as it should behave when it’s live.

</ br>

Comment mode

Comment mode lets you give you design team feedback directly in their file. Any comment you leave from the prototype linked to your Jira ticket will go directly to your designer’s InVision environment.

</ br>

Inspect mode

Inspect mode is where you can grab measurements, download assets, fonts, color values, and whatever other technical details you need to build the design you were handed.

</ br>

To put this integration to work for your team, be sure to install the InVision app to your Jira account and make sure your developers up to speed on how to use Inspect to ease handoff.

Collaborate in real time on a digital whiteboard