Syncing Designers and Developers With Less Hassle

It’s a well known fact that an inspiring user experience is built on great product, which requires both intuitive design and quality code. While these two parts of product development have traditionally been treated as separate parts of a whole process, the modern era of software development requires more collaboration, iteration, and innovation than ever before.

In this article we’ll see how to close the gap between design and engineering, and make it easier for them to work together.

Foundations to Successful Design Implementation

Design implementation should be without the headaches. Everyone on the team should be on the same page for every design change.

Designer-Developer Collaboration

Collaboration between designers and developers on any design project is essential for creating a beautiful, yet functional design. The question really starts to become less about why designers and developers should work together, but how they can better work and understand the responsibilities of the other.

Perhaps, the most important question to ask – is what we’re designing being developed? Developers often don’t have enough detailed information about the visual design, which causes visual inconsistencies and developer’s best guesses.

For example, a designer might have a very specific reason why the text is bold in one area or an image isn’t exactly centered on a screen. Developers don’t necessarily understand the reason and might overlook those details if they just eyeball the design.

Fast Reaction on Frequently Updated Requirements

Throughout any design process, there’s an extensive amount of deliverables that project managers share with the client.

When things inevitably need to change, all design changes need to be re-communicated back to developers. The back and forth game can be seemingly endless changes, feedback, and even the smallest edits can be time consuming.

However, we must be able to respond quickly to feedback about our designs as it flows from all directions during our agile process – from clients and from our product managers. This means each minor revision in a prototype’s UI by a design team needs to be reflected in current documentation so that developers always have the latest.

Task Management

Management need to stay on top of the design process – tracking progress and providing feedback on what has changed and where. The most important goal is to ensure that interface design and vision translates properly from the design to the development process.

So how would you go about improving the working relationship between developers and designers?

Introducing More Interactive and Collaborative Approach

Your team is most productive when your entire design workflow is in one place from start to finish. That’s why we shouldn’t separate design from development, instead we should integrate two entities together into a single workflow.

It’s a good idea to bring your design workflow right inside the development tool your team already relies on. At first glance, the task seems to be very complicated.

How InVision + JIRA Simplifies the Design-Development Process

Hopefully, you don’t have to reinvent the wheel. You can use familiar tools such as Atlassian JIRA (as a task management tool for the product backlog) and InVision (as a vehicle for presenting the progress of the design to the stakeholders). Integration between InVision and Atlassian JIRA breaks down a similar barrier for engineers and designers – it encourages a more seamless and iterative collaboration process between them.

Design-Driven Project Management

InVision for JIRA enables design teams to sync design prototypes with the development tool your engineering team depends on. Simply pair an InVision prototype with a JIRA issue, and everyone in your team can see what’s being worked on and get real-time information about the design.

You can pair an InVision prototype with a JIRA issue by doing the following:

  1. If your team is using InVision as your product design tool, simply go to the Atlassian Marketplace and install the free InVision for JIRA add-on to your team’s account.
  2. Once the integration is installed, grab a share link from your InVision prototype.
  3. In a JIRA issue, paste the share link into the InVision component.


Pair an InVision prototype with any JIRA issue.

That’s it! You’ll see a thumbnail preview of your design, along with valuable information about your prototype: handy links to Preview, Comments, and Inspect (InVision’s design-to-development tool). Now you can manage your prototype from one single location, quickly see unread comments, preview screens, and all your team members will be notified when changes to prototype are made.


Give every issue instant context with always up-to-date design access.

Why Your Team Should Make the Move

Working with InVision and JIRA has many advantages. Here are some examples:

Avoid Tedious Handoff – See What You’re Working On

The phrase “A picture is worth a thousand words” means that a complex idea can be conveyed with just a single still image. However, in design and development, the picture changes too often. If a picture is outdated, this could lead either to errors or the loss of precious development time.

InVision brings live screens right into your existing conversations and workflows. A very important moment is that the share link is dynamic, so any time you make changes to the prototype in InVision, they’ll be reflected in the JIRA issue. Designers don’t have to hassle with updating JIRA issues for every design change, and the development team is kept completely in sync with the designer’s progress. Yes, you can get details about your prototype in real time! In fact, everyone on your team can see what’s being worked on and get real-time information about the design.


Everyone can always be up to date, along with your designs.

If you tweak a design, it’s no problem. Within JIRA, next to the thumbnail of your prototype, you’ll see a “Last updated” meta information area. This helps product managers stay sane as design and development are connected in one organized place.

Establish Clear Communications

Collaboration between designers and developers is essential to the success of a project, and it’s a measure of a team’s success. When you speak the same language, you build better products.

Sharing a prototype and collecting feedback on it is just as important as building one in the first place. JIRA’s interactive approach also provides more ways for designers to collaborate with developers about the prototype’s details. It’s a safe place where designers and developers can ask each other tough questions about our designs.

