Design handoffs with design systems in mind

• 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

• 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

Han do ffs with a
desi gn system in mind
How a design system almost ruined our workﬂow

design handoffs are still the most important
medium to brief engineers

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

Abstraction of design tokens attributes

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

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

.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

.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

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

handoffs without the support for attribute
abstractions are problematic

• 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

Modular configurable components

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

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

more than 20.000 unique Button variants

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

<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

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

• 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

Design Engineering
Bridging the gap

Design Engineering
Bridging Widen the gap

• 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

Translate design attributes
"radius": {
"none": "0",
“m": "2px",
"l": "4px",
"xl": "6px",
"full": “9999px",
}
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

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

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

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

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

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

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

• 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

• 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

info@weaintplastic.com
@weaintplastic
Thank you!

Design handoffs with design systems in mind

More Related Content

Similar to Design handoffs with design systems in mind (20)

Recently uploaded (20)

Design handoffs with design systems in mind