Designing with React

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