3 votes

Designer to Developer Handoff Process

I am a fullstack developer that spends a good portion of my time building out complex User Interfaces, and the rest building out back-ends for that software. In my opinion the current method that my company uses for a designer to developer hand off is a bit lacking in efficiency.

The current method is usually a designer will provide a developer with a Photoshop (or very occasionally an Illustrator) file containing the entire applications design. It is then up to the developer to export assets (both quick exporting things as pngs, going through and separating shadows from assets, or creating assets from the layers provided) and dig through the file to determine fonts and placement of items.

Is it a common expectation that a developer should be spending a good chunk of time in Adobe on asset manipulation?

Additionally does anyone have any process or program suggestions that may make life easier?

5 comments

  1. [2]
    stu2b50
    Link
    This is what is making Figma blow up (although you'll have to convince your company to buy licenses for everyone).

    This is what is making Figma blow up (although you'll have to convince your company to buy licenses for everyone).

    2 votes
    1. wikirobot
      Link Parent
      Figma definitely looks nice, I may need to give it a go on a personal project. I do think I would have a lot of trouble convincing them that we should switch systems though...

      Figma definitely looks nice, I may need to give it a go on a personal project.

      I do think I would have a lot of trouble convincing them that we should switch systems though...

  2. cstby
    Link
    That sounds ridiculous. We use Zeplin and it makes the handoff smooth and efficient.

    That sounds ridiculous. We use Zeplin and it makes the handoff smooth and efficient.

    1 vote
  3. hamstergeddon
    Link
    I think it varies from place to place. At my previous job the designers sent me an Illustrator or Photoshop file and I'd manually extract the images while gathering the fonts, colors, and...

    I think it varies from place to place. At my previous job the designers sent me an Illustrator or Photoshop file and I'd manually extract the images while gathering the fonts, colors, and dimensions required. It was time consuming, but it did give me a better understanding of the design before I started writing code. Occasionally one of the designers (who did some light dev work) would help me out and compile that for me.

    At my current job however, our designers use Adobe XD, which gives me the option to grab images, dimensions, etc. straight from the browser. It even generates some basic CSS for me, although I rarely use that feature.

    I definitely prefer the XD way because it's way easier to reference while coding than PS/Illustrator are, plus I don't need to keep copies of Adobe's software around.

  4. pocketry
    Link
    Our designer uses Sketch (Mac only) to create the designs, then uploads them to zeplin. The developer sees css and layout in zeplin, then can download some assets. I think they really like it.

    Our designer uses Sketch (Mac only) to create the designs, then uploads them to zeplin. The developer sees css and layout in zeplin, then can download some assets. I think they really like it.