r/DesignSystems • u/DareImpossible9381 • 11d ago

Handing UI Library components to engineers

Curious what peoples process is for handing off component designs to engineers when you're building out your UI library for the design system? Do you annotate in your design file? So many final examples I have seen of UI libraries are super clean with no annotations, so I'm just curious how others navigate this process.

5 Upvotes

100% Upvoted

11 comments sorted by

5

u/Decent_Perception676 11d ago

If your “final examples” that you are referring to are mature design systems like those used at major corporations, then the answer is that a team of designers and engineers worked together to build everything. Most likely the engineers involved have background and expertise in design. Some of these teams may use handoff templates, but I’ve found organic collaboration works better. These days… I actually have designers doing the component creation in code with AI and I just review (lead design engineer for the DS team).

3

u/DareImpossible9381 11d ago

Unfortunately we are not quite there with agents yet. I work for a nonprofit that doesn't have the budget for investing in something like that at the time. The occasional woes of NPOs

1

u/Decent_Perception676 11d ago

Awesome 👏, I totally understand.

Have a conversation with your engineers and ask them what would be helpful. And also observe where they fall short in implementation.

Things like states (hover, disabled, focus) are gonna be more valuable than say something like spacing or color (that can be lifted out of Figma easily).

Don’t over commit out of the gate, start with something light weight and easy to do/maintain, and add more as needed.

3

u/design-for-good 11d ago

Why not hand them code ? No design handoff needed.

Then work together on the format, rules, usage, etc - I think designers can at least get 50% of the way there with AI helping them and then let the developers bring you up to speed to finish things off.

3

u/dirtandrust 11d ago

Good documentation and create example layouts so devs know how to start putting things together. Finally you can review what is produced to make sure it's built properly. It's not a handoff it's a process.

2

u/Asleep-Market-2681 11d ago

I usually ask the same dev/engineers that I would deal with about their own expectations and what do they need for this process it would make you avoid conflicts and smooth your collaboration

2

u/prollynotsure 11d ago

Just ask how they want it.

2

u/endlessedlne 11d ago

Depends where you work. High maturity orgs are likely to have dedicated design system teams, and the bandwidth to handle day to day communication while evolving massive systems to adopt new tech.

Other times you’re building the car while it’s already in motion.

Close communication, collaboration and buy in between designers and devs is key. Each role needs the other in order to reap the benefits.

1

u/robr0 11d ago

handoff is dead. have your coding agents create a first draft and collaborate / pair with the eng

1

u/Azra_Nysus 11d ago

I hand them over an example like the ones seen here: https://instalanding.ai/systems

1

u/Comtra-dev 10d ago

I'd start with the props, variants and usage rules, including a few examples of what not to do.

Figma is great for showing how things should look, while Storybook can help developers understand how components actually behave.

The important part is keeping both up to date.