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

Sefirot - Global Brain Design System

Sefirot - Global Brain Design System

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

Avatar for Kia King Ishii

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 σβΠϯγεςϜʹ͓͚ΔՌͯ͠ͳ͍ۤ͠Έͷڞ༗ɻ ͦͯͦ͠ͷઌʹ޾ͤΛݟ͚ͭΔͨΊͷݶΓͳ͍௅ઓɻ
  2. © 2023 Global Brain Corporation © 2023 Global Brain Corporation

    Sefirot͕ͲΜͳ΋ͷ͔ ʹ͍͓ͭͯ࿩͠͠·͢
  3. © 2023 Global Brain Corporation © 2023 Global Brain Corporation

    σβΠϯγεςϜ ͦͷ΋ͷʹ͍ͭͯ ͓࿩͍ͨ͠͠
  4. © 2023 Global Brain Corporation © 2023 Global Brain Corporation

    Ͳ͏͢Ε͹͍͍ͷ͔ ਖ਼௚ Θ͔Βͳ͍͜ͱͩΒ͚
  5. © 2023 Global Brain Corporation © 2023 Global Brain Corporation

    ͳΜͰ͜Μͳ͜ͱΛ ๻ͨͪ͸΍ͬͯΔΜͩʁ
  6. © 2023 Global Brain Corporation © 2023 Global Brain Corporation

    ೰ΜͰ͍ͯ΋͍ͳͯ͘΋ Ұॹʹ೰Έ·ͤΜ͔ʁ
  7. © 2023 Global Brain Corporation © 2023 Global Brain Corporation

    ͦͯ͠ߟ͑ͯΈ͍ͨ զʑ͕ ޾ͤʹͳΕΔͷ͔Λ
  8. © 2023 Global Brain Corporation © 2023 Global Brain Corporation

    ࠙਌ձͰ Ϗʔϧยखʹ ٞ࿦Ͱ͖ΔΑ͏ͳ࿩Λ
  9. © 2023 Global Brain Corporation © 2023 Global Brain Corporation

    σβΠϯγεςϜʹ͓͚ΔՌ ͯ͠ͳ͍ۤ͠Έͷڞ༗ɻ ͦͯͦ͠ͷઌʹ޾ͤΛݟ͚ͭ ΔͨΊͷݶΓͳ͍௅ઓɻ
  10. © 2023 Global Brain Corporation © 2023 Global Brain Corporation

    KiaKing ੴҪ ًѥ Vue.js Core Team Member GitHub: @kiaking Twitter: @ KiaKing85
  11. © 2023 Global Brain Corporation © 2023 Global Brain Corporation

    1. Sefirotͱ͸ʁ 2. Design͸೉͍͠ 3. ͡ΌͲ͏͢Δ͔
  12. © 2023 Global Brain Corporation © 2023 Global Brain Corporation

    • Vue Component • CSS Styles ( Variables) • Utility Functions
  13. © 2023 Global Brain Corporation © 2023 Global Brain Corporation

    ΄ͱΜͲ͕ࣾ಺޲͚ ΋͘͠͸ ݶΒΕͨϢʔβ͕ର৅
  14. © 2023 Global Brain Corporation © 2023 Global Brain Corporation

    ϑϧελοΫ 5ਓ ʢ಺2ਓ֎஫ۀ຿ҕୗʣ That's also me! 👋 ଞͷϝϯόʔ΋ࠓ೔͖ͯΔΑʂ 🙌
  15. © 2023 Global Brain Corporation © 2023 Global Brain Corporation

    σβΠϯγεςϜ ͱ͍͏ΑΓ΋ SDKͷΑ͏ͳΠϝʔδ
  16. © 2023 Global Brain Corporation © 2023 Global Brain Corporation

    • Vue ( SFC + TS ) • PostCSS (nested plugin only) • VitePress (docs) • Histoire (story)
  17. © 2023 Global Brain Corporation © 2023 Global Brain Corporation

    ࣾ಺ϢʔεʹಛԽ ՄೳͳݶΓγϯϓϧʹ
  18. © 2023 Global Brain Corporation © 2023 Global Brain Corporation

    OSSͳͷͰ ڵຯ͕͋Ε͹ 
 https://github.com/globalbrain/sefirot
  19. © 2023 Global Brain Corporation © 2023 Global Brain Corporation

    ҰੲલΑΓੌ·͘͡ Α͘ͳͬͨ ͕ɺ͍·Ұา...
  20. © 2023 Global Brain Corporation © 2023 Global Brain Corporation

    • δϨϯϚͱͷઓ͍ • ίετ͕๲େ • ׬ᘳʹͰ͖ͳ͍
  21. © 2023 Global Brain Corporation © 2023 Global Brain Corporation

    σβΠϯ͸୯ʹݟӫ͑ͷͨΊͰͳ͘ 
 ʮࠓදݱ͢΂͖ίϯςϯπʯ 
 ʹͱͬͯ࠷దͳ΋ͷΛ࣮૷͢Δ΂͖
  22. © 2023 Global Brain Corporation © 2023 Global Brain Corporation

    σβΠϯγεςϜͬͯ σβΠϯ͕ઌʹ 
 དྷͯͳ͍ʁ
  23. © 2023 Global Brain Corporation © 2023 Global Brain Corporation

    σβΠϯγεςϜͬͯ ڞ௨Խ͞ΕͨܕΛ ࡞ΔΜ͡Όͳ͍ͷʁ
  24. © 2023 Global Brain Corporation © 2023 Global Brain Corporation

    γεςϜԽͤͣʹ ౎౓ςʔϥʔϝΠυ͢Δ ͕ਖ਼͍͠ͷͰ͸ʁ
  25. © 2023 Global Brain Corporation © 2023 Global Brain Corporation

    ͦ΋ͦ΋ σβΠϯγεςϜͷ είʔϓ͸খ͍͞
  26. © 2023 Global Brain Corporation © 2023 Global Brain Corporation

    খ͞ͳ෦඼͕ू·ͬͯ େ͖ͳσβΠϯʹͳΔ
  27. © 2023 Global Brain Corporation © 2023 Global Brain Corporation

    σβΠϯγεςϜͱ͍͏ ໊લͷͭ͘΋ͷΛ ࡞Γ͍ͨ༁͡Όͳ͍
  28. © 2023 Global Brain Corporation © 2023 Global Brain Corporation

    ʮੈͷதʹιϦϡʔγϣϯ͸ଘࡏ͠ͳ͍ɻ 
 ͋Δͷ͸τϨʔυΦϑ͚ͩͩʯ
  29. © 2023 Global Brain Corporation © 2023 Global Brain Corporation

    • Issueͷىථ • Unit Test • Component Test • Visual Regression Test • Code Review • Docsߋ৽ • Storyߋ৽ • Build + Publish • Package Update
  30. © 2023 Global Brain Corporation © 2023 Global Brain Corporation

    ୭΋͕ເݟΔ σβΠϯγεςϜ͸ ͜Μͳײ͡
  31. © 2023 Global Brain Corporation © 2023 Global Brain Corporation

    ༻ҙ͞Εͨ׬ᘳͳ෦඼Λ 
 ૊Έ߹ΘͤΔͱΞϓϦ͕Ͱ͖Δ
  32. © 2023 Global Brain Corporation © 2023 Global Brain Corporation

    ͜Ε·Ͱ1ϲ݄͔͔ͬͨ 
 ։ൃ͕1೔ͰऴΘΔ
  33. © 2023 Global Brain Corporation © 2023 Global Brain Corporation

    ΠʔϩϯɾϚεΫ͔Β ి࿩͕͔͔͖ͬͯͯ ςεϥͷσβΠϯγεςϜߏஙΛ ௚ʑʹґཔ͞ΕΔ
  34. © 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.
  35. © 2023 Global Brain Corporation © 2023 Global Brain Corporation

    ඞཁͩͱͯ͠΋ ՝୊͸Ұഋ ໰୊͸ࢁੵΈ
  36. © 2023 Global Brain Corporation © 2023 Global Brain Corporation

    σβΠϯγεςϜ͔Β࡞Βͳ͍ɻ ϓϩμΫτ͔ΒσβΠϯΛൈ͖ग़͢ɻ
  37. © 2023 Global Brain Corporation © 2023 Global Brain Corporation

    ͙͢ʹγεςϜԽ͢Δͳɻ ෳ਺ͷՕॴͰࢼͤɻ
  38. © 2023 Global Brain Corporation © 2023 Global Brain Corporation

    σβΠϯγεςϜʹཷΊࠐΉͳɻ ͙͢ʹɺ͍·͙͢ɺ൓ө͠Ζɻ
  39. © 2023 Global Brain Corporation © 2023 Global Brain Corporation

    υΩϡϝϯτͱςετ͸࠷ॳʹॻ͘ɻ ޙճ͠ʹ͠ͳ͍ɻઈରɻ
  40. © 2023 Global Brain Corporation © 2023 Global Brain Corporation

    ͋ͱ͔Βॻ͘ͷ ਏ͗ͯ͢ॻ͔ͳ͍·· ์ஔ͕ͪ͠
  41. © 2023 Global Brain Corporation © 2023 Global Brain Corporation

    ഁյΛڪΕΔͳɻ ϓϩάϨογϒʹվળ͠Ζɻ
  42. © 2023 Global Brain Corporation © 2023 Global Brain Corporation

    Vue 3Ҡߦͷ஍ࠈͰΈΜͳֶΜͩͰ͠ΐ ϓϩάϨογϒେࣄ
  43. © 2023 Global Brain Corporation © 2023 Global Brain Corporation

    σβΠϯγεςϜ͔Β࡞Βͳ͍ɻ ϓϩμΫτ͔ΒσβΠϯΛൈ͖ग़͢ɻ
  44. © 2023 Global Brain Corporation © 2023 Global Brain Corporation

    ͙͢ʹγεςϜԽ͢Δͳɻ ෳ਺ͷՕॴͰࢼͤɻ
  45. © 2023 Global Brain Corporation © 2023 Global Brain Corporation

    σβΠϯγεςϜʹཷΊࠐΉͳɻ ͙͢ʹɺ͍·͙͢ɺ൓ө͠Ζɻ
  46. © 2023 Global Brain Corporation © 2023 Global Brain Corporation

    υΩϡϝϯτͱςετ͸࠷ॳʹॻ͘ɻ ޙճ͠ʹ͠ͳ͍ɻઈରɻ
  47. © 2023 Global Brain Corporation © 2023 Global Brain Corporation

    ഁյΛڪΕΔͳɻ ϓϩάϨογϒʹվળ͠Ζɻ
  48. v-tokyo Meetup #17 – KiaKing, May 18, 2023 Sefirot Global

    Brain Design System σβΠϯγεςϜʹ͓͚ΔՌͯ͠ͳ͍ۤ͠Έͷڞ༗ɻ ͦͯͦ͠ͷઌʹ޾ͤΛݟ͚ͭΔͨΊͷݶΓͳ͍௅ઓɻ