Sketchmine: Design Systems Tooling
1 like426 views
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.
![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 { ... }
}](https://image.slidesharecdn.com/sketchmine-190121104948/85/Sketchmine-Design-Systems-Tooling-48-320.jpg)
![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 { ... }
}
*](https://image.slidesharecdn.com/sketchmine-190121104948/85/Sketchmine-Design-Systems-Tooling-49-320.jpg)
![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]’
*](https://image.slidesharecdn.com/sketchmine-190121104948/85/Sketchmine-Design-Systems-Tooling-50-320.jpg)
Sketchmine: Design Systems Tooling
- 2. @luka5c0m
- 3. @ddprrt
- 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
- 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 ) %&
- 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?
- 64. let’s / it ☝
- 65. %&)*'
- 66. %&)* '' ⛏
- 71. Slide about usKatrin Freihofner @Ka_TriN_F devone.at
- 72. need that?