Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Designing with React
Search
Kristin Baumann
April 28, 2018
Technology
2
460
Designing with React
Talk about designing with React focusing on react-sketchapp
Kristin Baumann
April 28, 2018
Tweet
Share
More Decks by Kristin Baumann
See All by Kristin Baumann
The Sweetness of the JAMstack
kristinbaumann
1
420
A designer, a developer and a half-baked product walk into a bar...
kristinbaumann
1
170
Dip your toe in React programming
kristinbaumann
1
99
Isomorphic JavaScript with ReactJS
kristinbaumann
1
310
Other Decks in Technology
See All in Technology
Azureの基本的な権限管理の勉強会
yhana
0
1.3k
MapLibreとAmazon Location Service
dayjournal
1
160
AOAI をきっかけに 社内の Azure 管理を見直した話
recruitengineers
PRO
1
390
Além do else! Categorizando Pokemóns com Pattern Matching no JavaScript
wmsbill
0
660
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
yajihum
2
1k
GrafanaMeetup_AmazonManagedGrafanaのアクセス制御機能とマルチテナント環境下でのアクセス制御について
daitak
0
320
Android Target SDK 35 (Android 15) 対応の概要
akkie76
0
120
非同期推論システムによるコスト削減と信頼性向上
koki_nishihara
0
280
開発生産性大幅アップ!Postman VS Code拡張機能
nagix
2
500
Janus
bkuhlmann
1
490
Cypress or Playwright?
rainerhahnekamp
0
150
地理空間データ可視化・解析・活用ソリューション Pacific Spatial Solutions (PSS)
pacificspatialsolutions
0
300
Featured
See All Featured
Practical Orchestrator
shlominoach
182
9.7k
The Brand Is Dead. Long Live the Brand.
mthomps
49
29k
Producing Creativity
orderedlist
PRO
337
39k
Rails Girls Zürich Keynote
gr2m
91
13k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
Facilitating Awesome Meetings
lara
42
5.6k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Testing 201, or: Great Expectations
jmmastey
28
6.4k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
7
1k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
14
1.6k
Building an army of robots
kneath
300
41k
Making Projects Easy
brettharned
108
5.5k
Transcript
Kristin Baumann · @kristin_baumann Designing with React +
@kristin_baumann !2 Steve Jobs Design is not just what it
looks like and feels like. Design is how it works.
@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?
@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?
@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?
@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?
@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
@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
@kristin_baumann !9 Render React Components to Sketch
@kristin_baumann !10 A first example https://github.com/kristinbaumann/ react-sketchapp-starter-kit
@kristin_baumann !11 import React from 'react'; import { render, Artboard,
View, Image } from 'react-sketchapp'; const Example = () => ( <Artboard> <View style={{ backgroundColor: '#f1f1f1', borderColor: ‘#333', borderWidth: 5 }}> <Image source="https://goo.gl/uTKYht" style={{ height: 132, width: 580 }}> </Image> </View> </Artboard> ) export default (context) => render(<Example />, context.document.currentPage()) A first example https://github.com/kristinbaumann/ react-sketchapp-starter-kit
@kristin_baumann !12 A peek behind the scenes
@kristin_baumann BohemianCoding - Hello World Example. !13 Sketch is scriptable
@kristin_baumann !14 … with plugins
@kristin_baumann !15 import React from 'react'; import { render, Artboard,
View, Image } from 'react-sketchapp'; const Example = () => ( <Artboard> <View style={{ backgroundColor: '#f1f1f1', borderColor: ‘#333', borderWidth: 5 }}> <Image source="https://goo.gl/uTKYht" style={{ height: 132, width: 580 }}> </Image> </View> </Artboard> ) export default (context) => render(<Example /> , context.document.currentPage()) View - Text - Image - Artboard - Red Box React Sketchapp Components
@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
@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
@kristin_baumann !18 Use Cases
@kristin_baumann https://airbnb.design/painting-with-code/ !19 Design System - Typography - Colors -
Dimensions - Components - … Use Case 1: Design System
@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
@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
@kristin_baumann !22 Designs with example data Use Case 1I: Data
@kristin_baumann !22 Designs with example data Designs with real data
from files or APIs Use Case 1I: Data
@kristin_baumann !23 https://github.com/airbnb/react-sketchapp/ tree/master/examples/foursquare-maps Integrating real data
@kristin_baumann !23 https://github.com/airbnb/react-sketchapp/ tree/master/examples/foursquare-maps Integrating real data
@kristin_baumann !24 https://github.com/kristinbaumann/ app-store-image-generator Integrating real data
@kristin_baumann !25 Use Case III: Responsive design with flexbox https://github.com/kristinbaumann/react-sketchapp-example-responsive
@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
@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
to build a bridge between designers and developers Designing with
React +
to build a bridge between designers and developers Designing with
React + @kristin_baumann www.kristin-baumann.com