Design systems and pattern libraries help designers and developers to get a common understanding of user interfaces. But even with such tools in place, there's a ton of processes and handovers involved. Each one causing possible friction and information loss. Especially over time. This might lead to new features feeling outdated on release, and screens and mock-ups getting too old too fast. With our recent move to Angular and Sketch, we were able to automate 70% of our UI development. Helping our developers to focus on the real problems, and reducing the UI review efforts tremendously. Join us and see how we produce a single source of truth for developers and designers, and how we are able to consume this source in our tool of choice.

1. Automating UI
Development
Angular Connect 2018
@ddprrt @Ka_TriN_F

2. Slide about usKatrin Freihofner
@Ka_TriN_F
devone.at

3. Slide about usStefan Baumgartner
@ddprrt
javascript-podcast.com

7. expert groups

8. Highly specialised screens
… with lots of generic, flexible components

18. Git
Design System update
Symbols library

19. Git
Design System update
Symbols library

20. Design System update

21. Design System update

23. You might wonder
…how will this affect the product?

25. Initial idea

26. UX + design
Initial idea

27. UX + design
Initial idea
Sketch lib

28. UX + design
Initial idea
Angular
component lib
Product
code
Sketch lib

29. UX + design
Initial idea
Angular
component lib
Product
code
Sketch lib
Barista
Design System

30. UX + design
Initial idea
Angular
component lib
Product
code
Sketch lib
Barista
Design System

31. UX + design
Initial idea
Angular
component lib
Product
code
Sketch lib
Barista
Design System

32. UX + design
Initial idea
Angular
component lib
Product
code
Sketch lib
Barista
Design System

33. UX + design
Initial idea
Angular
component lib
Product
code
Sketch lib
Barista
Design System

34. UX + design
Initial idea
Angular
component lib
Product
code
Sketch lib
Barista
Design System

35. UX + design
Initial idea
Angular
component lib
Product
code
Sketch lib
Barista
Design System

39. Angular
component lib

40. Barista
Design System
Product
code
Angular
component lib

41. Barista
Design System
Product
code
? Angular
component lib

42. Barista
Design System
Product
code
UX + design
Sketch lib Angular
component lib

43. Transform Angular to Sketch
Angular library Sketch library
?

44. .sketch is bunch of JSON files
library.sketch
pages
D91775B4-2C6C-4FCC-9209-6D8C930B9013.json
document.json
meta.json
user.json

45. .sketch is bunch of JSON files
library.sketch
pages
D91775B4-2C6C-4FCC-9209-6D8C930B9013.json
document.json
meta.json
user.json
We can hack that!

46. CSS equivalents in .sketch JSON
button {
width: 122px;
height: 32px;
background-color: #00f;
}
ShapeGroup: {
frame: {x: 0, y: 0, width: 122, height: 32}
layers: [
ShapePath: {
points: [‘{0,0}’,‘{0,1}’,‘{1,1}’,‘{1,0}’]
}
],
style: {
fills: [
color: {
red: 0, green: 0, blue: 1, alpha: 1
}
]
}
}

47. CSS equivalents in .sketch JSON
button {
width: 122px;
height: 32px;
background-color: #00f;
}
ShapeGroup: {
frame: {x: 0, y: 0, width: 122, height: 32}
layers: [
ShapePath: {
points: [‘{0,0}’,‘{0,1}’,‘{1,1}’,‘{1,0}’]
}
],
style: {
fills: [
color: {
red: 0, green: 0, blue: 1, alpha: 1
}
]
}
}

