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

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

sawa-zen
April 24, 2018

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

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

sawa-zen

April 24, 2018
Tweet

More Decks by sawa-zen

Other Decks in Programming

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

  4. React Sketch.appͱ͸
    • ReactͰSketchσβΠϯΛѻ͑Δπʔϧ
    • airbnbࣾͷOSS
    • SketchϓϥάΠϯΛॻ͖ग़ͤΔ
    • ه๏͸΄΅ReactNa0veͱಉ͡
    @sawa-zen (2018/4/22) Roppongi.js

    View Slide

  5. import React from 'react';
    import { View, Text, render } from 'react-sketchapp';
    export default function(context) {
    render(

    Sample Text
    ,
    context.document.currentPage()
    );
    }
    @sawa-zen (2018/4/22) Roppongi.js

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  15. ① ελΠϧ͕ίʔυͱͯ͠ڞ༗Ͱ͖Δ
    nodeϞδϡʔϧͱͯ͠ڞ༗͢Ε͹ελΠϧΛίʔυ
    ͯ͠ѻ͑Δ
    • color
    • font-size, font-weight
    • margin, padding
    • etc...
    @sawa-zen (2018/4/22) Roppongi.js

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  24. Site Reliability EngineeringʢSREʣ

    UI Reliability Engineering
    ʢUREʣ
    @sawa-zen (2018/4/22) Roppongi.js

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide