Design handoffs that specify design system standards
About three years ago we started to build a unified and shared design language at ResearchGate. What started with standardizing basic design tokens like colors, fonts and drop shadows quickly evolved into an ecosystem of libraries, workflows and tools managed and maintained by a dedicated Design System and Operations team.
ResearchGate caters to a monthly audience of over 60 million readers and 15 million registered scientists through numerous different product offerings and countless use cases. Aiming to serve a delightful user experience for this breadth of scenarios in an efficient manner we created Nova, our design system. Among the many benefits that unfolded since Nova’s first release, most importantly, Nova’s unified design language streamlined the way stakeholders communicate about design. Everyone involved in the lifecycle of design tasks and projects adopted our shared design vocabulary, which in turn simplified the collaboration of people across different functions.
A critical moment in our collaboration is how designers share design deliverables and briefings with engineers. Unfortunately, in terms of referring to design system components, this step became a breaking point. Using conventional handoff tools would result in the loss of meaningful information about the specific design standards used in a design. In the absence of any explicit descriptions, engineers often needed to guess components and detailed specifications — which complicated collaboration significantly.
Problem — The loss of information
Nova is what’s commonly known as an open design system. It hides away technical complexity and high configurability behind multiple layers of abstraction. While the flexibility of an open design system allows us to successfully provide and maintain a maximum number of component configurations, it lacks the simplicity of closed systems that focus on addressing a smaller range of specific use cases.
For example, when configuring a Nova button, any combination of the four main properties (such as color, size, radius and theme) will result in more than 200 valid button specifications. Meanwhile, conventional design handoff tools are not able to understand and convey the specifics of such complex design system components — and at this point, Nova hosts over 40 them. Regular design deliverables would be constructed with dozens of these components in varying configurations. This complexity makes it virtually impossible for engineers to “manually” read a design deliverable and translate it into code. Without detailed design system-aware specs, all information about the use of standards would be lost at the point of exporting handoff files from Sketch.
The consequence of underspecified design handoffs is a very poor developer experience.
Solution — Smart handoffs that do speak design language
Nova’s principles and architecture are tailored to the specific needs of ResearchGate. In fact, we didn’t expect any conventional design handoff solution to match our unique requirements. Instead, we’ve created our own solution that seamlessly integrates with existing workflows.
Available as a plugin for Sketch, our solution allows exporting of design specs with a single click. The result is a shareable HTML file that allows the design work to be inspected when opened in a browser. Engineers and other stakeholders are able to discover any aspect of the design work and find all relevant design system information at a glance. Colors, fonts, radiuses and other design tokens are translated to their corresponding aliases. This, in turn, simplifies their usage with provided APIs.
Every design system component included in the design is marked as such, making it easy to distinguish between what’s already covered by standards and what’s meant to become a custom implementation. Next to a list of component properties JSX code snippets allow engineers to seamlessly translate designs into code conforming with Nova standards.
Conclusion
Today, after investing about two years of continuous development into our tooling, Nova’s code library is the single source of truth for both engineers and designers. Designers render components into Sketch directly from the codebase, allowing them to access the most up-to-date resources of the Design System at any given point in time. Specific details about what components were placed by the designer and what component configuration was chosen are replayed for engineers in the design handoff.
We bridged a massive missing link in our workflow by being able to preserve and forward information about design system usage throughout the entire design and engineering lifecycle. Engineers are now able to find all necessary information to identify and use design standards right at their fingertips — which is making translating designs into code a one click effort (literally).
Our investments in custom handoff tooling have allowed us to vastly increase the efficiency of teams and improve the overall developer experience when working with our design system.
Next up, we are working on the integration of copy briefings and accessibility specifications to finally turn design handoffs into a one-stop-shop experience for engineers.
Stay tuned.
By Roland Lösslein, Design Systems Lead, ResearchGate
https://twitter.com/weaintplastic
and Christian Gaillard, Head of Design, ResearchGate
https://twitter.com/uxchg
