Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

25448e5eb61d4fd7b35ed73d722f9ad9?s=47 sawa-zen
April 24, 2018

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

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

25448e5eb61d4fd7b35ed73d722f9ad9?s=128

sawa-zen

April 24, 2018
Tweet

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