What’s your developer handoff workflow?

Developer handoff is one of our top priorities, as a cross-domain tool. Our current implementation is quite basic, and we want to improve it as much as we can. It would be very useful if you told here your current use cases.

Do you have in your team some designers that make prototypes, and then the developers take them and convert them into working applications? How do you do it? What tools do you currently use to design and develop? Do you export the designs to some file format? Can you export styles or components? Do you have any automatic integration? How do you handle changes in design and incorporate into existing code? Do you miss some important feature or have any pain points?

Tell us! We’ll try to make it easier with Penpot.

6 Likes

Premise

  • We are a full remote team
  • 2 UI designers / 2 Web Front-End developers / a bit more native app developers

Handoff is a bit of an old fashioned way of designer/developer interaction. It is best to work asynchronously and include developers as early as possible in the process so that they are aware of what is going to come. Nonetheless I know many companies still work in a waterfall manner UX->UI->implement.

Design systems is a good example on how this can be fixed, developers don’t work on screens anymore, but they work on elements (atomic design components if you want). On top of that one can use Design tokens to reference all the options available to make a component.

We document in Confluence all of our elements and assign design tokens to each property of that element. So in theory a developer could not even see the figma file and just reference the tokens to implement the component. This is what we are aiming for.

What tools do you currently use to design and develop?
Our current Ui tool is Figma (but does Penpot is starting to sound like a great choice) and storybook to develop components.

How do you handle changes in design and incorporate into existing code?
Design tokens in a JSON as a single source of truth. If you want to win over the design systems community this should be a big priority (on top of auto layout :stuck_out_tongue: )

Do you have any automatic integration?
Figma tokens to connect to a Github repository to have a single source of truth of our design tokens.

Do you miss some important feature or have any pain points?
I’m pretty new to penpot, but I know that linking components to the documentation is really necessary when making design systems

3 Likes

I am a developer that also loves to design. I am going to be with @victorjanin here and say that Figma Tokens is what got me really excited in the last few months. This is definitely a step in direction of closing the gap between design and developer handoff.

The company I work for now has the designer hand over the Figma file for the developer to inspect and export assets etc.

4 Likes