Slide 1
Slide 1 text
Kristin Baumann · @kristin_baumann
Designing with React
+
Slide 2
Slide 2 text
@kristin_baumann !2
Steve Jobs
Design is not just
what it looks like and feels like.
Design is how it works.
Slide 3
Slide 3 text
@kristin_baumann !3
Adapted from Billy Loizou
Design Thinking
UNDERSTAND
OBSERVE TEST PROTOTYPE
IDEATE
What is the problem?
How do users behave? How does
it work?
How do we solve the
challenge?
How do we create
a solution?
Slide 4
Slide 4 text
@kristin_baumann !4
Adapted from Billy Loizou
Design Thinking
UNDERSTAND
OBSERVE TEST PROTOTYPE
IDEATE
What is the problem?
How do users behave? How does
it work?
How do we solve the
challenge?
How do we create
a solution?
Slide 5
Slide 5 text
@kristin_baumann !5
Adapted from Billy Loizou
Design Thinking
UNDERSTAND
OBSERVE TEST PROTOTYPE
IDEATE
What is the problem?
How do users behave? How does
it work?
How do we solve the
challenge?
How do we create
a solution?
Slide 6
Slide 6 text
@kristin_baumann !6
Adapted from Billy Loizou
Design Thinking
UNDERSTAND
OBSERVE TEST PROTOTYPE
IDEATE
What is the problem?
How do users behave? How does
it work?
How do we solve the
challenge?
How do we create
a solution?
Slide 7
Slide 7 text
@kristin_baumann !7
UNDERSTAND
OBSERVE TEST PROTOTYPE
IDEATE
What is the problem?
How do users behave? How does
it work?
How do we solve the
challenge?
How do we create
a solution?
Adapted from Billy Loizou
Design Thinking
Slide 8
Slide 8 text
@kristin_baumann !8
Design Thinking - Deliverables
Diagrams (flowcharts)
Insights from usability tests
Wireframes
Mockups (static images)
Coded prototypes (web apps)
Clickdummys (linked mockups)
UNDERSTAND
OBSERVE TEST PROTOTYPE
IDEATE
Slide 9
Slide 9 text
@kristin_baumann !9
Render React Components
to Sketch
Slide 10
Slide 10 text
@kristin_baumann !10
A first example https://github.com/kristinbaumann/
react-sketchapp-starter-kit
Slide 11
Slide 11 text
@kristin_baumann !11
import React from 'react';
import { render, Artboard, View, Image } from 'react-sketchapp';
const Example = () => (
![]()
)
export default (context) => render(,
context.document.currentPage())
A first example https://github.com/kristinbaumann/
react-sketchapp-starter-kit
Slide 12
Slide 12 text
@kristin_baumann !12
A peek behind the scenes
Slide 13
Slide 13 text
@kristin_baumann
BohemianCoding - Hello World Example.
!13
Sketch is scriptable
Slide 14
Slide 14 text
@kristin_baumann !14
… with plugins
Slide 15
Slide 15 text
@kristin_baumann !15
import React from 'react';
import { render, Artboard, View, Image } from 'react-sketchapp';
const Example = () => (
![]()
)
export default (context) => render( ,
context.document.currentPage())
View - Text - Image - Artboard - Red Box
React Sketchapp Components
Slide 16
Slide 16 text
@kristin_baumann !16
Calling render in React Sketchapp:
JSON tree of
React elements
JSON tree with
layout definitions
JSON tree with
Sketch properties
Native Sketch
object
sketchapp-
json-plugin
Custom renderer
per type
YOGA
layout engine
From React App to Sketch Plugin
Slide 17
Slide 17 text
@kristin_baumann !17
Creating the Sketch plugin: https://github.com/skpm/skpm
Create Plugin
- copy manifest
- generate script
From React App to Sketch Plugin
Run skpm-build Run Plugin
Slide 18
Slide 18 text
@kristin_baumann !18
Use Cases
Slide 19
Slide 19 text
@kristin_baumann https://airbnb.design/painting-with-code/ !19
Design System
- Typography
- Colors
- Dimensions
- Components
- …
Use Case 1: Design System
Slide 20
Slide 20 text
@kristin_baumann
https://airbnb.design/painting-with-code/
!20
Sketch
templates
Documentation
Android App
Web App
iOS App
Design System
- Typography
- Colors
- Dimensions
- Components
…
HTML,
CSS,
JavaScript
Swift
Java
Sketch
Design System
Slide 21
Slide 21 text
@kristin_baumann
https://airbnb.design/painting-with-code
!21
https://github.com/airbnb/Lona
Sketch
templates
Documentation
Android App
Web App
iOS App
Design System
- Typography
- Colors
- Dimensions
- Components
…
HTML,
CSS,
JavaScript
Swift
Java
Sketch
Design System
Slide 22
Slide 22 text
@kristin_baumann !22
Designs with
example data
Use Case 1I: Data
Slide 23
Slide 23 text
@kristin_baumann !22
Designs with
example data
Designs
with real data
from files or APIs
Use Case 1I: Data
Slide 24
Slide 24 text
@kristin_baumann !23
https://github.com/airbnb/react-sketchapp/
tree/master/examples/foursquare-maps
Integrating real data
Slide 25
Slide 25 text
@kristin_baumann !23
https://github.com/airbnb/react-sketchapp/
tree/master/examples/foursquare-maps
Integrating real data
Slide 26
Slide 26 text
@kristin_baumann !24
https://github.com/kristinbaumann/
app-store-image-generator
Integrating real data
Slide 27
Slide 27 text
@kristin_baumann !25
Use Case III: Responsive design
with flexbox
https://github.com/kristinbaumann/react-sketchapp-example-responsive
Slide 28
Slide 28 text
@kristin_baumann !26
15
32
26
13
19
14
13
20
65
29
44
44
25
14
34
26 24
59
26
42
42
49
35 27 49
45
8
12 25
14
12
9
13
21
9
17
10
25 28
17
17
7
24
12
12
9
11
10
8
9
6
11
11
8
13
9
9
14
13
8
10 10
9
10
12
16
11 9
15
8
13
11
13
10
11
9
13
8
13
13
27
30
7
12
10
12
7
5
11
5
10
12
33
22
8
4
8
17
10
18
23
14
15
18
7
13
10
11
47
13 12
15 11
10
17
10
7 10
7
8
11
8 7
18
18
7
8
15
15
17
10
16
102
15 24
19
30
18
12
8
12
14
10
24
8
11
10
14
9 10
12
14
9
10
8
9
24
17
28
29
22
9
9
17
12
6
13
17
17
25
21
13
19
23
11
7
21
8
25
10
18
9
27
42
17
19
33
18
27
13
12
8
13
10
13
8
10
46
11
18
12
15
11
12
16
9
34
14
21 31 28
13
10
15
8
11
19
18
10
13
61
31
27
58 29
24
16
22
35
19
10
19
17
10
25
11
11
11
11
7
20
13
12
11
10
5
7
7
6
13
8
10
8
9
14
7
11
5
11
7
16
15
20
13
26
12
13
21
14
12
22
16
20
28
18
10
10
8
9
28
29
24
19
14
25
23
62
28
37
52
115
40
14
56
19
32
22
17
9
26
18
13
12
11
21
15
17
40
21
26
14
19
15
21
22
11
11
10
17
14
36
23
28
24
22
58
39
39
45
27
18
33
23
24
23
51
23
55
31
19
16
10
23 24
20
22
11
13
6
12
9
35
46
38
89
29
25
39
49
Total Walking Distance per Line
S5 14h 40m
S8 13h 28m
S1 12h 29m
S2 11h 55m
S7 11h 17m
S46 10h 33m
S25 9h 52m
S41 9h 16m
S3 9h 11m
S42 9h 5m
S85 7h 50m
U7 7h 17m
S9 7h 11m
S45 5h 40m
U2 5h 3m
U6 4h 48m
U5 4h 11m
U8 4h 9m
S75 3h 47m
U9 2h 50m
U3 2h 42m
S47 2h 35m
U1 2h 15m
U4 0h 42m
U55 0h 23m
25
13
21
9
12
9
14
13
8
10
10
9
10
12
16
11 9
15
8
13
11
13
10
11
9
11
10
14
8
9
24
28
13
12
10
17
10
25
11
11
11
11
7
20
13
12
11
10
5
7
7
6
13
8
8
9
14
7
11
5
11
7 12
18
20
22
11
13
6
12
9
Use Case IV: Data Visualisation
Slide 29
Slide 29 text
@kristin_baumann !26
15
32
26
13
19
14
13
20
65
29
44
44
25
14
34
26 24
59
26
42
42
49
35 27 49
45
8
12 25
14
12
9
13
21
9
17
10
25 28
17
17
7
24
12
12
9
11
10
8
9
6
11
11
8
13
9
9
14
13
8
10 10
9
10
12
16
11 9
15
8
13
11
13
10
11
9
13
8
13
13
27
30
7
12
10
12
7
5
11
5
10
12
33
22
8
4
8
17
10
18
23
14
15
18
7
13
10
11
47
13 12
15 11
10
17
10
7 10
7
8
11
8 7
18
18
7
8
15
15
17
10
16
102
15 24
19
30
18
12
8
12
14
10
24
8
11
10
14
9 10
12
14
9
10
8
9
24
17
28
29
22
9
9
17
12
6
13
17
17
25
21
13
19
23
11
7
21
8
25
10
18
9
27
42
17
19
33
18
27
13
12
8
13
10
13
8
10
46
11
18
12
15
11
12
16
9
34
14
21 31 28
13
10
15
8
11
19
18
10
13
61
31
27
58 29
24
16
22
35
19
10
19
17
10
25
11
11
11
11
7
20
13
12
11
10
5
7
7
6
13
8
10
8
9
14
7
11
5
11
7
16
15
20
13
26
12
13
21
14
12
22
16
20
28
18
10
10
8
9
28
29
24
19
14
25
23
62
28
37
52
115
40
14
56
19
32
22
17
9
26
18
13
12
11
21
15
17
40
21
26
14
19
15
21
22
11
11
10
17
14
36
23
28
24
22
58
39
39
45
27
18
33
23
24
23
51
23
55
31
19
16
10
23 24
20
22
11
13
6
12
9
35
46
38
89
29
25
39
49
Total Walking Distance per Line
S5 14h 40m
S8 13h 28m
S1 12h 29m
S2 11h 55m
S7 11h 17m
S46 10h 33m
S25 9h 52m
S41 9h 16m
S3 9h 11m
S42 9h 5m
S85 7h 50m
U7 7h 17m
S9 7h 11m
S45 5h 40m
U2 5h 3m
U6 4h 48m
U5 4h 11m
U8 4h 9m
S75 3h 47m
U9 2h 50m
U3 2h 42m
S47 2h 35m
U1 2h 15m
U4 0h 42m
U55 0h 23m
https://medium.com/@kristin_baumann/walking-the-berlin-s-u-bahn-network-ec2c0b2642fd
25
13
21
9
12
9
14
13
8
10
10
9
10
12
16
11 9
15
8
13
11
13
10
11
9
11
10
14
8
9
24
28
13
12
10
17
10
25
11
11
11
11
7
20
13
12
11
10
5
7
7
6
13
8
8
9
14
7
11
5
11
7 12
18
20
22
11
13
6
12
9
Use Case IV: Data Visualisation
Slide 30
Slide 30 text
to build a bridge
between designers and developers
Designing with React
+
Slide 31
Slide 31 text
to build a bridge
between designers and developers
Designing with React
+
@kristin_baumann www.kristin-baumann.com