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

リポジトリのURLはこちらです
https://github.com/sawa-zen/style-guide

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