The document discusses design tooling systems, particularly focusing on the 'sketchmine' platform for generating .sketch files from web applications. It includes details on creating design components such as buttons using Angular, as well as tools for validating designs. The content highlights various aspects of component libraries and their integration with design systems.

1. design
tooling
systems⛏
"

2. @luka5c0m

3. @ddprrt

4. design systems

5. design systems engineering

7. patterns

8. components

9. prototypes

10. and tools…

11. the sketchmine
a place to scrape diamonds

12. when did you last ship
a sketchfile into production?

13. Initial idea

14. UX + design
Initial idea

15. UX + design
Initial idea
Sketch lib

16. UX + design
Initial idea
Product
code
Sketch lib

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

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

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

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

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

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

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

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

27. the sketchmine
a place to scrape diamonds

28. Generating designs
from code d#

29. Generating designs
from code d#
$➜ yarn global add @sketchmine/sketch-builder

30. Generating designs
from code d#
$➜ skm-sketch-builder

33. So now we can draw
any web page

34. but what if we want to draw
our components library?

35. sketch-builder
generates a .sketch file from any website

36. sketch-builder
app-builder
generates a .sketch file from any website
generates the angular application that can be drawn

37. sketch-builder
code-analyser
app-builder
generates a .sketch file from any website
generates the angular application that can be drawn
generates an abstract syntax tree out of the component library

38. sketch-builder
code-analyser
app-builder
angular components
generates a .sketch file from any website
generates the angular application that can be drawn
generates an abstract syntax tree out of the component library

39. sketch-builder

40. %&'
sketch-builder

41. %&'
el.getBoundingClientRect() as DOMRect;
sketch-builder

42. %&'
const style = getComputedStyle(element);
sketch-builder

43. (⛏
%&'
background-color: #00A1B2
font-size: 16px
font-family: Bernina Sans
width: auto
height: 32px
text-align: center
const style = getComputedStyle(element);
sketch-builder

44. app-builder
) %&

45. app-builder
) %&'
'
'
'

46. app-builder
) %&'
'
'
'

47. app-builder
) %&''''

48. code-analyser export type ButtonVariant = 'primary' | 'secondary' | 'nested';
export type DtButtonThemePalette = 'main' | 'warning' | 'cta';
/**
* Dynatrace design button.
* @design-focusable
*/
@Component({
selector: `button[dt-button], button[dt-icon-button]`,
inputs: ['disabled', 'color'],
})
export class DtButton extends _DtButtonMixinBase
implements CanDisable, CanColor<DtButtonThemePalette> {
@Input()
get variant(): ButtonVariant { ... }
set variant(value: ButtonVariant) { ... }
private _variant: ButtonVariant;
@ContentChildren(DtIcon) _icons: QueryList<DtIcon>;
focus(): void { ... }
private _somePrivateMethod(): void { }
private _yetAnotherPrivateMethod( ...attributes: string[]): boolean { ... }
}

49. code-analyser export type ButtonVariant = 'primary' | 'secondary' | 'nested';
export type DtButtonThemePalette = 'main' | 'warning' | 'cta';
/**
* Dynatrace design button.
* @design-focusable
*/
@Component({
selector: `button[dt-button], button[dt-icon-button]`,
inputs: ['disabled', 'color'],
})
export class DtButton extends _DtButtonMixinBase
implements CanDisable, CanColor<DtButtonThemePalette> {
@Input()
get variant(): ButtonVariant { ... }
set variant(value: ButtonVariant) { ... }
private _variant: ButtonVariant;
@ContentChildren(DtIcon) _icons: QueryList<DtIcon>;
focus(): void { ... }
private _somePrivateMethod(): void { }
private _yetAnotherPrivateMethod( ...attributes: string[]): boolean { ... }
}
*

50. variants: [
{
name: “button/disabled”,
changes: [{
type: “property”,
key: “disabled”,
Value: “true”,
}],
}
code-analyser export type ButtonVariant = 'primary' | 'secondary' | 'nested';
export type DtButtonThemePalette = 'main' | 'warning' | 'cta';
/**
* Dynatrace design button.
* @design-focusable
*/
@Component({
selector: `button[dt-button], button[dt-icon-button]`,
inputs: ['disabled', 'color'],
})
export class DtButton extends _DtButtonMixinBase
implements CanDisable, CanColor<DtButtonThemePalette> {
@Input()
get variant(): ButtonVariant { ... }
set variant(value: ButtonVariant) { ... }
private _variant: ButtonVariant;
@ContentChildren(DtIcon) _icons: QueryList<DtIcon>;
focus(): void { ... }
private _somePrivateMethod(): void { }
private _yetAnotherPrivateMethod( ...attributes: string[]): boolean { ... }
}
+
}, {
name: “button/primary/default”,
changes: [{
type: “property”,
key: “variant”,
value: “”primary””,
}],
}
…
component: ‘DtButton’,
selector: ‘button[dt-button]’
*

51. %&)*
'
'

52. %&)* ''

56. a pure example ,

57. the generated library -

58. can I work with the library?

59. So which other tools are in
the mine?

60. So which other tools are in
the mine?

62. validating our
designs
.
Sketch Validation

63. validating our
designs
.
Sketch Validation

64. let’s / it ☝

65. %&)*'

66. %&)* ''
⛏

67. honorable mentions

71. Slide about usKatrin Freihofner
@Ka_TriN_F
devone.at

72. need that?

73. https://github.com/Dynatrace/sketchmine
@luka5c0m
npm @sketchmine
@ddprrt