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?
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 )
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
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.
Right now, we try to get an iteration of the design exported to a gitlab issue via GitLab.org / gitlab-figma-plugin · GitLab and possibly have a discussion/iteration there.
I usually also implement it from there, but at some point you always end up in figma, as you might need to check which color/spacing something has etc.
As a team 4 front-end, 2 back-end, 2 QA specialist and single ui ux designer, we are using Zeplin as the main hand-off tool. I am using Adobe XD as the ui design tool which is not great at delivering designs to someone who needs to work on. Zeplin offers detailed specs about design, style guides, creating flows whose are good features while communicating developers. I tried to integrate Storybook to our hand-off process however it did not happened.
I have developed https://luisa.cloud/ which uses some low-code ideas to make the hand-off easier. In best case, one simply has to write the business code. Next target is to support also Penpot!
Thanks for your responses! We’ll incorporate all this into our research. We at Kaleidos also have some experience with design systems, storybook and such techniques. But want to develop something as goood as possible (after we finish auto layout and new components model).
In my team at my previous job I used figma. I structured my files design-systems style, similar to dev’s component libraries are structured. I invited devs to the files.
Do you have in your team some designers that make prototypes, and then the developers take them and convert them into working applications? A: -ish… I created components in figma, then created designs that used the components. The devs created the components and then assembled the page design from them
How do you do it? What tools do you currently use to design and develop? A: Designers used figma; devs vue.js
Do you export the designs to some file format? Can you export styles or components? Do you have any automatic integration? A: No, I think we had a token list with colors, distances and overlays that pointed out paddings, margins etc. but not a file format. Devs would need to create their own files for their code styles anyway, so it would not have been that useful.
How do you handle changes in design and incorporate into existing code? A: For changes in existing code, I would create an issue on phabricator, describe the change and attach a screenshot. If the change could not be easily described I would share the designs on figma, mabye on an extra page where I could add more comments and overlay than in the “main” component file
)