SlideShare a Scribd company logo
1 of 73
Download to read offline
design
tooling
systems⛏
"
@luka5c0m
@ddprrt
design systems
design systems engineering
patterns
components
prototypes
and tools…
the sketchmine
a place to scrape diamonds
when did you last ship
a sketchfile into production?
Initial idea
UX + design
Initial idea
UX + design
Initial idea
Sketch lib
UX + design
Initial idea
Product
code
Sketch lib
UX + design
Initial idea
Angular
component lib
Product
code
Sketch lib
UX + design
Initial idea
Angular
component lib
Product
code
Sketch lib
Barista
Design System
UX + design
Initial idea
Angular
component lib
Product
code
Sketch lib
Barista
Design System
UX + design
Initial idea
Angular
component lib
Product
code
Sketch lib
Barista
Design System
UX + design
Initial idea
Angular
component lib
Product
code
Sketch lib
Barista
Design System
UX + design
Initial idea
Angular
component lib
Product
code
Sketch lib
Barista
Design System
UX + design
Initial idea
Angular
component lib
Product
code
Sketch lib
Barista
Design System
Angular
component lib
Barista
Design System
Sketch lib
Product
code
UX + design
the sketchmine
a place to scrape diamonds
Generating designs

from code d#
Generating designs

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

from code d#
$➜ skm-sketch-builder
So now we can draw

