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

デザインガイドラインを作るWebサービスを作っている話 / React Native Meetup 8

25448e5eb61d4fd7b35ed73d722f9ad9?s=47 sawa-zen
June 22, 2018
Design
1
250

デザインガイドラインを作るWebサービスを作っている話 / React Native Meetup 8

25448e5eb61d4fd7b35ed73d722f9ad9?s=128

sawa-zen

June 22, 2018
Tweet

More Decks by sawa-zen

See All by sawa-zen
25448e5eb61d4fd7b35ed73d722f9ad9?s=48 sawa_zen
4
980
25448e5eb61d4fd7b35ed73d722f9ad9?s=48 sawa_zen
2
570
25448e5eb61d4fd7b35ed73d722f9ad9?s=48 sawa_zen
7
1.9k
25448e5eb61d4fd7b35ed73d722f9ad9?s=48 sawa_zen
0
230

Other Decks in Design

See All in Design
37228dc025342eeadeb18bf1c2976a7a?s=48 fixel_admin
0
290
9d1961575e45a8286cdde5f86dbba312?s=48 akatsuki174
1
1.1k
070d33664df274636dad3da21c9b21fc?s=48 rockname
1
510
6fffdd34b95991b0b2847a8a3b663e3f?s=48 adrianfindsnemo
0
200
1439b2421bf9af4d7353a76c5355b6d6?s=48 diegoa4863
1
510
3256ba9ce1e999ba1d724d49ff8227b2?s=48 akitumn
1
330
381ea09c5a26fb7d63ddfc3ccb1d746b?s=48 kgsi
0
320
Ca63f6ee64787c337d905b069085324c?s=48 juliannaromero
0
830
E7c10900ca5d5d106d2231d47eafbac4?s=48 iquares
1
130
342011d3ddbec60bc73c8a4d6a562911?s=48 videlvequio
0
160
A6164c2cb62281a24febe6f722775b98?s=48 miterashishohei
2
990
E7a26dfe337b078af506ec7f79d01557?s=48 ruthbaraz
PRO
1
310

Featured

See All Featured
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
11
1.2k
9375a9529679f1b42b567a640d775e7d?s=48 schacon
152
6.9k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
496
110k
A9179349dd2bdc67f377719f56d85656?s=48 garrettdimon
293
110k
7c8469ee8c9e594c65c59b919626c08d?s=48 scottboms
253
11k
5b6a2bd86ef643786a381a212e0ef2f1?s=48 geoffreycrofte
42
2k
Dad095ea7038f89f760419ce475d5d14?s=48 michaelherold
227
9k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
372
43k
2bb923c57a1fdc3a2eb484bb8d565fd2?s=48 ufuk
61
7.2k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
780
240k
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
69
3.2k
F68cb25ae3e5c2106997454b13b7737d?s=48 brad_frost
162
6.8k

