React Sketch.appでデザインガイドラインを作ってみた

Transcript

1. React Sketch.appͰ σβΠϯΨΠυϥΠϯΛ ࡞ͬͯΈͨ גࣜձࣾϝϧϖΠ ϑϩϯτΤϯυΤϯδχΞ @sawa-zen @sawa-zen (2018/4/22) Roppongi.js

2. @sawa-zen ॴଐɿגࣜձࣾϝϧϖΠ ৬छɿϑϩϯτΤϯυΤϯδχ Ξ/ΠϯλϥΫγϣϯσβΠφʔ Three.js React SketchApp Blender YouTuberେ޷͖ @sawa-zen

   (2018/4/22) Roppongi.js

3. React Sketch.appͬͯ஌ͬͯΔʁ @sawa-zen (2018/4/22) Roppongi.js

4. React Sketch.appͱ͸ • ReactͰSketchσβΠϯΛѻ͑Δπʔϧ • airbnbࣾͷOSS • SketchϓϥάΠϯΛॻ͖ग़ͤΔ • ه๏͸΄΅ReactNa0veͱಉ͡

   @sawa-zen (2018/4/22) Roppongi.js

5. import React from 'react'; import { View, Text, render }

   from 'react-sketchapp'; export default function(context) { render( <View> <Text>Sample Text</Text> </View>, context.document.currentPage() ); } @sawa-zen (2018/4/22) Roppongi.js

6. React Sketch.app͸͍͍ࣄͩΒ͚!! • ίʔυͳͷͰόʔδϣϯ؅ཧͰ͖ͯ࠷ߴ • σβΠϯमਖ਼΋ίʔυϨϏϡʔͰ͖ͯ࠷ߴ • ΤϯδχΞͰ΋σβΠϯमਖ਼Ͱ͖ͯ࠷ߴ @sawa-zen (2018/4/22)

   Roppongi.js

7. React Sketch.app͸͍͍ࣄͩΒ͚!! • ίʔυͳͷͰόʔδϣϯ؅ཧͰ͖ͯ࠷ߴ • σβΠϯमਖ਼΋ίʔυϨϏϡʔͰ͖ͯ࠷ߴ • ΤϯδχΞͰ΋σβΠϯमਖ਼Ͱ͖ͯ࠷ߴ શ෦͜ΕͰॻ͚͹͍͍ͷʹ @sawa-zen

   (2018/4/22) Roppongi.js

8. ΄Μͱʹʁ @sawa-zen (2018/4/22) Roppongi.js

9. React Sketch.app͸ͦΜͳ؁͘ͳ͍!! • σβΠφʔ΋JSΛ֮͑Δඞཁ͕͋Δ • σβΠϯͱΫϥΠΞϯτͷೋ౓ख࣮ؒ૷ • ௚ײతʹσβΠϯͰ͖ͳ͍ @sawa-zen (2018/4/22)

   Roppongi.js

10. શͯReact͸͠ΜͲ͍... ! ! @sawa-zen (2018/4/22) Roppongi.js

11. σβΠϯΨΠυϥΠϯ͚ͩͳΒ...ʁ @sawa-zen (2018/4/22) Roppongi.js

12. @sawa-zen (2018/4/22) Roppongi.js

13. ReactͰॻ͍ͯΈ·ͨ͠ @sawa-zen (2018/4/22) Roppongi.js

14. ReactͰΨΠυϥΠϯΛ ࡞ͬͯΈͯྑ͔ͬͨ͜ͱ @sawa-zen (2018/4/22) Roppongi.js

15. ① ελΠϧ͕ίʔυͱͯ͠ڞ༗Ͱ͖Δ nodeϞδϡʔϧͱͯ͠ڞ༗͢Ε͹ελΠϧΛίʔυ ͯ͠ѻ͑Δ • color • font-size, font-weight •

    margin, padding • etc... @sawa-zen (2018/4/22) Roppongi.js

16. ② ϓϥάΠϯͱͯ͠ڞ༗Ͱ͖Δ ϓϥάΠϯΛ࣮ߦ͢Δ͚ͩͰҎԼ͕̎ͭηοτͰੜ ੒Ͱ͖ΔͨΊɺϓϩδΣΫτΛލ͍ͩσβΠϯͷ౷ ҰԽΛਤΓ΍͍͢ɻ • ελΠϧΨΠυϥΠϯ • γϯϘϧ @sawa-zen

    (2018/4/22) Roppongi.js

17. ③ ࡞Γ΍͍͢ ܁Γฦ͠ViewΛฒ΂Δ࡞ۀ͕ଟ͍ͷͰίʔυͰදݱ ͢Δํ͕଎͍ @sawa-zen (2018/4/22) Roppongi.js

18. ④ ແବͳγϯϘϧ͕࢒Βͳ͍ ޮ཰Խͷҝʹ࡞੒͍ͯͨ͠γϯϘϧ͕ίʔυʹஔ׵ Ͱ͖Δ @sawa-zen (2018/4/22) Roppongi.js

19. ՝୊ • ίϯϙʔωϯτͷࡉ͔ͳσβΠϯ͔Β͸Τϯδχ ΞͰ͸೉͍͠ • σβΠφʔ͞Μͱີͳίϛϡχέʔγϣϯ͕ඞਢ • ݁ہJSΛσβΠφʔ͞Μ΋৮ΔՄೳੑ͕͋Δ • ͦ΋ͦ΋࡞ͬͯΔ༨༟͕ແ͍ࣄ͕ଟ͍

    @sawa-zen (2018/4/22) Roppongi.js

20. Ͱ΋खԠ͑͸͋ͬͨ @sawa-zen (2018/4/22) Roppongi.js

21. ΋ͬͱϓϩμΫτͷUIΛ ྑ͍͖͍ͯͨ͘͠ʂ @sawa-zen (2018/4/22) Roppongi.js

22. ࣮ۀ຿ʹಋೖ͢ΔͨΊʹ͸ʁ @sawa-zen (2018/4/22) Roppongi.js

23. UIͷ৴པੑ޲্Λ୲͏ ৽෦ॺͷര஀͔͠ͳ͍ʂ @sawa-zen (2018/4/22) Roppongi.js

24. Site Reliability EngineeringʢSREʣ ↓ UI Reliability Engineering ʢUREʣ @sawa-zen (2018/4/22)

    Roppongi.js

25. ฐࣾʹ৽෦ॺઃཱݕ౼ ͓ئ͍͠·͢ʂ ! @sawa-zen (2018/4/22) Roppongi.js

26. ϝϧϖΠͰ͸ #z-youtuber ʹ ೖΓ͍ͨํืूͯ͠·͢ @sawa-zen (2018/4/22) Roppongi.js

27. GithubϦϙδτϦ h"ps:/ /github.com/sawa-zen/style-guide @sawa-zen (2018/4/22) Roppongi.js