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
560
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
520
A designer, a developer and a half-baked product walk into a bar...
kristinbaumann
1
260
Dip your toe in React programming
kristinbaumann
1
130
Isomorphic JavaScript with ReactJS
kristinbaumann
1
370
Other Decks in Technology
See All in Technology
認知戦の理解と、市民としての対抗策
hogehuga
0
310
OpenAPIから画面生成に挑戦した話
koinunopochi
0
150
LLM時代の検索とコンテキストエンジニアリング
shibuiwilliam
2
1.1k
知られざるprops命名の慣習 アクション編
uhyo
10
2.4k
AIエージェントの開発に必須な「コンテキスト・エンジニアリング」とは何か──プロンプト・エンジニアリングとの違いを手がかりに考える
masayamoriofficial
0
360
AIドリブンのソフトウェア開発 - うまいやり方とまずいやり方
okdt
PRO
9
570
広島銀行におけるAWS活用の取り組みについて
masakimori
0
130
開発と脆弱性と脆弱性診断についての話
su3158
1
1.1k
JavaScript 研修
recruitengineers
PRO
2
120
ECS モニタリング手法大整理
yendoooo
1
120
実践アプリケーション設計 ②トランザクションスクリプトへの対応
recruitengineers
PRO
2
130
Webアクセシビリティ入門
recruitengineers
PRO
1
200
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
How to train your dragon (web standard)
notwaldorf
96
6.2k
The Language of Interfaces
destraynor
160
25k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Faster Mobile Websites
deanohume
309
31k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
Practical Orchestrator
shlominoach
190
11k
Gamification - CAS2011
davidbonilla
81
5.4k
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