The tool’s annotation features allow you to comment on specific parts of the app and use this work as a roadmap. It also helps clear up any potentially confusing parts of the process and keep a record of notes that’s available for anyone to review as needed.

The Comment button opens a new browser tab with InVision’s comment mode of a prototype. Engineers can quickly provide annotated feedback directly on prototypes.

Iterating Quickly: Design & Code Together


Launch Inspect with a single slick, for an in-depth look at the design.

When it’s time to start building, try Inspect. Inspect continues to streamline the development cycle by automatically recording and displaying all the important details a developer needs within a prototype. With a single click, you’ll have rich access to your design’s measurements, colors, assets, and more-right inside your browser.

The best thing about using InVision Inspect is it provides a living, breathing, interactive specification sheet. Next time someone files a vague “make the button bigger” issue, you’ll know exactly how big they mean.


No longer provide your developers with clunky, difficult to understand, flat specs that take forever to generate. Dive in design details with Inspect.

The pairing of Inspect and Atlassian JIRA enables engineering and design teams to collaborate at breakneck speed directly through the JIRA dashboard. This means that you no longer have to wait until the very end of the design process to give specs to your developers. Instead, you can bring in developers earlier in the process and iterate as much as you want.

What Can InVision for JIRA Do Better?

So far InVision for JIRA has been very responsive to feature suggestions.

I echo the need for multiple links to the designs (e.g. mobile and desktop designers for the same app), which is one of the top voted feature requests on the JIRA Marketplace. Right now you have only one link to the design option in the JIRA ticket.

Another feature that has potential is giving users a way to show a preview in JIRA of individual screens (e.g. a certain view). Currently, inline preview in JIRA task always shows the first page of the prototype.

Last but not least, the InVision for JIRA add-on is currently available for JIRA Cloud only. JIRA Server Edition support isn’t available right now, but many enterprise companies don’t use cloud.

These features aren’t available right now, but InVision’s team is exploring the possibility to add them in the near future.

Conclusion

Just like sales and marketing teams used advances in technology to work better together a decade ago, today development and design teams are working together in exciting, innovative ways. We now have the tool to quickly and accurately translate the vision of an app (its design) into the No. 1 development tool.

Atlassian and InVision are improving communication between design and development — making the workflow more iterative and effective. InVision for JIRA lets designers, PMs, and developers easily switch between platforms to make sure everything is accurate and up to date.

This interactive approach to creating products allows us to spend more time on what’s important — creating beautiful and functional designs and making sure users have the best possible app experience.

Try it!

The tool is an indispensable part of our agile product development process. InVision for JIRA is available right now in the Atlassian Marketplace.

6 Comments

  1. Kris Kim

    Love this discussion. So many helpful tips.

  2. Tyler Townley

    I’ve been testing out a new system with our engineering team.

    We support iOS and Android so we’re creating assets for multiple teams. To keep things organized we talk between the iOS, Android and Product team to plan how assets will be usedcl before we start production (5 minute whiteboard gets everyone on the same page).

    Dropbox repository for the project contains:

    Image alt

    Company UI Styleguide
    Project mockups for both Android and iOS
    Annotations for each screen (every engineer is different and I’ve come to understand what works best for my team)
    Exported assets for all resolutions
    Prototype to help communicate motion if needed

    Github:

    Image alt

    Each designer has access to the GitHub repository for their respective team/project
    The design branches and uploads their own assets (this prevents issues with naming conventions and acts as a way to double check that all assets are accounted for)
    An engineer does a PR and pulls in the updates

    This is the new part of our process that we’re slowly rolling out to the company… still in beta mode. I’ve found it to be a bit of a learning curve, but our engineers LOVE it. It empowers our design team and encourages our engineering team to venture into the design world as well.

    Our engineers bring the work to life, I want to be in tune with their process. This has been a great first step in that direction. Not to mention it speeds the process up x10 if something needs to be updated.
    3 points

  3. Spencer Holtaway

    I share the PSD with my front end person and we assess what they’ll “draw” in code and what I’ll slice as bitmaps for them.

    We’ll identify assets that are the same shape and size but different colors and if there’s a lot of color themes in the app/feature I’ll slice those out once in black and front end person will specify the colors for those in code, to match the color themes.

    We’ll identify which slices will require transparent padding and which ones don’t. Same goes for 9 patches.

    I’ll make a “slice sheet” PSD that contains all of the slices so we know what I have and haven’t sliced. All of the layers in the slice doc are named per the end file name that front end person will use in the app. This makes re-slicing and keeping account of every asset easy.

    All of my slices go out in their respective folders per screen density, etc.

    So, in the end, we do a lot for each other to make it work best for the app, and the both of us in the long run.

    EDIT: you also asked about “do you use a plugin?”: I use the photoshop extract assets as much as possible. It really useful for automating out all of the different assets for different screen densities

  4. John

    Great article as always

  5. test

    test

  6. Randy

    love this !!!

Leave a Comment

Your email address will not be published. Required fields are marked *