48. {
"_class": "page",
"do_objectID": "6224EB85-9573-4D33-BEE5-C57F892B94E4",
"exportOptions": {
"_class": "exportOptions",
"exportFormats": [],
"includedLayerIds": [],
"layerOptions": 0,
"shouldTrim": false
},
"frame": {
"_class": "rect",
"constrainProportions": false,
"height": 300,
"width": 300,
"x": 0,
"y": 0
},
"isFlippedHorizontal": false,
CSS equivalents in .sketch JSON
button {
width: 122px;
height: 32px;
background-color: #00f;
}

49. CSS equivalents in .sketch JSON
button {
width: 122px;
height: 32px;
background-color: #00f;
}

50. parsable properties
export class StyleDeclaration {
borderTop = '0px none rgb(0, 0, 0)’; borderLeft = '0px none rgb(0, 0, 0)’;
borderBottom = '0px none rgb(0, 0, 0)'; borderRight = '0px none rgb(0, 0, 0)';
borderColor = 'rgb(0, 0, 0)'; borderTopLeftRadius = '0px';
borderTopRightRadius = '0px'; borderBottomRightRadius = '0px';
borderBottomLeftRadius = '0px'; borderWidth = '0px';
boxShadow = 'none'; padding = '0px';
backgroundImage = ‘none'; backgroundColor = 'rgba(0, 0, 0, 0)’; color = 'rgb(0, 0, 0)';
fill = 'rgb(0, 0, 0)’; strokeWidth = '1px';
fontFamily = 'Helvetica Neue'; fontSize = '16px'; fontStyle = 'normal'; fontWeight = '400';
letterSpacing = ‘normal'; whiteSpace = ‘normal'; lineHeight = 'normal';
textDecoration = 'none solid rgb(0, 0, 0)';
textAlign = 'start'; textTransform = 'none'; transform = 'none';
opacity = ‘1'; display = ‘block'; visibility = 'visible';
}

51. parsable properties
export class StyleDeclaration {
borderTop = '0px none rgb(0, 0, 0)’; borderLeft = '0px none rgb(0, 0, 0)’;
borderBottom = '0px none rgb(0, 0, 0)'; borderRight = '0px none rgb(0, 0, 0)';
borderColor = 'rgb(0, 0, 0)'; borderTopLeftRadius = '0px';
borderTopRightRadius = '0px'; borderBottomRightRadius = '0px';
borderBottomLeftRadius = '0px'; borderWidth = '0px';
boxShadow = 'none'; padding = '0px';
backgroundImage = ‘none'; backgroundColor = 'rgba(0, 0, 0, 0)’; color = 'rgb(0, 0, 0)';
fill = 'rgb(0, 0, 0)’; strokeWidth = '1px';
fontFamily = 'Helvetica Neue'; fontSize = '16px'; fontStyle = 'normal'; fontWeight = '400';
letterSpacing = ‘normal'; whiteSpace = ‘normal'; lineHeight = 'normal';
textDecoration = 'none solid rgb(0, 0, 0)';
textAlign = 'start'; textTransform = 'none'; transform = 'none';
opacity = ‘1'; display = ‘block'; visibility = 'visible';
}

52. parsable properties
export class StyleDeclaration {
borderTop = '0px none rgb(0, 0, 0)’; borderLeft = '0px none rgb(0, 0, 0)’;
borderBottom = '0px none rgb(0, 0, 0)'; borderRight = '0px none rgb(0, 0, 0)';
borderColor = 'rgb(0, 0, 0)'; borderTopLeftRadius = '0px';
borderTopRightRadius = '0px'; borderBottomRightRadius = '0px';
borderBottomLeftRadius = '0px'; borderWidth = '0px';
boxShadow = 'none'; padding = '0px';
backgroundImage = ‘none'; backgroundColor = 'rgba(0, 0, 0, 0)’; color = 'rgb(0, 0, 0)';
fill = 'rgb(0, 0, 0)’; strokeWidth = '1px';
fontFamily = 'Helvetica Neue'; fontSize = '16px'; fontStyle = 'normal'; fontWeight = '400';
letterSpacing = ‘normal'; whiteSpace = ‘normal'; lineHeight = 'normal';
textDecoration = 'none solid rgb(0, 0, 0)';
textAlign = 'start'; textTransform = 'none'; transform = 'none';
opacity = ‘1'; display = ‘block'; visibility = 'visible';
}

53. parsable properties
export class StyleDeclaration {
borderTop = '0px none rgb(0, 0, 0)’; borderLeft = '0px none rgb(0, 0, 0)’;
borderBottom = '0px none rgb(0, 0, 0)'; borderRight = '0px none rgb(0, 0, 0)';
borderColor = 'rgb(0, 0, 0)'; borderTopLeftRadius = '0px';
borderTopRightRadius = '0px'; borderBottomRightRadius = '0px';
borderBottomLeftRadius = '0px'; borderWidth = '0px';
boxShadow = 'none'; padding = '0px';
backgroundImage = ‘none'; backgroundColor = 'rgba(0, 0, 0, 0)’; color = 'rgb(0, 0, 0)';
fill = 'rgb(0, 0, 0)’; strokeWidth = '1px';
fontFamily = 'Helvetica Neue'; fontSize = '16px'; fontStyle = 'normal'; fontWeight = '400';
letterSpacing = ‘normal'; whiteSpace = ‘normal'; lineHeight = 'normal';
textDecoration = 'none solid rgb(0, 0, 0)';
textAlign = 'start'; textTransform = 'none'; transform = 'none';
opacity = ‘1'; display = ‘block'; visibility = 'visible';
}

54. parsable properties
export class StyleDeclaration {
borderTop = '0px none rgb(0, 0, 0)’; borderLeft = '0px none rgb(0, 0, 0)’;
borderBottom = '0px none rgb(0, 0, 0)'; borderRight = '0px none rgb(0, 0, 0)';
borderColor = 'rgb(0, 0, 0)'; borderTopLeftRadius = '0px';
borderTopRightRadius = '0px'; borderBottomRightRadius = '0px';
borderBottomLeftRadius = '0px'; borderWidth = '0px';
boxShadow = 'none'; padding = '0px';
backgroundImage = ‘none'; backgroundColor = 'rgba(0, 0, 0, 0)’; color = 'rgb(0, 0, 0)';
fill = 'rgb(0, 0, 0)’; strokeWidth = '1px';
fontFamily = 'Helvetica Neue'; fontSize = '16px'; fontStyle = 'normal'; fontWeight = '400';
letterSpacing = ‘normal'; whiteSpace = ‘normal'; lineHeight = 'normal';
textDecoration = 'none solid rgb(0, 0, 0)';
textAlign = 'start'; textTransform = 'none'; transform = 'none';
opacity = ‘1'; display = ‘block'; visibility = 'visible';
}

55. parsable properties
export class StyleDeclaration {
borderTop = '0px none rgb(0, 0, 0)’; borderLeft = '0px none rgb(0, 0, 0)’;
borderBottom = '0px none rgb(0, 0, 0)'; borderRight = '0px none rgb(0, 0, 0)';
borderColor = 'rgb(0, 0, 0)'; borderTopLeftRadius = '0px';
borderTopRightRadius = '0px'; borderBottomRightRadius = '0px';
borderBottomLeftRadius = '0px'; borderWidth = '0px';
boxShadow = 'none'; padding = '0px';
backgroundImage = ‘none'; backgroundColor = 'rgba(0, 0, 0, 0)’; color = 'rgb(0, 0, 0)';
fill = 'rgb(0, 0, 0)’; strokeWidth = '1px';
fontFamily = 'Helvetica Neue'; fontSize = '16px'; fontStyle = 'normal'; fontWeight = '400';
letterSpacing = ‘normal'; whiteSpace = ‘normal'; lineHeight = 'normal';
textDecoration = 'none solid rgb(0, 0, 0)';
textAlign = 'start'; textTransform = 'none'; transform = 'none';
opacity = ‘1'; display = ‘block'; visibility = 'visible';
}

56. parsable properties
export class StyleDeclaration {
borderTop = '0px none rgb(0, 0, 0)’; borderLeft = '0px none rgb(0, 0, 0)’;
borderBottom = '0px none rgb(0, 0, 0)'; borderRight = '0px none rgb(0, 0, 0)';
borderColor = 'rgb(0, 0, 0)'; borderTopLeftRadius = '0px';
borderTopRightRadius = '0px'; borderBottomRightRadius = '0px';
borderBottomLeftRadius = '0px'; borderWidth = '0px';
boxShadow = 'none'; padding = '0px';
backgroundImage = ‘none'; backgroundColor = 'rgba(0, 0, 0, 0)’; color = 'rgb(0, 0, 0)';
fill = 'rgb(0, 0, 0)’; strokeWidth = '1px';
fontFamily = 'Helvetica Neue'; fontSize = '16px'; fontStyle = 'normal'; fontWeight = '400';
letterSpacing = ‘normal'; whiteSpace = ‘normal'; lineHeight = 'normal';
textDecoration = 'none solid rgb(0, 0, 0)';
textAlign = 'start'; textTransform = 'none'; transform = 'none';
opacity = ‘1'; display = ‘block'; visibility = 'visible';
}

57. export class StyleDeclaration {
borderTop = '0px none rgb(0, 0, 0)’; borderLeft = '0px none rgb(0, 0, 0)’;
borderBottom = '0px none rgb(0, 0, 0)'; borderRight = '0px none rgb(0, 0, 0)';
borderColor = 'rgb(0, 0, 0)'; borderTopLeftRadius = '0px';
borderTopRightRadius = '0px'; borderBottomRightRadius = '0px';
borderBottomLeftRadius = '0px'; borderWidth = '0px';
boxShadow = 'none'; padding = '0px';
backgroundImage = ‘none'; backgroundColor = 'rgba(0, 0, 0, 0)’; color = 'rgb(0, 0, 0)';
fill = 'rgb(0, 0, 0)’; strokeWidth = '1px';
fontFamily = 'Helvetica Neue'; fontSize = '16px'; fontStyle = 'normal'; fontWeight = '400';
letterSpacing = ‘normal'; whiteSpace = ‘normal'; lineHeight = 'normal';
textDecoration = 'none solid rgb(0, 0, 0)';
textAlign = 'start'; textTransform = 'none'; transform = 'none';
opacity = ‘1'; display = ‘block'; visibility = 'visible';
}
“browser stylesheet”

58. CSS+HTML to Sketch
<button …>
+ CSSStyleDeclaration
<div …>
+ CSSStyleDeclaration
<h1>
+ CSSStyleDeclaration
…
…
"frame": {
"_class": "rect",
"constrainProportions":
false,
"height": 44,
"width": 764,
"x": 0,
"y": 0
},
…
.json

59. Transform Angular to Sketch
Angular library Sketch library
? CSSDecl jsonSketch Generator

60. Generate CSS Declaration files
CSS
scraper

61. Generate CSS Declaration files
CSS
scraper

62. Generate CSS Declaration files
CSS
scraper
<button …>

63. Generate CSS Declaration files
CSS
scraper
<button …>
➡ getComputedStyle()

64. Generate CSS Declaration files
CSS
scraper
<button …>
➡ getComputedStyle()
➡ getBoundingClientRect()

65. Generate CSS Declaration files
CSS
scraper
<button …>
➡ getComputedStyle()
➡ getBoundingClientRect()
<div …>

66. Generate CSS Declaration files
CSS
scraper
<button …>
➡ getComputedStyle()
➡ getBoundingClientRect()
<div …>
➡ getComputedStyle()
➡ getBoundingClientRect()

67. Generate CSS Declaration files
CSS
scraper
<button …>
➡ getComputedStyle()
➡ getBoundingClientRect()
<div …>
➡ getComputedStyle()
➡ getBoundingClientRect()
<h1>
➡ getComputedStyle()
➡ getBoundingClientRect()
…

68. Generate CSS Declaration files
CSS
scraper
<button …>
➡ getComputedStyle()
➡ getBoundingClientRect()
<div …>
➡ getComputedStyle()
➡ getBoundingClientRect()
<h1>
➡ getComputedStyle()
➡ getBoundingClientRect()
…
<button …>
+ CSSStyleDeclaration
<div …>
+ CSSStyleDeclaration
<h1>
+ CSSStyleDeclaration
…

69. Generate CSS Declaration files
CSS
scraper
<button …>
➡ getComputedStyle()
➡ getBoundingClientRect()
<div …>
➡ getComputedStyle()
➡ getBoundingClientRect()
<h1>
➡ getComputedStyle()
➡ getBoundingClientRect()
…

70. Generate CSS Declaration files
CSS
scraper

71. Generate CSS Declaration files
CSS
scraper
update!

72. Generate CSS Declaration files
CSS
scraper
update!

73. Generate CSS Declaration files
CSS
scraper
update!

74. Transform angular to sketch
Angular library Sketch library
? CSSDecl jsonSketch GeneratorApp CSS scraper

75. Parsing component code
Angular
component lib

76. TS
Parsing component code
Angular
component lib
Parses AST

77. A ‘pure’ example and component variants
TSAngular
component lib
Parses AST

78. A ‘pure’ example and component variants
TSAngular
component lib
examples

79. A ‘pure’ example and component variants
TSAngular
component lib
@Component({
moduleId: module.id,
template: `<button dt-button>Simple button</button>`,
})
export class ButtonPureExampleComponent { }
examples

80. A ‘pure’ example and component variants
TSAngular
component lib
@Component({
moduleId: module.id,
template: `<button dt-button>Simple button</button>`,
})
export class ButtonPureExampleComponent { }
examples

81. A ‘pure’ example and component variants
TSAngular
component lib
@Component({
moduleId: module.id,
template: `<button dt-button>Simple button</button>`,
})
export class ButtonPureExampleComponent { }
examples
variants

82. A ‘pure’ example and component variants
TSAngular
component lib
@Component({
moduleId: module.id,
template: `<button dt-button>Simple button</button>`,
})
export class ButtonPureExampleComponent { }
@Component({
selector: `button[dt-button], button[dt-icon-button]`,
templateUrl: 'button.html',
})
export class DtButton extends … {
@Input()
get variant(): ‘primary’ | ‘secondary’ { return this._variant; }
}
examples
variants

83. A ‘pure’ example and component variants
TSAngular
component lib
@Component({
moduleId: module.id,
template: `<button dt-button>Simple button</button>`,
})
export class ButtonPureExampleComponent { }
@Component({
selector: `button[dt-button], button[dt-icon-button]`,
templateUrl: 'button.html',
})
export class DtButton extends … {
@Input()
get variant(): ‘primary’ | ‘secondary’ { return this._variant; }
}
examples
variants

84. A ‘pure’ example and component variants
TSAngular
component lib
@Component({
moduleId: module.id,
template: `<button dt-button>Simple button</button>`,
})
export class ButtonPureExampleComponent { }
@Component({
selector: `button[dt-button], button[dt-icon-button]`,
templateUrl: 'button.html',
})
export class DtButton extends … {
@Input()
get variant(): ‘primary’ | ‘secondary’ { return this._variant; }
}
examples
variants

85. A ‘pure’ example and component variants
TSAngular
component lib
@Component({
moduleId: module.id,
template: `<button dt-button>Simple button</button>`,
})
export class ButtonPureExampleComponent { }
@Component({
selector: `button[dt-button], button[dt-icon-button]`,
templateUrl: 'button.html',
})
export class DtButton extends … {
@Input()
get variant(): ‘primary’ | ‘secondary’ { return this._variant; }
}
examples
variants

86. A ‘pure’ example and component variants
TSAngular
component lib
examples
variants

87. A ‘pure’ example and component variants
TSAngular
component lib
examples
+
variants

88. A ‘pure’ example and component variants
TSAngular
component lib
examples
+
variants

89. A ‘pure’ example and component variants
TSAngular
component lib
examples
+
variants

90. A ‘pure’ example and component variants
TSAngular
component lib
examples
+
variants

91. Transform Angular to Sketch
Angular library Sketch libraryCSSDecl json
Sketch GeneratorApp
CSS
scraper
Library
App
generator

94. UX + design
Initial idea
Angular
component lib
Product
code
Sketch lib
Barista
Design System

95. Angular
component lib
Barista
Design System
Sketch lib
Product
code
UX + design

98. $royalblue-700: #393db0;
dt-theme-palette($green-600,
$green-700, $green-800),

102. Lukas Holzer
@luka5c0m

103. Katrin Freihofner
@Ka_TriN_F
Stefan Baumgartner
@ddprrt
Office hours
12:30 - 13:00