any web page
but what if we want to draw
our components library?
sketch-builder
generates a .sketch file from any website
sketch-builder
app-builder
generates a .sketch file from any website
generates the angular application that can be drawn
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
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
sketch-builder
%&'
sketch-builder
%&'
el.getBoundingClientRect() as DOMRect;
sketch-builder
%&'
const style = getComputedStyle(element);
sketch-builder
(⛏
%&'
background-color: #00A1B2
font-size: 16px
font-family: Bernina Sans
width: auto
height: 32px
text-align: center
const style = getComputedStyle(element);
sketch-builder
app-builder
) %&
app-builder
) %&'
'
'
'
app-builder
) %&'
'
'
'
app-builder
) %&''''
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 { ... }
}
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 { ... }
}
*
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]’
*
%&)*
'
'
%&)* ''
a pure example ,
the generated library -
can I work with the library?
So which other tools are in
the mine?
So which other tools are in
the mine?
validating our
designs
.
Sketch Validation
validating our
designs
.
Sketch Validation
let’s / it ☝
%&)*'
%&)* ''
⛏
honorable mentions
Slide about usKatrin Freihofner

@Ka_TriN_F
devone.at
need that?
https://github.com/Dynatrace/sketchmine
@luka5c0m
npm @sketchmine
@ddprrt

More Related Content

Similar to Sketchmine: Design Systems Tooling

Web components with Angular
Web components with AngularWeb components with Angular
Web components with AngularAna Cidre
 
How to create an Angular builder
How to create an Angular builderHow to create an Angular builder
How to create an Angular builderMaurizio Vitale
 
C++ in the 21st Century
C++ in the 21st CenturyC++ in the 21st Century
C++ in the 21st Centurybittorrentinc
 
Tools and practices for rapid application development
Tools and practices for rapid application developmentTools and practices for rapid application development
Tools and practices for rapid application developmentZoltán Váradi
 
AutoDesk Inventor Basics at TechShop
AutoDesk Inventor Basics at TechShopAutoDesk Inventor Basics at TechShop
AutoDesk Inventor Basics at TechShoprayharris
 
MOPCON 2014 - Best software architecture in app development
MOPCON 2014 - Best software architecture in app developmentMOPCON 2014 - Best software architecture in app development
MOPCON 2014 - Best software architecture in app developmentanistar sung
 
Get together on getting more out of typescript &amp; angular 2
Get together on getting more out of typescript &amp; angular 2Get together on getting more out of typescript &amp; angular 2
Get together on getting more out of typescript &amp; angular 2Ruben Haeck
 
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점Jeado Ko
 
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점 Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점 WebFrameworks
 
Lecture 2: C# Programming for VR application in Unity
Lecture 2: C# Programming for VR application in UnityLecture 2: C# Programming for VR application in Unity
Lecture 2: C# Programming for VR application in UnityKobkrit Viriyayudhakorn
 
React Native custom components
React Native custom componentsReact Native custom components
React Native custom componentsJeremy Grancher
 
The fundamental problems of GUI applications and why people choose React
The fundamental problems of GUI applications and why people choose ReactThe fundamental problems of GUI applications and why people choose React
The fundamental problems of GUI applications and why people choose ReactOliver N
 
Report for DIGITAL CLOCK 12011042 Manoj.pdf
Report for DIGITAL  CLOCK 12011042 Manoj.pdfReport for DIGITAL  CLOCK 12011042 Manoj.pdf
Report for DIGITAL CLOCK 12011042 Manoj.pdfManojKumar533913
 
AUTOCAD Report
AUTOCAD ReportAUTOCAD Report
AUTOCAD ReportAMIT RAJ
 
a data driven game object system
a data driven game object systema data driven game object system
a data driven game object systemmaa77
 

Similar to Sketchmine: Design Systems Tooling (20)

Web components with Angular
Web components with AngularWeb components with Angular
Web components with Angular
 
How to create an Angular builder
How to create an Angular builderHow to create an Angular builder
How to create an Angular builder
 
C++ in the 21st Century
C++ in the 21st CenturyC++ in the 21st Century
C++ in the 21st Century
 
Tools and practices for rapid application development
Tools and practices for rapid application developmentTools and practices for rapid application development
Tools and practices for rapid application development
 
AutoDesk Inventor Basics at TechShop
AutoDesk Inventor Basics at TechShopAutoDesk Inventor Basics at TechShop
AutoDesk Inventor Basics at TechShop
 
MOPCON 2014 - Best software architecture in app development
MOPCON 2014 - Best software architecture in app developmentMOPCON 2014 - Best software architecture in app development
MOPCON 2014 - Best software architecture in app development
 
Get together on getting more out of typescript &amp; angular 2
Get together on getting more out of typescript &amp; angular 2Get together on getting more out of typescript &amp; angular 2
Get together on getting more out of typescript &amp; angular 2
 
(OOAD) UML Slides
(OOAD) UML Slides(OOAD) UML Slides
(OOAD) UML Slides
 
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점
 
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점 Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점
 
Vue.js slots.pdf
Vue.js slots.pdfVue.js slots.pdf
Vue.js slots.pdf
 
Lecture 2: C# Programming for VR application in Unity
Lecture 2: C# Programming for VR application in UnityLecture 2: C# Programming for VR application in Unity
Lecture 2: C# Programming for VR application in Unity
 
Dash Intro.pdf
Dash Intro.pdfDash Intro.pdf
Dash Intro.pdf
 
iOS 7 SDK特訓班
iOS 7 SDK特訓班iOS 7 SDK特訓班
iOS 7 SDK特訓班
 
GitIndex e SourceServer
GitIndex e SourceServerGitIndex e SourceServer
GitIndex e SourceServer
 
React Native custom components
React Native custom componentsReact Native custom components
React Native custom components
 
The fundamental problems of GUI applications and why people choose React
The fundamental problems of GUI applications and why people choose ReactThe fundamental problems of GUI applications and why people choose React
The fundamental problems of GUI applications and why people choose React
 
Report for DIGITAL CLOCK 12011042 Manoj.pdf
Report for DIGITAL  CLOCK 12011042 Manoj.pdfReport for DIGITAL  CLOCK 12011042 Manoj.pdf
Report for DIGITAL CLOCK 12011042 Manoj.pdf
 
AUTOCAD Report
AUTOCAD ReportAUTOCAD Report
AUTOCAD Report
 
a data driven game object system
a data driven game object systema data driven game object system
a data driven game object system
 

More from Stefan Baumgartner

More from Stefan Baumgartner (13)

WASM! WASI! WAGI! WAT?
WASM! WASI! WAGI! WAT?WASM! WASI! WAGI! WAT?
WASM! WASI! WAGI! WAT?
 
Serverless Rust
Serverless RustServerless Rust
Serverless Rust
 
What TypeScript taught me about JavaScript
What TypeScript taught me about JavaScriptWhat TypeScript taught me about JavaScript
What TypeScript taught me about JavaScript
 
Real-world component libraries at scale
Real-world component libraries at scaleReal-world component libraries at scale
Real-world component libraries at scale
 
Jamstack on Azure
Jamstack on AzureJamstack on Azure
Jamstack on Azure
 
TypeScript's Type System
TypeScript's Type SystemTypeScript's Type System
TypeScript's Type System
 
The hero's journey
The hero's journeyThe hero's journey
The hero's journey
 
Automating UI development
Automating UI developmentAutomating UI development
Automating UI development
 
A hero's journey in JavaScript frameworks
A hero's journey in JavaScript frameworksA hero's journey in JavaScript frameworks
A hero's journey in JavaScript frameworks
 
[German] Ab mit dem Kopf!
[German] Ab mit dem Kopf![German] Ab mit dem Kopf!
[German] Ab mit dem Kopf!
 
Advanced JavaScript build pipelines using Gulp.js
Advanced JavaScript build pipelines using Gulp.jsAdvanced JavaScript build pipelines using Gulp.js
Advanced JavaScript build pipelines using Gulp.js
 
Speed Index, explained!
Speed Index, explained!Speed Index, explained!
Speed Index, explained!
 
Plumbin Pipelines - A Gulp.js workshop
Plumbin Pipelines - A Gulp.js workshopPlumbin Pipelines - A Gulp.js workshop
Plumbin Pipelines - A Gulp.js workshop
 

Recently uploaded

Secure Key Crypto - Tech Paper JET Tech Labs
Secure Key Crypto - Tech Paper JET Tech LabsSecure Key Crypto - Tech Paper JET Tech Labs
Secure Key Crypto - Tech Paper JET Tech Labsamber724300
 
Overview of IS 16700:2023 (by priyansh verma)
Overview of IS 16700:2023 (by priyansh verma)Overview of IS 16700:2023 (by priyansh verma)
Overview of IS 16700:2023 (by priyansh verma)Priyansh
 
Machine Learning 5G Federated Learning.pdf
Machine Learning 5G Federated Learning.pdfMachine Learning 5G Federated Learning.pdf
Machine Learning 5G Federated Learning.pdfadeyimikaipaye
 
Guardians of E-Commerce: Harnessing NLP and Machine Learning Approaches for A...
Guardians of E-Commerce: Harnessing NLP and Machine Learning Approaches for A...Guardians of E-Commerce: Harnessing NLP and Machine Learning Approaches for A...
Guardians of E-Commerce: Harnessing NLP and Machine Learning Approaches for A...IJAEMSJORNAL
 
SOFTWARE ESTIMATION COCOMO AND FP CALCULATION
SOFTWARE ESTIMATION COCOMO AND FP CALCULATIONSOFTWARE ESTIMATION COCOMO AND FP CALCULATION
SOFTWARE ESTIMATION COCOMO AND FP CALCULATIONSneha Padhiar
 
March 2024 - Top 10 Read Articles in Artificial Intelligence and Applications...
March 2024 - Top 10 Read Articles in Artificial Intelligence and Applications...March 2024 - Top 10 Read Articles in Artificial Intelligence and Applications...
March 2024 - Top 10 Read Articles in Artificial Intelligence and Applications...gerogepatton
 
Robotics Group 10 (Control Schemes) cse.pdf
Robotics Group 10  (Control Schemes) cse.pdfRobotics Group 10  (Control Schemes) cse.pdf
Robotics Group 10 (Control Schemes) cse.pdfsahilsajad201
 
Substation Automation SCADA and Gateway Solutions by BRH
Substation Automation SCADA and Gateway Solutions by BRHSubstation Automation SCADA and Gateway Solutions by BRH
Substation Automation SCADA and Gateway Solutions by BRHbirinder2
 
Defining the Clouds for entriprises.pptx
Defining the Clouds for entriprises.pptxDefining the Clouds for entriprises.pptx
Defining the Clouds for entriprises.pptxAshwiniTodkar4
 
Detection&Tracking - Thermal imaging object detection and tracking
Detection&Tracking - Thermal imaging object detection and trackingDetection&Tracking - Thermal imaging object detection and tracking
Detection&Tracking - Thermal imaging object detection and trackinghadarpinhas1
 
CS 3251 Programming in c all unit notes pdf
CS 3251 Programming in c all unit notes pdfCS 3251 Programming in c all unit notes pdf
CS 3251 Programming in c all unit notes pdfBalamuruganV28
 
Curve setting (Basic Mine Surveying)_MI10412MI.pptx
Curve setting (Basic Mine Surveying)_MI10412MI.pptxCurve setting (Basic Mine Surveying)_MI10412MI.pptx
Curve setting (Basic Mine Surveying)_MI10412MI.pptxRomil Mishra
 
Theory of Machine Notes / Lecture Material .pdf
Theory of Machine Notes / Lecture Material .pdfTheory of Machine Notes / Lecture Material .pdf
Theory of Machine Notes / Lecture Material .pdfShreyas Pandit
 
Structural Integrity Assessment Standards in Nigeria by Engr Nimot Muili
Structural Integrity Assessment Standards in Nigeria by Engr Nimot MuiliStructural Integrity Assessment Standards in Nigeria by Engr Nimot Muili
Structural Integrity Assessment Standards in Nigeria by Engr Nimot MuiliNimot Muili
 
10 AsymmetricKey Cryptography students.pptx
10 AsymmetricKey Cryptography students.pptx10 AsymmetricKey Cryptography students.pptx
10 AsymmetricKey Cryptography students.pptxAdityaGoogle
 
The Satellite applications in telecommunication
The Satellite applications in telecommunicationThe Satellite applications in telecommunication
The Satellite applications in telecommunicationnovrain7111
 
Design and Analysis of Algorithms Lecture Notes
Design and Analysis of Algorithms Lecture NotesDesign and Analysis of Algorithms Lecture Notes
Design and Analysis of Algorithms Lecture NotesSreedhar Chowdam
 
FUNCTIONAL AND NON FUNCTIONAL REQUIREMENT
FUNCTIONAL AND NON FUNCTIONAL REQUIREMENTFUNCTIONAL AND NON FUNCTIONAL REQUIREMENT
FUNCTIONAL AND NON FUNCTIONAL REQUIREMENTSneha Padhiar
 
AntColonyOptimizationManetNetworkAODV.pptx
AntColonyOptimizationManetNetworkAODV.pptxAntColonyOptimizationManetNetworkAODV.pptx
AntColonyOptimizationManetNetworkAODV.pptxLina Kadam
 

Recently uploaded (20)

Secure Key Crypto - Tech Paper JET Tech Labs
Secure Key Crypto - Tech Paper JET Tech LabsSecure Key Crypto - Tech Paper JET Tech Labs
Secure Key Crypto - Tech Paper JET Tech Labs
 
Overview of IS 16700:2023 (by priyansh verma)
Overview of IS 16700:2023 (by priyansh verma)Overview of IS 16700:2023 (by priyansh verma)
Overview of IS 16700:2023 (by priyansh verma)
 
Versatile Engineering Construction Firms
Versatile Engineering Construction FirmsVersatile Engineering Construction Firms
Versatile Engineering Construction Firms
 
Machine Learning 5G Federated Learning.pdf
Machine Learning 5G Federated Learning.pdfMachine Learning 5G Federated Learning.pdf
Machine Learning 5G Federated Learning.pdf
 
Guardians of E-Commerce: Harnessing NLP and Machine Learning Approaches for A...
Guardians of E-Commerce: Harnessing NLP and Machine Learning Approaches for A...Guardians of E-Commerce: Harnessing NLP and Machine Learning Approaches for A...
Guardians of E-Commerce: Harnessing NLP and Machine Learning Approaches for A...
 
SOFTWARE ESTIMATION COCOMO AND FP CALCULATION
SOFTWARE ESTIMATION COCOMO AND FP CALCULATIONSOFTWARE ESTIMATION COCOMO AND FP CALCULATION
SOFTWARE ESTIMATION COCOMO AND FP CALCULATION
 
March 2024 - Top 10 Read Articles in Artificial Intelligence and Applications...
March 2024 - Top 10 Read Articles in Artificial Intelligence and Applications...March 2024 - Top 10 Read Articles in Artificial Intelligence and Applications...
March 2024 - Top 10 Read Articles in Artificial Intelligence and Applications...
 
Robotics Group 10 (Control Schemes) cse.pdf
Robotics Group 10  (Control Schemes) cse.pdfRobotics Group 10  (Control Schemes) cse.pdf
Robotics Group 10 (Control Schemes) cse.pdf
 
Substation Automation SCADA and Gateway Solutions by BRH
Substation Automation SCADA and Gateway Solutions by BRHSubstation Automation SCADA and Gateway Solutions by BRH
Substation Automation SCADA and Gateway Solutions by BRH
 
Defining the Clouds for entriprises.pptx
Defining the Clouds for entriprises.pptxDefining the Clouds for entriprises.pptx
Defining the Clouds for entriprises.pptx
 
Detection&Tracking - Thermal imaging object detection and tracking
Detection&Tracking - Thermal imaging object detection and trackingDetection&Tracking - Thermal imaging object detection and tracking
Detection&Tracking - Thermal imaging object detection and tracking
 
CS 3251 Programming in c all unit notes pdf
CS 3251 Programming in c all unit notes pdfCS 3251 Programming in c all unit notes pdf
CS 3251 Programming in c all unit notes pdf
 
Curve setting (Basic Mine Surveying)_MI10412MI.pptx
Curve setting (Basic Mine Surveying)_MI10412MI.pptxCurve setting (Basic Mine Surveying)_MI10412MI.pptx
Curve setting (Basic Mine Surveying)_MI10412MI.pptx
 
Theory of Machine Notes / Lecture Material .pdf
Theory of Machine Notes / Lecture Material .pdfTheory of Machine Notes / Lecture Material .pdf
Theory of Machine Notes / Lecture Material .pdf
 
Structural Integrity Assessment Standards in Nigeria by Engr Nimot Muili
Structural Integrity Assessment Standards in Nigeria by Engr Nimot MuiliStructural Integrity Assessment Standards in Nigeria by Engr Nimot Muili
Structural Integrity Assessment Standards in Nigeria by Engr Nimot Muili
 
10 AsymmetricKey Cryptography students.pptx
10 AsymmetricKey Cryptography students.pptx10 AsymmetricKey Cryptography students.pptx
10 AsymmetricKey Cryptography students.pptx
 
The Satellite applications in telecommunication
The Satellite applications in telecommunicationThe Satellite applications in telecommunication
The Satellite applications in telecommunication
 
Design and Analysis of Algorithms Lecture Notes
Design and Analysis of Algorithms Lecture NotesDesign and Analysis of Algorithms Lecture Notes
Design and Analysis of Algorithms Lecture Notes
 
FUNCTIONAL AND NON FUNCTIONAL REQUIREMENT
FUNCTIONAL AND NON FUNCTIONAL REQUIREMENTFUNCTIONAL AND NON FUNCTIONAL REQUIREMENT
FUNCTIONAL AND NON FUNCTIONAL REQUIREMENT
 
AntColonyOptimizationManetNetworkAODV.pptx
AntColonyOptimizationManetNetworkAODV.pptxAntColonyOptimizationManetNetworkAODV.pptx
AntColonyOptimizationManetNetworkAODV.pptx
 

Sketchmine: Design Systems Tooling