justinmind

Design handoff for developers

Design-development handoff collaboration in Justinmind

Justinmind helps you facilitate the crucial moment that is designer-developer handoff and meet your product requirements. And it’s all possible remotely!

Justinmind is all about collaboration – and teamwork definitely doesn’t end after the design team has finished with their prototype. In fact, design-development handoff is perhaps one of the most important stages of the product development cycle!

Make your designer-developer handoff run smoothly with Justinmind!
Download Free

That’s why, with Justinmind, it’s free to let your developers review your prototype as well as gain instant access to specification documents and other important deliverables.

Not only is designer-developer handoff a breeze with our tool, it’s also 100% possible to do it remotely! Read on for how to add developers as users and reviewers for free in just a few clicks.

Add developers as reviewers

Developers can review and comment on your Justinmind prototype. Adding and managing developers in Justinmind is easy. After you publish your prototype to your online account, you just need to navigate to the Collaborator section, visit the developer subtab and click Create a new developer.

Adding developers as reviewers in Justinmind

You’ll notice a popup window prompting you to add your respective devoloper’s name and email. From there it’s plain sailing! Justinmind will then email your developer a .vp file (Justinmind prototype) link. The developer simply clicks on the link, enters their email, then their password and they’re ready to rock!

Add whole development teams in bulk

In Justinmind, you can add as many new developers as you like, one by one or in bulk! Let’s say you want to add an entire development team. All you need to do is create a .csv file with a list of their names and emails. Then, simply log in to your Justinmind online account, navigate to the developer section and click Import developers from CSV.

For more information on bulk importing developers with .csv files, just visit our Help Center.

Assign development teams to groups in Justinmind

You can also create a developer group in Justinmind. All you have to do is go head to the Developer Groups subtab and add a new group. Give your group a name and hit create group. A new group with the developers you added to that group will appear under Developer Groups!

Design-development handoff - create groups of developers

How developers can inspect your design elements

Let’s start with the special developer interface in Justinmind.

With the .vp file, your developers will be able to view your prototype canvas and all of its different screens, as well as important information such as the properties and CSS of each element.

In the properties palette, developers can see useful information about UI elements, such as height, width, spacing and even color codes!

In addition to that, they can select any element, instantly grab and copy the properties, as well as CSS styles to their clipboard.

Design-development handoff - see element properties and CSS

Developers can export assets

Last but not least – Justinmind helps to further empower developers by letting them export important assets they will need for their work. For example, developers can export graphics, documents and even code. Yes that’s right, Justinmind actually lets your developers export pre-determined code, HTML and CSS stylesheets from your already-designed prototype.

Graphics

Developers can export the graphic elements you used in your prototype in the form of PNGs or PNG@2X which come optimized for retina. All they have to do is click the export link!

Design-development handoff - export assets

Documents

They can also choose to export specification documents by going to the File menu and clicking Export to Document. You can then customize the prototype documentation that you export or leave it as is.

Code

Developers are able to export your prototype as HTML code as well! This will create a folder for them with everything they need to get stuck in immediately! The folder will include all the prototype assets, all the elements in each UI and all the interactive events you and your design team added.

Additionally, they’ll find a Resources section in the folder where they’ll be able to access all the Javascript, CSS and HTML code your prototype generated.

Design-development handoff - export to HTML

To explore more benefits of exporting assets from Justinmind, take a trip to our Help Center!

The wrap up

Consistent collaboration is essential, not just at the design stage, but throughout the entire product development cycle. Justinmind takes care of the design-development handoff phase, so you and your team can focus your full efforts on prototyping. Best of all: it can all be done remotely!

With Justinmind, your developers will have everything they need to start coding immediately, with a real prototype as reference.

PROTOTYPE · COMMUNICATE · VALIDATE
ALL-IN-ONE PROTOTYPING TOOL FOR WEB AND MOBILE APPS
Joseph Downs
In-house UX copy-slinger, foodie and classic motoring enthusiast