Designed a handoff guide for UX and now I'm planning a similar document for developers
I’m sure this happens everywhere but at work we have this issue that no website we develop ends up looking like the original design. So I was tasked with doing a guide to close that gap between design and development.
So the designer guide was focused on how to better communicate some of the details or concepts. Provided components for base variables such as color or typography. But that’s finished so it’s all good.
Now, I’m doing the same, but for front end developers. And I’m struggling with how to tackle this. This is the outline I have.
Figma:
- Layers
- Local styles
Accessibility
- Titles
- Headings
- Alt Text
- Focus state
Any tips or good talking points to include? I'm a designer first, web developer second so I tend to second guess what I think might be useful.
Most of the department works with VUE so I tagged it.
13 Replies
you forgot enable states and, for some elements, checked/open states
for example, a custom checkbox should take into account the hover, checked and disabled states
you mentioned titles and headings, but typography should be more complete than that
Thanks, I'll be sure to include those.
by the way, if you can, also include somewhere with a quick reference to all the colors you used, and identify them as well (text, border, ...), if it makes sense
Not what you asked for but just sounds like the developers aren't that great at their job
You have a full figma mockup with desktop, tablet, mobile versions? 100% developers should be able to develop from that, unless the design has specific design elements that are hard to code out, in which case the developers should be communicating that with the designers
Have you talked with the developers to see where they get stuck at?
mockups are everything, but aren't enough
Nope, they are 100% remote so I haven't even meet half of them.
We are understaffed so the devs are streched thin :/
Ah that sucks. I think you're most valuable answers will come from your developers
If they're stretched too thin they could just not be paying attention to the small details too which is the most important imo
looking at small details all day long gets mentally draining really quickly
if you can quickly put aside some information, it will help everybody
Yeah, thats why my first approach was about teaching the design team how to design better handoffs
do you clean up all the "garbage" you won't be use, before you handoff the design?
I can't speak for the whole design team but I would say they are fairly polished and clear.
that's good
Thanks for the interest and comments. Any other tip for the developer team would be great for my presentation
Thanks for all your answers, I'll mark the post as SOLVED 🫰