Designing with React

Designing with React

Talk about designing with React focusing on react-sketchapp

C2dc413b54db210547885a5adc437e68?s=128

Kristin Baumann

April 28, 2018
Tweet

Transcript

  1. Kristin Baumann · @kristin_baumann Designing with React +

  2. @kristin_baumann !2 Steve Jobs Design is not just what it

    looks like and feels like. Design is how it works.
  3. @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?
  4. @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?
  5. @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?
  6. @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?
  7. @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
  8. @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
  9. @kristin_baumann !9 Render React Components to Sketch

  10. @kristin_baumann !10 A first example https://github.com/kristinbaumann/ react-sketchapp-starter-kit

  11. @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
  12. @kristin_baumann !12 A peek behind the scenes

  13. @kristin_baumann BohemianCoding - Hello World Example. !13 Sketch is scriptable

  14. @kristin_baumann !14 … with plugins

  15. @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
  16. @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
  17. @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
  18. @kristin_baumann !18 Use Cases

  19. @kristin_baumann https://airbnb.design/painting-with-code/ !19 Design System - Typography - Colors -

    Dimensions - Components - … Use Case 1: Design System
  20. @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
  21. @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
  22. @kristin_baumann !22 Designs with example data Use Case 1I: Data

  23. @kristin_baumann !22 Designs with example data Designs with real data

    from files or APIs Use Case 1I: Data
  24. @kristin_baumann !23 https://github.com/airbnb/react-sketchapp/ tree/master/examples/foursquare-maps Integrating real data

  25. @kristin_baumann !23 https://github.com/airbnb/react-sketchapp/ tree/master/examples/foursquare-maps Integrating real data

  26. @kristin_baumann !24 https://github.com/kristinbaumann/ app-store-image-generator Integrating real data

  27. @kristin_baumann !25 Use Case III: Responsive design with flexbox https://github.com/kristinbaumann/react-sketchapp-example-responsive

  28. @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
  29. @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
  30. to build a bridge between designers and developers Designing with

    React +
  31. to build a bridge between designers and developers Designing with

    React + @kristin_baumann www.kristin-baumann.com