Design to Dev Handover 8 simple steps

Dimitri Nachtigal
Jan 8 · 5 min read

“8 steps for [a] designer, one giant help for the developer”

In order to save time of your colleges in the dev department and to ensure a smooth delivery process from Design to Dev it is crucial to follow just a couple of easy steps and apply simple tweaks to your working design files. If you can check all the points mentioned below you might be fine. Putting this together from a perspective of January 2019. Feel free to share or/and comment


1

Make proper design and clean your files

Make sure you …

  • work with a proper grid
  • give layers logical names
  • remove redundant groups
  • remove empty groups
  • remove hidden layers and exploration
  • make sure it is obvious what the interface should do without much explanation

Your friend:

https://github.com/ashung/automate-sketch

2

Work with Symbols and Libraries

To ensure consistency and a good team work you should work with symbols/instances and libraries if they are in place

  • Any time you use an element for a second time on a Design it MUST become a Symbol
  • If an Element already exists in your companies library make sure you work with the one and don’t reinvent the wheel
  • especially for Icons and graphics it is very important to have them as symbol
  • Never create duplicates that might be slightly different — this may be implemented exactly as you deliver to the dev-team

Your friends:

https://www.goabstract.com/
https://www.invisionapp.com/

3

Back to proper design …

Fit your layers to pixel bounds where ever it makes sense

🤓 Learn CMD+,(comma) and switch between the modes. Sometimes an uneven pixel makes sense for sure: e.g. in illustrations but usually it should be just activated when you do visual design.

Work with the “option” key to check distances in the design


4

Font styles

Sketch font styles will help you keep your designs consistent — use them as much as possible and tell your friends


5

Assets & Slices

Your developer will need your support when it comes to the implementation — the actual programming. The Spec export will be next, but first you need to prepare a little

Every icon you want to be usable for a developer needs to have a slice. I usually put my slices INTO a symbol on top of everything to be exported AND I always add a transparent layer as a background so that the Icon or any image would have a clear definition of width and height.

GOOD

  • create a symbol out of the icon (in this example it’s the icon but it can be anything)
  • create a slice of a size you need … in my example it’s a 24 dp icon
  • set up all needed formats or simply all possible if you want to be sure (PNG @1x @2x @3x, SVG, PDF, Android folders)

NOTE: what aver is set as “EXPORTABLE” will be in the delivery folder … if that is more than a developer expects he might be confused so make sure you also:

SPEAK WITH DEVELOPERS ; — )

NOT GOOD

It is not enough to simply select a group and click:

  • Sketch might have ignored the whitespace
  • the measurements and icons size is unclear and not defined
  • no clear name set up

6

Spec export

There are a couple of different tools to hand over to developers … to name a few (when working with Sketch)

  • Sketch Plugin “Sketch Measure”
  • Zeplin
  • InVision

If you followed the steps above you might be fine already for Zeplin and InVision — simply export and share with the developer … below the guidance for Sketch Measure

https://github.com/utom/sketch-measure
  1. INSTALL Utom’s Sketch Measure Plugin in Sketch
  2. SELECT Artboard(s) to be exported … can be multiple … selection can be changed later
  3. HIT “Spec Export”

4. Make settings if needed — usually the standard (Scale 1px or dp) is already the best preset! Type dp (Density independent Pixels) instead of PX to make sure the developer implements for all screen densities — especially crucial for Android or developers with not much experience.

5. hit SAVE

6. now you can change the selection you made previously …

7. hit EXPORT and simply wait until a finder window opens

  • “assets” contains all the slices you set up
  • index.html will open the inspect mode where all measurements and assets are available from
  • links — here you have all the exported pages as a html (simply ignore the “links” but don’t delete) … all pages are available from the “index”
  • Preview are simply the layouts rendered as PNG (if you would want to send out a page preview you can get it from the preview folder)

7

Optimise

The package is already final but you can get it done even better! … especially when sending the delivery through email 🙈 (sorry, but still many clients do it in 2019) you will need to shrink your file now!!!

simply drop all the folders on PNGYU and hit “Compress” the default setings are already great. All your PNG files will be much smaller but without quality loss …

http://nukesaq88.github.io/Pngyu/

8

ZIP and send out the spec with included assets

go get KEKA now : — )

https://www.keka.io/en/

Dimitri Nachtigal

Written by

Visual Designer, UX Designer, Illustrator, Motion Designer, Prototyper and Sketch Evangelist ; — )

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade