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
530
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
500
A designer, a developer and a half-baked product walk into a bar...
kristinbaumann
1
230
Dip your toe in React programming
kristinbaumann
1
110
Isomorphic JavaScript with ReactJS
kristinbaumann
1
340
Other Decks in Technology
See All in Technology
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
yusukeiwaki
11
2.9k
偶然 × 行動で人生の可能性を広げよう / Serendipity × Action: Discover Your Possibilities
ar_tama
1
990
インフラをつくるとはどういうことなのか、 あるいはPlatform Engineeringについて
nwiizo
5
2.4k
Oracle Cloud Infrastructure:2025年2月度サービス・アップデート
oracle4engineer
PRO
1
140
地方拠点で エンジニアリングマネージャーってできるの? 〜地方という制約を楽しむオーナーシップとコミュニティ作り〜
1coin
1
220
Data-centric AI入門第6章:Data-centric AIの実践例
x_ttyszk
1
390
明日からできる!技術的負債の返済を加速するための実践ガイド~『ホットペッパービューティー』の事例をもとに~
recruitengineers
PRO
3
290
「海外登壇」という 選択肢を与えるために 〜Gophers EX
logica0419
0
640
N=1から解き明かすAWS ソリューションアーキテクトの魅力
kiiwami
0
110
あれは良かった、あれは苦労したB2B2C型SaaSの新規開発におけるCloud Spanner
hirohito1108
2
370
Culture Deck
optfit
0
390
関東Kaggler会LT: 人狼コンペとLLM量子化について
nejumi
3
540
Featured
See All Featured
Six Lessons from altMBA
skipperchong
27
3.6k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.8k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Building Applications with DynamoDB
mza
93
6.2k
Rails Girls Zürich Keynote
gr2m
94
13k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
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