The slides to my talk at the Berlin Design Systems Coalition meetup early 2018. Two years ago ResearchGate established a design system to gain a consistent user experience across their products. But with its introduction it became much more complicated to handoff designs to engineering including all design system relevant information. For existing design handoff tools the design systems abstractions and underlying principles are unknown and can only be interpreted to a certain extend. This keynote will give you insights on ResearchGate’s design system architecture and their solution to create design handoffs that empower a frictionless design to engineering workflow.

1. ! Hi, I’m Rol an d

2. • UX Frontend Engineer
• Leading the Design Systems and Tooling team
at ResearchGate
• Open science platform with more than 14 million
researcher and scientist signed up
• With a team of five people we’re building a cross-
platform design system called Nova

3. • to fight inconsistency
• enable teams to build products faster
• introduce a common language to bridge the gap
• provide a delightful user experience
No va Design Syst em

4. Han do ffs with a
desi gn system in mind
How a design system almost ruined our workflow

5. design handoffs are still the most important
medium to brief engineers

6. Co mmon h andoff tools

10. a design system introduces abstractions and
principles that are unknown to design handoff tools

11. Abstraction of design tokens attributes

12. #0080FF

13. #0080FF
blu e-500

14. 2-abo ve
0 1px 6px rgba( 0,0,0,.13)

15. 0 1px 6px rgba( 0,0,0,.13)
1-abo ve

17. .some-element {
color: nova-color(‘blue-500’);
box-shadow: nova-elevation(‘1-above’);
border-radius: nova-radius(‘m’);
padding: nova-spacing(‘xl’);
}
SCSS API
SCSS

18. .some-element {
color: nova-color(‘blue-500’);
box-shadow: nova-elevation(‘1-above’);
border-radius: nova-radius(‘m’);
padding: nova-spacing(‘xl’);
}
SCSS API
.some-element {
color: #0080FF;
box-shadow: 0 0 2px rgba(0,0,0,.18);
border-radius: 2px;
padding: 30px;
}
SCSS CSS

19. import { Color } from ‘@rg/nova’;
const background = Color.getColor(‘blue-500’);
Javascri pt API

20. handoffs without the support for attribute
abstractions are problematic

21. • introduce complexity
• blocks the establishment of a
common language
• maintenance costs of design attributes
• translation overhead for engineers to
map bare values on aliases
Issues

22. Modular configurable components

23. create variations of a component by applying different
properties and choose between various compositions

24. Properties: 7 colors, 4 themes, 4 sizes, 3 widths, 6 states, 2 radii
Button
Compositions: icon, label, icon & label, label & sublime
icon & label & subline

26. more than 20.000 unique Button variants

27. “And You Thought Buttons Were Easy?”
— by @nathanacurtis
https://medium.com/eightshapes-llc/and-you-thought-buttons-were-easy-26eb5b5c1871

28. <Button color=“blue” theme=“solid” radius=“full">
<Button.Icon identifier=“user” "#
<Button.Label>Button Label"$Button.Label>
<Button.Subline>Button Label"$Button.Subline>
"$Button>
<Button theme=“ghost” color=“green”>
<Button.Label>Button Label"$Button.Label>
"$Button>
React Com ponents

29. handoffs without the support for component properties
and compositions are really problematic

30. • impossible to know which components in a
design are actually supported by the design
system
• impossible to tell how a component has to
be set up
• a functional workflow transforms into
an approach of trial and error
Issues

31. Design Engineering
Bridging the gap

32. Design Engineering
Bridging Widen the gap

33. Design Engineering
Bridging Widen the gap

34. • a tailor-made Sketch plugin to create handoffs for
designs that are built with Nova
• interactive and inspectable design handoffs that can
be shared
• translate design attributes from bare values to aliases
• interprets component properties & composites
• … and much more
No va M easure

35. Translate design attributes

37. Translate design attributes
"radius": {
"none": "0",
“m": "2px",
"l": "4px",
"xl": "6px",
"full": “9999px",
}
Attributes

38. Translate design attributes
"radius": {
"none": "0",
“m": "2px",
"l": "4px",
"xl": "6px",
"full": “9999px",
}
Attributes
"name": "Rectangle",
"style": {
"fills": [{
"color": {
"blue": 1,
"green": 0.5019,
"red": 0
},
}],
},
"fixedRadius": 6,
Sketch document

39. Translate design attributes
"radius": {
"none": "0",
“m": "2px",
"l": "4px",
"xl": "6px",
"full": “9999px",
}
Attributes
"name": "Rectangle",
"style": {
"fills": [{
"color": {
"blue": 1,
"green": 0.5019,
"red": 0
},
}],
},
"fixedRadius": 6,
Sketch document
"name": "Rectangle",
"style": {
"fills": [{
“color": “green-500”,
}],
},
"fixedRadius": “xl”,
Nova Measure

40. Interpret components

42. Interpret components
"name": “Button {theme: solid, color: yellow }“,
"style": {
"fills": [{
"color": {
"blue": 1,
"green": 0.5019,
"red": 0
},
}],
},
"fixedRadius": 6,
Sketch document

43. Interpret components
"name": “Button {theme: solid, color: yellow }“,
"style": {
"fills": [{
"color": {
"blue": 1,
"green": 0.5019,
"red": 0
},
}],
},
"fixedRadius": 6,
Sketch document
"name": “Button",
“props”: {
“theme”: “solid”,
“color”: “yellow”,
}
Nova Measure

44. Validate d esigns

45. "radius": {
"none": "0",
“m": "2px",
"l": "4px",
"xl": "6px",
"full": “9999px",
}
Attributes
Validate d esigns

46. "radius": {
"none": "0",
“m": "2px",
"l": "4px",
"xl": "6px",
"full": “9999px",
}
Attributes
"name": "Rectangle",
"style": {
"fills": [{
"color": {
"blue": 1,
"green": 0.5019,
"red": 0
},
}],
},
"fixedRadius": 12,
Sketch document
Validate d esigns

47. "radius": {
"none": "0",
“m": "2px",
"l": "4px",
"xl": "6px",
"full": “9999px",
}
Attributes
"name": "Rectangle",
"style": {
"fills": [{
"color": {
"blue": 1,
"green": 0.5019,
"red": 0
},
}],
},
"fixedRadius": 12,
Sketch document
Validate d esigns

49. very powerful to fight inconsistency where it is
usually created in the first place

50. • manual adjustment of layer names is error
prone and far from being ideal
• high initialisation and maintenance costs for
design templates
• static design templates easily get out of sync
We’re not done yet

51. • a tailor-made Sketch plugin to render components
directly from code
• establish the code base as the single source of truth
• no outdated design resources, zero maintenance
costs, no errors in designs
No va Sket ch

53. info@weaintplastic.com
@weaintplastic
Thank you!