DevUx Toolbox

Have the designer working in parallel of the developers.

The ideal project start to have developers and designers roadmaps synchronised.

For designers to have at least one feature ready in advanced for developers to work on during development cycles, you need to give them a head start when beginning a project: allow time for the designer to do user research, create the design system and prepare the first mockups. You can have your lead developer work in parallel of the designer to provide technical insights while they unblock technical dependencies and set up the project code base.

What a handoff tool should provide developers with:

• a mockup inspector to get margin/padding between components, sizes, style properties
• downloadable assets
• a reference to constants (colors...) or components used throughout the project

Tools that we've been using:

Zeplin is our recommended tool for handoff

We work with InVision because of their interesting free plan and prototyping app

Figma is also a nice solution that allows designer to collaborate on the same mockups and design system. It's a full web alternative that does not require sketch to create mockups. Figma also allows handoff to developers, and mockups will always be up to date.

Avocode, Abstract, MarvelApp are also good alternatives

If you are not sure which one to use, you can check our comparative article:

Zeplin vs InVision? The best tool for design handoff

Designers can use Craft Data plugin for Sketch to import data from an API or simply copy/paste a set of data to use inside their mockups.

It's very useful when populating tables or lists.

Designer should get a set of data that covers all edge cases. Developers can help providing such data.

For Figma users, the ContentReel plugin might be useful as well.