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

Sefirot - Global Brain Design System

Sefirot - Global Brain Design System

デザインシステムにおける果てしない苦しみの共有。そしてその先に幸せを見つけるための限りない挑戦。

Kia King Ishii

May 18, 2023
Tweet

More Decks by Kia King Ishii

Other Decks in Design

Transcript

  1. v-tokyo Meetup #17

    KiaKing, May 18, 2023
    Sefirot


    Global Brain


    Design System
    σβΠϯγεςϜʹ͓͚ΔՌͯ͠ͳ͍ۤ͠Έͷڞ༗ɻ


    ͦͯͦ͠ͷઌʹ޾ͤΛݟ͚ͭΔͨΊͷݶΓͳ͍௅ઓɻ

    View Slide

  2. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    Έͳ͞Μ


    ͜Μ͹Μ͸

    View Slide

  3. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    Α͏ͦ͜

    View Slide

  4. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    v-tokyo Meetup #17

    View Slide

  5. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ࠓ೔͸࿩͠·͢

    View Slide

  6. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    σβΠϯγεςϜ


    ʹ͍ͭͯ

    View Slide

  7. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    Sefirot

    View Slide

  8. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    Global Brain


    Design System

    View Slide

  9. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    Sefirot͕ͲΜͳ΋ͷ͔


    ʹ͍͓ͭͯ࿩͠͠·͢

    View Slide

  10. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͕ɺͦΕҎ্ʹ

    View Slide

  11. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    σβΠϯγεςϜ


    ͦͷ΋ͷʹ͍ͭͯ


    ͓࿩͍ͨ͠͠

    View Slide

  12. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ࠷ۙ


    ΊͬͪΌ


    ೰ΜͰ·͢

    View Slide

  13. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͭΒ͍

    View Slide

  14. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    σβΠϯγεςϜ


    ʹ͍ͭͯ

    View Slide

  15. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    Ͳ͏͢Ε͹͍͍ͷ͔


    ਖ਼௚


    Θ͔Βͳ͍͜ͱͩΒ͚

    View Slide

  16. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͳΜͰ͜Μͳ͜ͱΛ


    ๻ͨͪ͸΍ͬͯΔΜͩʁ

    View Slide

  17. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͦ΋ͦ΋


    σβΠϯγεςϜͬͯ


    ͳΜͩʁ

    View Slide

  18. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ஍ࠈ͔ʁ

    View Slide

  19. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    Έͳ͞Μ΋


    ೰ΜͰͳ͍Ͱ͔͢ʁ

    View Slide

  20. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ೰ΜͰ͍ͯ΋͍ͳͯ͘΋


    Ұॹʹ೰Έ·ͤΜ͔ʁ

    View Slide

  21. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    Ұॹʹ


    ͜ͷۤ͠ΈΛ


    ڞ༗͠·ͤΜ͔

    View Slide

  22. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͦͯ͠ߟ͑ͯΈ͍ͨ


    զʑ͕


    ޾ͤʹͳΕΔͷ͔Λ

    View Slide

  23. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ࠙਌ձͰ


    Ϗʔϧยखʹ


    ٞ࿦Ͱ͖ΔΑ͏ͳ࿩Λ

    View Slide

  24. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ࠓ೔͸


    ͍ͨ͠ͱࢥ͍·͢

    View Slide

  25. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ΦϑϥΠϯͰͷ


    Πϕϯτ͸௒ٱʑͰ͢

    View Slide

  26. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͔ͤͬ͘ͳͷͰ

    View Slide

  27. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ΍Γ͔͚ͨͬͨͲ


    ΍ͬͨ͜ͱ͕ͳ͍

    View Slide

  28. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    Ή͔͠


    ͳ͔ͭ͠

    View Slide

  29. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    TAKAHASHI


    METHOD

    View Slide

  30. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    Ͱ͓ૹΓ͠·͢

    View Slide

  31. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ୊͠·ͯ͠

    View Slide

  32. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    Sefirot


    Global Brain


    Design System

    View Slide

  33. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    σβΠϯγεςϜʹ͓͚ΔՌ
    ͯ͠ͳ͍ۤ͠Έͷڞ༗ɻ


    ͦͯͦ͠ͷઌʹ޾ͤΛݟ͚ͭ
    ΔͨΊͷݶΓͳ͍௅ઓɻ

    View Slide

  34. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    KiaKing


    ੴҪ ًѥ


    Vue.js Core Team Member


    GitHub: @kiaking


    Twitter:
    @
    KiaKing85

    View Slide

  35. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    HERE WE GO

    View Slide

  36. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    AGENDA

    View Slide

  37. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    1. Sefirotͱ͸ʁ

    View Slide

  38. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    1. Sefirotͱ͸ʁ


    2. Design͸೉͍͠

    View Slide

  39. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    1. Sefirotͱ͸ʁ


    2. Design͸೉͍͠


    3. ͡ΌͲ͏͢Δ͔

    View Slide

  40. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    1. Sefirotͱ͸ʁ

    View Slide

  41. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation

    View Slide

  42. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    Global Brain


    Design System

    View Slide

  43. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    • Vue Component


    • CSS Styles
    (
    Variables)


    • Utility Functions

    View Slide

  44. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͦͷલʹ


    എܠ͸ॏཁ

    View Slide

  45. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͦ΋ͦ΋


    Global Brainͬͯʁ

    View Slide

  46. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    Global Brain͸


    ϕϯνϟʔΩϟϐλϧ

    View Slide

  47. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ৭ʑͳ


    γεςϜɾΞϓϦΛ


    ࡞͍ͬͯ·͢

    View Slide

  48. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation

    View Slide

  49. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation

    View Slide

  50. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation

    View Slide

  51. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ΄ͱΜͲ͕ࣾ಺޲͚


    ΋͘͠͸


    ݶΒΕͨϢʔβ͕ର৅

    View Slide

  52. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    νʔϜମ੍

    View Slide

  53. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    σβΠφʔ


    1ਓ


    That's me! 👋

    View Slide

  54. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ϑϧελοΫ


    5ਓ ʢ಺2ਓ֎஫ۀ຿ҕୗʣ


    That's also me! 👋


    ଞͷϝϯόʔ΋ࠓ೔͖ͯΔΑʂ 🙌

    View Slide

  55. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ϙΠϯτ:


    σβΠφʔ΋


    ΤϯδχΞͷ1ਓ

    View Slide

  56. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͖ͬͺΓͱ


    ମ੍͸෼͔Ε͍ͯͳ͍

    View Slide

  57. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͰɺSefirotͬͯʁ

    View Slide

  58. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    جຊతʹ͸


    VueͰ࡞ΒΕͨ


    UI Library

    View Slide

  59. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    Vue Components

    View Slide

  60. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation

    View Slide

  61. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation

    View Slide

  62. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation

    View Slide

  63. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    CSS Styles

    View Slide

  64. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation

    View Slide

  65. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    Utility Functions

    View Slide

  66. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation

    View Slide

  67. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    σβΠϯγεςϜ


    ͱ͍͏ΑΓ΋


    SDKͷΑ͏ͳΠϝʔδ

    View Slide

  68. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    Tech Stack

    View Slide

  69. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    • Vue
    (
    SFC
    +
    TS
    )


    • PostCSS (nested plugin only)


    • VitePress (docs)


    • Histoire (story)

    View Slide

  70. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    Ϗϧυແ͠

    View Slide

  71. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ιʔεΛͦͷ··


    ύϒϦογϡ

    View Slide

  72. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ࢖͏࣌͸


    ͨͩΠϯϙʔτ

    View Slide

  73. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation

    View Slide

  74. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    Simple!

    View Slide

  75. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ࣾ಺ϢʔεʹಛԽ


    ՄೳͳݶΓγϯϓϧʹ

    View Slide

  76. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    OSSͳͷͰ


    ڵຯ͕͋Ε͹

    https://github.com/globalbrain/sefirot

    View Slide

  77. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͳͥ࡞͔ͬͨʁ

    View Slide

  78. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ඞཁ͔ͩͬͨΒ

    View Slide

  79. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͜Εࠓ೔ͷςʔϚ

    View Slide

  80. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͳͥ࡞Δͷ͔ʁ

    View Slide

  81. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ඞཁ͔ͩΒ

    View Slide

  82. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ............ 🤔

    View Slide

  83. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͳͥඞཁͩͬͨʁ

    View Slide

  84. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    2. σβΠϯ͸೉͍͠

    View Slide

  85. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ΢ΣϒσβΠϯ͸


    ೉͍͠

    View Slide

  86. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ҟৗʹ೉͍͠

    View Slide

  87. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    Ͳͷ͘Β͍೉͍͠ʁ

    View Slide

  88. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    Apple

    View Slide

  89. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    Apple͸


    ਘৗͰ͸ͳ͍

    View Slide

  90. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation

    View Slide

  91. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation

    View Slide

  92. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation

    View Slide

  93. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ׬ᘳͳ


    ೔ຊޠϨΠΞ΢τ

    View Slide

  94. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    Google

    View Slide

  95. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation

    View Slide

  96. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation

    View Slide

  97. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation

    View Slide

  98. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation

    View Slide

  99. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ҰੲલΑΓੌ·͘͡


    Α͘ͳͬͨ


    ͕ɺ͍·Ұา...

    View Slide

  100. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    Microsoft

    View Slide

  101. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation

    View Slide

  102. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    😱

    View Slide

  103. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    Apple͍͢͝

    View Slide

  104. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ............͚ͩͲ............

    View Slide

  105. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation

    View Slide

  106. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation

    View Slide

  107. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation

    View Slide

  108. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    🫠

    View Slide

  109. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation

    View Slide

  110. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ΢ΣϒσβΠϯ͸


    ೉͍͠

    View Slide

  111. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    Apple͕


    ແཧͳ͘Β͍


    ೉͍͠

    View Slide

  112. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ΢ΣϒσβΠϯ͸


    ೉͍͠

    View Slide

  113. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    σβΠϯγεςϜ͕


    ؆୯ͳ༁͕ͳ͍

    View Slide

  114. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͭΒ͍...

    View Slide

  115. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͳͷʹ


    ͳͥ΍Δͷ͔ʁ

    View Slide

  116. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ඞཁ͔ͩΒ

    View Slide

  117. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    Φʔέʔ


    ͡Ό͊


    ͳͥ೉͍͠ʁ

    View Slide

  118. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    • δϨϯϚͱͷઓ͍


    • ίετ͕๲େ


    • ׬ᘳʹͰ͖ͳ͍

    View Slide

  119. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    σβΠϯγεςϜ͸


    δϨϯϚͱͷઓ͍

    View Slide

  120. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ྫ͑͹


    ίϯςϯπϑΝʔετ

    View Slide

  121. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    σβΠϯ͸୯ʹݟӫ͑ͷͨΊͰͳ͘

    ʮࠓදݱ͢΂͖ίϯςϯπʯ

    ʹͱͬͯ࠷దͳ΋ͷΛ࣮૷͢Δ΂͖

    View Slide

  122. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͳΔ΄Ͳɻ


    ͔ͨ͠ʹɻ

    View Slide

  123. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    Μ......ʁ

    View Slide

  124. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    σβΠϯΑΓ


    ίϯςϯπ͕ઌʹདྷΔ

    View Slide

  125. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͦΕ͕


    ίϯςϯπϑΝʔετ


    Ͱ͠ΐʁ

    View Slide

  126. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    σβΠϯγεςϜͬͯ


    σβΠϯ͕ઌʹ

    དྷͯͳ͍ʁ

    View Slide

  127. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    σβΠϯγεςϜͬͯ


    ڞ௨Խ͞ΕͨܕΛ


    ࡞ΔΜ͡Όͳ͍ͷʁ

    View Slide

  128. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ໃ६ͯ͠ͳ͍ʁ

    View Slide

  129. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    γεςϜԽͤͣʹ


    ౎౓ςʔϥʔϝΠυ͢Δ


    ͕ਖ਼͍͠ͷͰ͸ʁ

    View Slide

  130. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͱ͍͏ͷ͸


    ۃ࿦͗͢Δ

    View Slide

  131. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ҰͭҰͭͷ


    ෦඼ʹ஫໨ͨ͠৔߹

    View Slide

  132. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͦ΋ͦ΋


    σβΠϯγεςϜͷ


    είʔϓ͸খ͍͞

    View Slide

  133. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    খ͞ͳ෦඼͕ू·ͬͯ


    େ͖ͳσβΠϯʹͳΔ

    View Slide

  134. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͔ͩΒ


    ίϯςϯπϑΝʔετ


    ͸ൣᙝ֎ͩ

    View Slide

  135. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͍΍·ͯ

    View Slide

  136. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͦ͏͍͏࿩͕


    ͍ͨ͠Μ͡Όͳ͍

    View Slide

  137. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ໊લʹ


    नΘΕͯ͸͍͚ͳ͍

    View Slide

  138. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    σβΠϯγεςϜͱ͍͏


    ໊લͷͭ͘΋ͷΛ


    ࡞Γ͍ͨ༁͡Όͳ͍

    View Slide

  139. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    Θ͔͍ͬͯΔ͚Ͳ

    View Slide

  140. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͭΒ͍

    View Slide

  141. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͱ͍͏ͷ΋

    View Slide

  142. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    σβΠϯγεςϜ͸


    ίετ͕๲େ

    View Slide

  143. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ʮੈͷதʹιϦϡʔγϣϯ͸ଘࡏ͠ͳ͍ɻ

    ͋Δͷ͸τϨʔυΦϑ͚ͩͩʯ

    View Slide

  144. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ྫ͑͹

    View Slide

  145. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation

    View Slide

  146. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    Ͳ͏࡞Δʁ

    View Slide

  147. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation

    View Slide

  148. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    Sefirotͩͱ

    View Slide

  149. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation

    View Slide

  150. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation

    View Slide

  151. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation

    View Slide

  152. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͏ͻΐʔʔʔ

    View Slide

  153. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ίʔυྔ͕૿͑Δ


    ͚ͩ͡Όͳ͍

    View Slide

  154. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    • Issueͷىථ


    • Unit Test


    • Component Test


    • Visual Regression Test


    • Code Review


    • Docsߋ৽


    • Storyߋ৽


    • Build
    +
    Publish


    • Package Update

    View Slide

  155. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͜Ε͚ͩ΍ͬͯ

    View Slide

  156. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͜Εʁ

    View Slide

  157. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ཉ͍͠ίʔυ͸

    View Slide

  158. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation

    View Slide

  159. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    Ͱ͠ΐʁ

    View Slide

  160. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͭΒ͍...

    View Slide

  161. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͚Ͳ

    View Slide

  162. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͳͥ࡞Δͷ͔ʁ

    View Slide

  163. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ඞཁ͔ͩΒ

    View Slide

  164. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    Ͱ΋͜Μͳʹ


    େมͳͷʹ

    View Slide

  165. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    σβΠϯγεςϜ͸


    ׬ᘳʹͳΒͳ͍

    View Slide

  166. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ୭΋͕ເݟΔ


    σβΠϯγεςϜ͸


    ͜Μͳײ͡

    View Slide

  167. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ௒ઈඒ͍͠σβΠϯΛࢥ͍ͭ͘

    View Slide

  168. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ௒׬ᘳʹγεςϜʹམͱ͠ࠐΉ

    View Slide

  169. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ୭΋͕ઈࢍ

    View Slide

  170. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ։ൃ͢Δ࣌͸γεςϜʹै͏͚ͩ

    View Slide

  171. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ༻ҙ͞Εͨ׬ᘳͳ෦඼Λ

    ૊Έ߹ΘͤΔͱΞϓϦ͕Ͱ͖Δ

    View Slide

  172. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͦΕ΋௒εϐʔυ

    View Slide

  173. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͜Ε·Ͱ1ϲ݄͔͔ͬͨ

    ։ൃ͕1೔ͰऴΘΔ

    View Slide

  174. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͔͠΋௒͔͍͍ͬ͜

    View Slide

  175. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ΠʔϩϯɾϚεΫ͔Β


    ి࿩͕͔͔͖ͬͯͯ


    ςεϥͷσβΠϯγεςϜߏஙΛ


    ௚ʑʹґཔ͞ΕΔ

    View Slide

  176. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    MUUUUURYYYYY!!!

    View Slide

  177. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    σβΠϯγεςϜ͸


    ׬ᘳʹͳΒͳ͍

    View Slide

  178. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ྫ͑͹

    View Slide

  179. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation

    View Slide

  180. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation

    View Slide

  181. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation

    View Slide

  182. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation

    View Slide

  183. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    Toggle switches are buttons that change and save a
    boolean configuration option when they are toggled.


    Checkboxes are form inputs that are used to select one or
    more items from a list, and are not saved without explicit
    confirmation such as pressing a Save button.

    View Slide

  184. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation

    View Slide

  185. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    What?

    View Slide

  186. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͜Ε͸গ͠


    ϑΣΞ͡Όͳ͍

    View Slide

  187. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͜Ε͸


    ໰୊͡Όͳ͍͸ͣ

    View Slide

  188. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    σβΠϯγεςϜ͸


    վળ͞ΕΔ΋ͷ

    View Slide

  189. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ৗʹਐԽ͍ͯ͘͠΋ͷ

    View Slide

  190. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ׬ᘳͱ͸


    มԽ͠ͳ͍΋ͷ

    View Slide

  191. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ...

    View Slide

  192. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ......

    View Slide

  193. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    .........

    View Slide

  194. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    .........Ͱ΋

    View Slide

  195. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͡Ό͍Δͷʁ

    View Slide

  196. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    Ͳ͏ͤมΘΔΜͰ͠ΐʁ

    View Slide

  197. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͦΕͬͯ


    ܕ͕ͳ͍ͷͱ


    Ұॹ͡Όͳ͍ͷʁ

    View Slide

  198. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͭΒ͍...

    View Slide

  199. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͳͥ࡞Δͷ͔ʁ

    View Slide

  200. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ඞཁ͔ͩΒ

    View Slide

  201. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ඞཁͩͱͯ͠΋


    ՝୊͸Ұഋ


    ໰୊͸ࢁੵΈ

    View Slide

  202. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ۃΊ͚ͭʹ


    ਖ਼ղ΋ͳ͍ʢଟ෼ʣ

    View Slide

  203. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͱ͸͍͑


    ͜͏ͨ͠ํ͕


    ͍͍ͷͰ͸ʁ

    View Slide

  204. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͱ͍͏


    ΞΠσΟΞΛ


    ͍͔ͭ͘঺հ

    View Slide

  205. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    3. ͡ΌͲ͏͢Δ͔

    View Slide

  206. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    σβΠϯγεςϜ͔Β࡞Βͳ͍ɻ


    ϓϩμΫτ͔ΒσβΠϯΛൈ͖ग़͢ɻ

    View Slide

  207. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ҙ֎ͱ΍Γ͕ͪ

    View Slide

  208. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͍Βͳ͍ػೳ


    ͚͕ͭͪ

    View Slide

  209. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation

    View Slide

  210. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͜Ε

    શ͘࢖ͬͯ

    ·ͤΜ

    View Slide

  211. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    զຫ͠Α͏

    View Slide

  212. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͙͢ʹγεςϜԽ͢Δͳɻ


    ෳ਺ͷՕॴͰࢼͤɻ

    View Slide

  213. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͙͢৽͍͠ػೳ


    ཉ͘͠ͳͬͪΌ͍͕ͪ

    View Slide

  214. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    NO is temporary,


    YES is forever.

    View Slide

  215. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ޙչ͢Δͧ

    View Slide

  216. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    զຫ͠Α͏

    View Slide

  217. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    σβΠϯγεςϜʹཷΊࠐΉͳɻ


    ͙͢ʹɺ͍·͙͢ɺ൓ө͠Ζɻ

    View Slide

  218. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    σβΠϯγεςϜ͚ͩ


    ཱ೿ʹͳΓ͕ͪ

    View Slide

  219. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ੈʹग़ͯͳ͍ͳΒ


    ͳ͍ͷͱҰॹ

    View Slide

  220. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    υΩϡϝϯτͱςετ͸࠷ॳʹॻ͘ɻ


    ޙճ͠ʹ͠ͳ͍ɻઈରɻ

    View Slide

  221. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ·͡Ͱ

    View Slide

  222. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͋ͱ͔Βॻ͘ͷ


    ਏ͗ͯ͢ॻ͔ͳ͍··


    ์ஔ͕ͪ͠

    View Slide

  223. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ·͡Ͱ

    View Slide

  224. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ഁյΛڪΕΔͳɻ


    ϓϩάϨογϒʹվળ͠Ζɻ

    View Slide

  225. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ࠓ͋ΔػೳΛ


    ݴ͍༁ʹ͕ͪ͠

    View Slide

  226. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ϑϧεΫϥον͸஍ࠈ

    View Slide

  227. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    Vue 3Ҡߦͷ஍ࠈͰΈΜͳֶΜͩͰ͠ΐ


    ϓϩάϨογϒେࣄ

    View Slide

  228. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͓͞Β͍

    View Slide

  229. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    σβΠϯγεςϜ͔Β࡞Βͳ͍ɻ


    ϓϩμΫτ͔ΒσβΠϯΛൈ͖ग़͢ɻ

    View Slide

  230. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͙͢ʹγεςϜԽ͢Δͳɻ


    ෳ਺ͷՕॴͰࢼͤɻ

    View Slide

  231. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    σβΠϯγεςϜʹཷΊࠐΉͳɻ


    ͙͢ʹɺ͍·͙͢ɺ൓ө͠Ζɻ

    View Slide

  232. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    υΩϡϝϯτͱςετ͸࠷ॳʹॻ͘ɻ


    ޙճ͠ʹ͠ͳ͍ɻઈରɻ

    View Slide

  233. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ഁյΛڪΕΔͳɻ


    ϓϩάϨογϒʹվળ͠Ζɻ

    View Slide

  234. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    😶

    View Slide

  235. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ۤͯ͘͠΋ɺ޾ͤ͸͋Δ

    View Slide

  236. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ۤͯ͘͠΋ɺ޾ͤ΋͋Δ

    View Slide

  237. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ͍͔ۤ͠Βɺ޾͕ͤ͋Δ

    View Slide

  238. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    NO PAIN, NO GAIN

    View Slide

  239. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    ҿΈ·͠ΐ͏ 🍻

    View Slide

  240. © 2023 Global Brain Corporation
    © 2023 Global Brain Corporation
    THANK YOU

    View Slide

  241. v-tokyo Meetup #17

    KiaKing, May 18, 2023
    Sefirot


    Global Brain


    Design System
    σβΠϯγεςϜʹ͓͚ΔՌͯ͠ͳ͍ۤ͠Έͷڞ༗ɻ


    ͦͯͦ͠ͷઌʹ޾ͤΛݟ͚ͭΔͨΊͷݶΓͳ͍௅ઓɻ

    View Slide