Sefirot - Global Brain Design System

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