Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Sketchmine: Design Systems Tooling

140 views

Published on

Sketchmine is a toolset to maintain, validate and create Sketch files. The perfect suite for design systems and design systems tooling. In this presentation, we look at challenges of large organisations and their design systems, and how we solve them with Sketchmine. Design Ops as it should be

Published in: Engineering
  • Be the first to comment

Sketchmine: Design Systems Tooling

  1. 1. design tooling systems⛏ "
  2. 2. @luka5c0m
  3. 3. @ddprrt
  4. 4. design systems
  5. 5. design systems engineering
  6. 6. patterns
  7. 7. components
  8. 8. prototypes
  9. 9. and tools…
  10. 10. the sketchmine a place to scrape diamonds
  11. 11. when did you last ship a sketchfile into production?
  12. 12. Initial idea
  13. 13. UX + design Initial idea
  14. 14. UX + design Initial idea Sketch lib
  15. 15. UX + design Initial idea Product code Sketch lib
  16. 16. UX + design Initial idea Angular component lib Product code Sketch lib
  17. 17. UX + design Initial idea Angular component lib Product code Sketch lib Barista Design System
  18. 18. UX + design Initial idea Angular component lib Product code Sketch lib Barista Design System
  19. 19. UX + design Initial idea Angular component lib Product code Sketch lib Barista Design System
  20. 20. UX + design Initial idea Angular component lib Product code Sketch lib Barista Design System
  21. 21. UX + design Initial idea Angular component lib Product code Sketch lib Barista Design System
  22. 22. UX + design Initial idea Angular component lib Product code Sketch lib Barista Design System
  23. 23. Angular component lib Barista Design System Sketch lib Product code UX + design
  24. 24. the sketchmine a place to scrape diamonds
  25. 25. Generating designs
 from code d#
  26. 26. Generating designs
 from code d# $➜ yarn global add @sketchmine/sketch-builder
  27. 27. Generating designs
 from code d# $➜ skm-sketch-builder
  28. 28. So now we can draw
 any web page
  29. 29. but what if we want to draw our components library?
  30. 30. sketch-builder generates a .sketch file from any website
  31. 31. sketch-builder app-builder generates a .sketch file from any website generates the angular application that can be drawn
  32. 32. 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
  33. 33. 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
  34. 34. sketch-builder
  35. 35. %&' sketch-builder
  36. 36. %&' el.getBoundingClientRect() as DOMRect; sketch-builder
  37. 37. %&' const style = getComputedStyle(element); sketch-builder
  38. 38. (⛏ %&' background-color: #00A1B2 font-size: 16px font-family: Bernina Sans width: auto height: 32px text-align: center const style = getComputedStyle(element); sketch-builder
  39. 39. app-builder ) %&
  40. 40. app-builder ) %&' ' ' '
  41. 41. app-builder ) %&' ' ' '
  42. 42. app-builder ) %&''''
  43. 43. 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 { ... } }
  44. 44. 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 { ... } } *
  45. 45. 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]’ *
  46. 46. %&)* ' '
  47. 47. %&)* ''
  48. 48. a pure example ,
  49. 49. the generated library -
  50. 50. can I work with the library?
  51. 51. So which other tools are in the mine?
  52. 52. So which other tools are in the mine?
  53. 53. validating our designs . Sketch Validation
  54. 54. validating our designs . Sketch Validation
  55. 55. let’s / it ☝
  56. 56. %&)*'
  57. 57. %&)* '' ⛏
  58. 58. honorable mentions
  59. 59. Slide about usKatrin Freihofner
 @Ka_TriN_F devone.at
  60. 60. need that?
  61. 61. https://github.com/Dynatrace/sketchmine @luka5c0m npm @sketchmine @ddprrt

×