Transcript

  1. σβΠϯΨΠυϥΠϯΛ࡞Δ WebαʔϏεΛ࡞͍ͬͯΔ࿩ Merpay, Inc ϑϩϯτΤϯυΤϯδχΞ @sawa-zen @sawa-zen (2018/6/22) react-na5ve-meetup

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

    @sawa-zen (2018/6/22) react-na5ve-meetup

  3. react-primi*vesͬͯ ஌ͬͯ·͔͢ʁ @sawa-zen (2018/6/22) react-na5ve-meetup

  4. react-primi*vesͱ͸ʁ • ϓϥοτϑΥʔϜຖͷAPIʹࠨӈ͞Εͣڞ௨Ͱ࢖༻ Ͱ͖ΔΠϯλʔϑΣʔε • ҎԼͷrenderʹରͯ͠ಉ͡ίʔυͰView͕࡞ΕΔ • react-dom • react-na.ve

    • react-sketchapp @sawa-zen (2018/6/22) react-na5ve-meetup

  5. ػೳ • View: ϨΠΞ΢τͷͨΊͷίϯϙʔωϯτ • Text: ςΩετͷͨΊͷίϯϙʔωϯτ • Image: ը૾ͷͨΊͷίϯϙʔωϯτ

    • Touchable: ΠϯλϥΫγϣϯͷͨΊͷίϯϙʔω ϯτ • StyleSheet: ReactNa9ve ͷ StyleSheet ͱಉ͡ @sawa-zen (2018/6/22) react-na5ve-meetup

  6. ૝ఆ͠͏Δ࣮༻ྫ σβΠϯஈ֊ͰίʔυͰUIΛ࡞੒͠ ίϯϙʔωϯτΛΤϯδχΞʹڞ༗͢Δ @sawa-zen (2018/6/22) react-na5ve-meetup

  7. @sawa-zen (2018/6/22) react-na5ve-meetup

  8. ΍ͬͯΈͨ!! @sawa-zen (2018/6/22) react-na5ve-meetup

  9. @sawa-zen (2018/6/22) react-na5ve-meetup

  10. @sawa-zen (2018/6/22) react-na5ve-meetup

  11. ײ૝ • ෳࡶͳViewͷ৔߹एׯͷݟͨ໨ͷࠩҟ͕ؾʹͳΔ • σβΠφʔ͞Μʹ͜ͷίʔυॻ͔ͤΔͷ͸ࠅ • ܕఆٛϑΝΠϧ͕ແͯ͘ෆ҆ @sawa-zen (2018/6/22) react-na5ve-meetup

  12. ײ૝ • ෳࡶͳViewͷ৔߹एׯͷݟͨ໨ͷࠩҟ͕ؾʹͳΔ • σβΠφʔ͞Μʹ͜ͷίʔυॻ͔ͤΔͷ͸ࠅ • ܕఆٛϑΝΠϧ͕ແͯ͘ෆ҆ => C޲͚ͷϓϩμΫτʹ͸࣮༻తͰ͸ͳ͍ @sawa-zen

    (2018/6/22) react-na5ve-meetup

  13. ଞʹ༻్͸ແ͍΋ͷ͔ ! @sawa-zen (2018/6/22) react-na5ve-meetup

  14. Ͳ͏͍͏༻్Ͱ͋Ε͹࢖͑ͦ͏͔ʁ • ෳࡶͳViewΛඞཁͱ͠ͳ͍ • ݎ࿚͞Λඞཁͱ͠ͳ͍ • σβΠφʔ͞Μ͕ίʔυΛॻ͘ඞཁ͕ͳ͍ @sawa-zen (2018/6/22) react-na5ve-meetup

  15. ۀ຿ޮ཰ԽπʔϧͰ͋Ε͹ ͍͚ΔͷͰ͸? ! @sawa-zen (2018/6/22) react-na5ve-meetup

  16. ͔͜͜Β͕ຊ୊ @sawa-zen (2018/6/22) react-na5ve-meetup

  17. ͜Μͳ෺Λ࡞Γ࢝Ί·ͨ͠ ελΠϧΨΠυϥΠϯΛWeb্Ͱ࡞੒Ͱ͖Δπʔϧ • SketchͷϓϥάΠϯͱͯ͠ViewΛॻ͖ग़ͤΔ • ΨΠυϥΠϯʹؔΘΔ৘ใΛjsonͰॻ͖ग़ͤΔ • Χϥʔ • ςΩετελΠϧ

    • etc... @sawa-zen (2018/6/22) react-na5ve-meetup

  18. @sawa-zen (2018/6/22) react-na5ve-meetup

  19. DEMO @sawa-zen (2018/6/22) react-na5ve-meetup

  20. Կ͕ྑ͍ͷ͔ • σβΠφʔ͕GUIૢ࡞Ͱѻ͑Δ • jsonͱͯ͠஋͕΋Β͑Δ • ViewϥΠϒϥϦʹ੍ݶ͞Εͳ͍ • JSͰͳͯ͘΋ѻ͑Δ @sawa-zen

    (2018/6/22) react-na5ve-meetup

  21. Կ͕ྑ͍ͷ͔ • σβΠφʔ͕GUIૢ࡞Ͱѻ͑Δ • jsonͱͯ͠஋͕΋Β͑Δ • ViewϥΠϒϥϦʹ੍ݶ͞Εͳ͍ • JSͰͳͯ͘΋ѻ͑Δ =>

    react-primi-ves͕ແବʹͳΒͳ͍ʂ @sawa-zen (2018/6/22) react-na5ve-meetup

  22. ࠓޙͷల๬ • ֤ฤूػೳ • font-famiryύλʔϯ • marginύλʔϯ • border-radiusύλʔϯ •

    jsonͷexport/importػೳ @sawa-zen (2018/6/22) react-na5ve-meetup