Developers would fall in love with you with this perfect Developer Handoff guide
Today, we are talking about one of the biggest problems when it comes to collaboration between Developers and Designers. It is the Design handoffs. Improper communication can waste several precious hours of your work day if you don’t have a pre-established smooth process of Handing-off the designs that you’ve made.
This is very necessary for you to be more empathetic towards your Development team. It will also help you grow in your career as a UI/UX Designer as well.
First Things First — What All do they need?
You might face 2 cases for this.
1. If you are in a Full-time role.
If you are working in a full-time role, you would have easy access to the Development team. Before starting off, it’s a good practice to ask them what all sorts of assets they need from you. It could be Spacing blocks, Image containers, Column Layouts, etc.
Setting the expectations and deliverables beforehand will tell the Developers that you care about them. That you are not just another designer who only cares about design.
In some rare cases, you might find out that the Developers don’t know how to use Figma. In that case, it’s gonna be challenging for you to get the ball rolling. You can either share a Figma Tutorial with them on Youtube that they can refer to. Or you can do what I did, educate your Developers about Figma by yourself. I used to have 1-hour long weekly sessions with the Developers to educate them on how to move around Figma and some basic things.
2. If you are a Freelancer.
It gets very important for you to provide the service to your clients if you wanna keep on getting more projects from them in the future. And Developers in the client team are also your client in a way. So you gotta think of them as well.
Although, you might not have easy access to the Developers. You might just be handed a project and told to design that. Here’s your only bet is to UnderPromise and OverDeliver.
Underpromise and Overdeliver in the early stages of your freelance career is like a steroid to your (Freelance) business.
So here are all the assets that you need to provide to Developers:
✅Style Guide
✅Typography Guide
✅Components Library — Buttons, Icons, other UI elements etc.
- Make sure that all your components and styles are following a particular nomenclature. Don’t just name your styles or components anything.
✅Grid System
Cherry on top
Ok, the hard part is done. Now the small things that matter🤏🏻. Having these in your Design handoff system will set you apart and also make it easy for the Developers.
Naming Your Layers
It’s so obvious yet so hard for designers to properly name their layers before handing off their designs to the developers. Trust me, make a habit of naming your layers, everyone who uses your Figma file will thank you for that. And you’ll be recognized for your efforts.
Guide Page
This is the page that can act as a starting point for someone who is accessing your file for the first time. They might not know where are the screens and where are the components and everything. Having this page will make your and others' life so much easier.
For starters, you can do something like this:
Annotations
These are some notes that you place for your developers to refer to. These can tell Developers what to keep in mind before they go ahead and start actually building it.
These are not the replacement for Comments. You should be using comments for quick feedbacks and iterations alerts with your team. These Notes should be used to explain permanent things that developers need to keep in mind.
If this article added any value to your life, you can give CLAPSto this article so others can also benefit from this.
PS: You can hold CLAP button to give multiple claps. Try it!
