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
550
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
250
Dip your toe in React programming
kristinbaumann
1
130
Isomorphic JavaScript with ReactJS
kristinbaumann
1
360
Other Decks in Technology
See All in Technology
AI Ready API ─ AI時代に求められるAPI設計とは?/ AI-Ready API - Designing MCP and APIs in the AI Era
yokawasa
21
5.9k
QAを早期に巻き込む”って どうやるの? モヤモヤから抜け出す実践知
moritamasami
2
180
2025-07-25 NOT A HOTEL TECH TALK ━ スマートホーム開発の最前線 ━ SOFTWARE
wakinchan
0
140
AWS表彰プログラムとキャリアについて
naoki_0531
1
120
ゼロから始めるSREの事業貢献 - 生成AI時代のSRE成長戦略と実践 / Starting SRE from Day One
shinyorke
PRO
0
240
スプリントゴール未達症候群に送る処方箋
kakehashi
PRO
1
260
20150719_Amazon Nova Canvas Virtual try-onアプリ 作成裏話
riz3f7
0
140
MCP とマネージド PaaS で実現する大規模 AI アプリケーションの高速開発
nahokoxxx
1
1.6k
Bliki (ja), and the Cathedral, and the Bazaar
koic
8
1.4k
Webの技術とガジェットで那須の子ども達にワクワクを! / IoTLT_20250720
you
PRO
0
130
FAST導入1年間のふりかえり〜現実を直視し、さらなる進化を求めて〜 / Review of the first year of FAST implementation
wooootack
1
140
データエンジニアリング 4年前と変わったこと、 4年前と変わらないこと
tanakarian
2
380
Featured
See All Featured
Balancing Empowerment & Direction
lara
1
500
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Designing for humans not robots
tammielis
253
25k
Designing Experiences People Love
moore
142
24k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
850
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
The Pragmatic Product Professional
lauravandoore
35
6.8k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
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