Handoff!
The fine line between designers and developers.
An exploration of what I've learned from working with developers who have very different mindsets.
The first time
I remember the first time I closely collaborated with a developer.
That was the Photoshop era. I guess Figma was also there at that time, but not widely used in my then company.
After countless back-and-forth feedback calls with the help of the Marvel App and locking the designs as final, my team leader told to me hand over the Photoshop file to the lead developer.
I got scared and excited because you know, a PSD design file layer inspection can be tricky and I’m not that close to the developer. So I named every layer 🫣.
Then as a final nail in the coffin, grouped each section and even color-coded. Then used the lock key. Pressed Ctrl+S countless times and reopened the file to confirm.
After sending the file to the developer I walked towards him to confirm he got the file and all ok. But he was busy. To them, it was just another project. But for me, it was my first time and I was worried about the result.
Anyway, I got engaged with other things but after a few hours he called me and the whole dev team laughed (in a friendly way). I thought, uh oh… something happened. Anyway I reached to their desk and wondered. After the laughter he asked, why I locked everything and how to navigate between layers? Why is it all different?
He was like, he got a present but he can't open it or explore it.
I immediately realized what had happened. I over-complicated things. They are not hardcore Photoshop users and they are not used to an organized file system.
In a scenario like this, there is not 100% correct way.
If you want to name your layer, name them, if you don't want then, no. Practise what makes the job easier and time efficient.
Then I relaxed and practiced the way of handing over the PSD by grouping by section only. No issues were reported from there.
After a few months, I got to know about Avocode1. From there I used to hand over PSD files via this tool and it really helped the developer in the overall handoff experience.
Then the XD era came. By this period, I think all the developers are used to this handoff style and consider this normal. I mean this or Figma.
Opinion and thoughts
These are all just tools. Find out how developers see things.
Don’t overcomplicate the handoff with a lot of content here and there.
Don’t assume that once you finished the design file and invited the dev to the file the handoff is completed. That is the worst thing a designer can do.
Most of the developers don't care about the nitty-gritty things of your design.
They don't even see the hover effect you used. This doesn't mean that you need to document each and everything. I mean it is a good practice but most of them are not going to read all that. Everyone is probably on a tight timeline.
Never use a blame game, like “It is in the design, I don't know what happened”. (I used to do this, but it never brought anything to the table, now I prefer to closely work with the dev team).
My style is I just randomly invite the dev to the file and ask for feedback and suggestions. Then on a call describe “somethings” I planned here and there, with examples (most of the time). Just to give a heads-up. Once the core design is built, I follow up with the little details. Otherwise, what’s the point of wasting tightly scheduled time to figure out “how to do this hover effect/transition?”
Some developers only think in binary. I mean they ask “It’s working right?” or “It works on my system”, sentences like that, really got on my nerves, but I realized there was no point in a fight. That’s the last thing this industry needs. Simply work with them to address the issue.
Help them to find the bugs. Because most of them don't do unit tests (they never have the time for that).
Even when we list out bugs, always consider to set priority.
I worked with a few super developers in my experience and I learned a lot. I started to use multi cascader at the suggestion of a developer and it is the best for small use cases.
I found out that they prefer an icon library so started to use publicly available icon sets for reducing the size and asset counts.
It is important to note that, they think like a “developer”. I mean when we as a designer see a bento grid and are excited about the way it looks on a big screen, they usually think about how this is going to be in <720 breakpoint.
Framer helped me to identify a lot of designer-developer gaps.
As a designer, we create buttons by wrapping a text layer in a frame and adjusting the padding. But after the introduction of components and instances, I can see how a dev sees a button.
It is important to name the typography hierarchy and colors used.
While using an illustration or icon, maintain the consistency of the style used.
Ask them if they have any confusion with the way drop shadow works.
They are probably not worried about the business part of the product. Instead, they think, it is working when I click here. So it is important to help them to learn the business side of a design process.
Send them the useful tools and tricks you stumbled upon. Like for example
And much more. I will update each one as I remember from now onwards.
This product is now ended. Sadly, they didn't pivot to something better.