0

I'm currently pulling a small set of assets from a large design system and I'm conflicted about the best way to organize design files with interactions for developer hand-off.

For example, I have a log-in flow that includes input fields that change when they are clicked and filled in and also buttons that have a default, pressed, hover, and disabled state. Here are the options that it seems like there are.

  1. Designing a mocked-up new screen with each interaction state.
  2. Show the multiple interaction states contextually in the design file next. i.e. Show every state of buttons next to the one shown in the mocked-up screen as an annotation.
  3. Link the dev to the larger design system and annotate with text the interactions in the design file

If anyone has advice or anecdotes from handing over designs it would be very helpful.

1
  • Is the design system documented? If so, is the documentation adequate? Many developers are used to working off a link to the documentation and there's not a need to replicate that in detail elsewhere.
    – Izquierdo
    Aug 15, 2022 at 21:20

2 Answers 2

0

The best way to reduce the amount of hand-over required from design to development is to have a tightly coupled process flow and source of truth, which can typically be implemented as a design system that has code embedded in the interface (an example is Storybook), which includes assets that can be downloaded for the designer to use.

But it looks like in this case you don't have something like this in place, so the next best thing is to have a set of general rules defined in the design system that specifically deals with the behaviour of the different types/classes of components, and then for components that have very specific micro-interactions you can define them with the documentation for that component.

This creates a clear hierarchy of behaviour that can cascade down logically (which is how is would be implemented in code), which allows for ease of design, implementation and also maintenance.

0

We use the Zeplin app as our source of truth, where you can annotate, requirements, interactions, APIs and such for components and page layouts.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.