Sefirot - Global Brain Design System

v-tokyo Meetup #17 – KiaKing, May 18, 2023 Sefirot Global
Brain Design System σβΠϯγεςϜʹ͓͚ΔՌͯ͠ͳ͍ۤ͠Έͷڞ༗ɻ ͦͯͦ͠ͷઌʹ޾ͤΛݟ͚ͭΔͨΊͷݶΓͳ͍௅ઓɻ

© 2023 Global Brain Corporation © 2023 Global Brain Corporation
Έͳ͞Μ ͜Μ͹Μ͸

Α͏ͦ͜

v-tokyo Meetup #17

ࠓ೔͸࿩͠·͢

σβΠϯγεςϜ ʹ͍ͭͯ

Sefirot

Global Brain Design System

Sefirot͕ͲΜͳ΋ͷ͔ ʹ͍͓ͭͯ࿩͠͠·͢

͕ɺͦΕҎ্ʹ

σβΠϯγεςϜ ͦͷ΋ͷʹ͍ͭͯ ͓࿩͍ͨ͠͠

࠷ۙ ΊͬͪΌ ೰ΜͰ·͢

ͭΒ͍

σβΠϯγεςϜ ʹ͍ͭͯ

Ͳ͏͢Ε͹͍͍ͷ͔ ਖ਼௚ Θ͔Βͳ͍͜ͱͩΒ͚

ͳΜͰ͜Μͳ͜ͱΛ ๻ͨͪ͸΍ͬͯΔΜͩʁ

ͦ΋ͦ΋ σβΠϯγεςϜͬͯ ͳΜͩʁ

஍ࠈ͔ʁ

Έͳ͞Μ΋ ೰ΜͰͳ͍Ͱ͔͢ʁ

೰ΜͰ͍ͯ΋͍ͳͯ͘΋ Ұॹʹ೰Έ·ͤΜ͔ʁ

Ұॹʹ ͜ͷۤ͠ΈΛ ڞ༗͠·ͤΜ͔

ͦͯ͠ߟ͑ͯΈ͍ͨ զʑ͕ ޾ͤʹͳΕΔͷ͔Λ

࠙਌ձͰ Ϗʔϧยखʹ ٞ࿦Ͱ͖ΔΑ͏ͳ࿩Λ

ࠓ೔͸ ͍ͨ͠ͱࢥ͍·͢

ΦϑϥΠϯͰͷ Πϕϯτ͸௒ٱʑͰ͢

͔ͤͬ͘ͳͷͰ

΍Γ͔͚ͨͬͨͲ ΍ͬͨ͜ͱ͕ͳ͍

Ή͔͠ ͳ͔ͭ͠

TAKAHASHI METHOD

Ͱ͓ૹΓ͠·͢

୊͠·ͯ͠

Sefirot Global Brain Design System

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

KiaKing ੴҪ ًѥ Vue.js Core Team Member GitHub: @kiaking Twitter: @ KiaKing85

HERE WE GO

AGENDA

1. Sefirotͱ͸ʁ

1. Sefirotͱ͸ʁ 2. Design͸೉͍͠

1. Sefirotͱ͸ʁ 2. Design͸೉͍͠ 3. ͡ΌͲ͏͢Δ͔

1. Sefirotͱ͸ʁ

Global Brain Design System

• Vue Component • CSS Styles ( Variables) • Utility Functions

ͦͷલʹ എܠ͸ॏཁ

ͦ΋ͦ΋ Global Brainͬͯʁ

Global Brain͸ ϕϯνϟʔΩϟϐλϧ

৭ʑͳ γεςϜɾΞϓϦΛ ࡞͍ͬͯ·͢

΄ͱΜͲ͕ࣾ಺޲͚ ΋͘͠͸ ݶΒΕͨϢʔβ͕ର৅

νʔϜମ੍

σβΠφʔ 1ਓ That's me! 👋

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

ϙΠϯτ: σβΠφʔ΋ ΤϯδχΞͷ1ਓ

͖ͬͺΓͱ ମ੍͸෼͔Ε͍ͯͳ͍

ͰɺSefirotͬͯʁ

جຊతʹ͸ VueͰ࡞ΒΕͨ UI Library

Vue Components

CSS Styles

Utility Functions

σβΠϯγεςϜ ͱ͍͏ΑΓ΋ SDKͷΑ͏ͳΠϝʔδ

Tech Stack

• Vue ( SFC + TS ) • PostCSS (nested plugin only) • VitePress (docs) • Histoire (story)

Ϗϧυແ͠

ιʔεΛͦͷ·· ύϒϦογϡ

࢖͏࣌͸ ͨͩΠϯϙʔτ

Simple!

ࣾ಺ϢʔεʹಛԽ ՄೳͳݶΓγϯϓϧʹ

OSSͳͷͰ ڵຯ͕͋Ε͹   https://github.com/globalbrain/sefirot

ͳͥ࡞͔ͬͨʁ

ඞཁ͔ͩͬͨΒ

͜Εࠓ೔ͷςʔϚ

ͳͥ࡞Δͷ͔ʁ

ඞཁ͔ͩΒ

............ 🤔

ͳͥඞཁͩͬͨʁ

2. σβΠϯ͸೉͍͠

΢ΣϒσβΠϯ͸ ೉͍͠

ҟৗʹ೉͍͠

Ͳͷ͘Β͍೉͍͠ʁ

Apple

Apple͸ ਘৗͰ͸ͳ͍

׬ᘳͳ ೔ຊޠϨΠΞ΢τ

Google

ҰੲલΑΓੌ·͘͡ Α͘ͳͬͨ ͕ɺ͍·Ұา...

Microsoft

😱

Apple͍͢͝

............͚ͩͲ............

🫠

Apple͕ ແཧͳ͘Β͍ ೉͍͠

σβΠϯγεςϜ͕ ؆୯ͳ༁͕ͳ͍

ͭΒ͍...

ͳͷʹ ͳͥ΍Δͷ͔ʁ

ඞཁ͔ͩΒ

Φʔέʔ ͡Ό͊ ͳͥ೉͍͠ʁ

• δϨϯϚͱͷઓ͍ • ίετ͕๲େ • ׬ᘳʹͰ͖ͳ͍

σβΠϯγεςϜ͸ δϨϯϚͱͷઓ͍

ྫ͑͹ ίϯςϯπϑΝʔετ

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

ͳΔ΄Ͳɻ ͔ͨ͠ʹɻ

Μ......ʁ

σβΠϯΑΓ ίϯςϯπ͕ઌʹདྷΔ

ͦΕ͕ ίϯςϯπϑΝʔετ Ͱ͠ΐʁ

σβΠϯγεςϜͬͯ σβΠϯ͕ઌʹ   དྷͯͳ͍ʁ

σβΠϯγεςϜͬͯ ڞ௨Խ͞ΕͨܕΛ ࡞ΔΜ͡Όͳ͍ͷʁ

ໃ६ͯ͠ͳ͍ʁ

γεςϜԽͤͣʹ ౎౓ςʔϥʔϝΠυ͢Δ ͕ਖ਼͍͠ͷͰ͸ʁ

ͱ͍͏ͷ͸ ۃ࿦͗͢Δ

ҰͭҰͭͷ ෦඼ʹ஫໨ͨ͠৔߹

ͦ΋ͦ΋ σβΠϯγεςϜͷ είʔϓ͸খ͍͞

খ͞ͳ෦඼͕ू·ͬͯ େ͖ͳσβΠϯʹͳΔ

͔ͩΒ ίϯςϯπϑΝʔετ ͸ൣᙝ֎ͩ

͍΍·ͯ

ͦ͏͍͏࿩͕ ͍ͨ͠Μ͡Όͳ͍

໊લʹ नΘΕͯ͸͍͚ͳ͍

σβΠϯγεςϜͱ͍͏ ໊લͷͭ͘΋ͷΛ ࡞Γ͍ͨ༁͡Όͳ͍

Θ͔͍ͬͯΔ͚Ͳ

ͭΒ͍

ͱ͍͏ͷ΋

σβΠϯγεςϜ͸ ίετ͕๲େ

ʮੈͷதʹιϦϡʔγϣϯ͸ଘࡏ͠ͳ͍ɻ   ͋Δͷ͸τϨʔυΦϑ͚ͩͩʯ

ྫ͑͹

Ͳ͏࡞Δʁ

Sefirotͩͱ

͏ͻΐʔʔʔ

ίʔυྔ͕૿͑Δ ͚ͩ͡Όͳ͍

• Issueͷىථ • Unit Test • Component Test • Visual Regression Test • Code Review • Docsߋ৽ • Storyߋ৽ • Build + Publish • Package Update

͜Ε͚ͩ΍ͬͯ

͜Εʁ

ཉ͍͠ίʔυ͸

Ͱ͠ΐʁ

ͭΒ͍...

͚Ͳ

ͳͥ࡞Δͷ͔ʁ

ඞཁ͔ͩΒ

Ͱ΋͜Μͳʹ େมͳͷʹ

σβΠϯγεςϜ͸ ׬ᘳʹͳΒͳ͍

୭΋͕ເݟΔ σβΠϯγεςϜ͸ ͜Μͳײ͡

௒ઈඒ͍͠σβΠϯΛࢥ͍ͭ͘

௒׬ᘳʹγεςϜʹམͱ͠ࠐΉ

୭΋͕ઈࢍ

։ൃ͢Δ࣌͸γεςϜʹै͏͚ͩ

༻ҙ͞Εͨ׬ᘳͳ෦඼Λ   ૊Έ߹ΘͤΔͱΞϓϦ͕Ͱ͖Δ

ͦΕ΋௒εϐʔυ

͜Ε·Ͱ1ϲ݄͔͔ͬͨ   ։ൃ͕1೔ͰऴΘΔ

͔͠΋௒͔͍͍ͬ͜

ΠʔϩϯɾϚεΫ͔Β ి࿩͕͔͔͖ͬͯͯ ςεϥͷσβΠϯγεςϜߏஙΛ ௚ʑʹґཔ͞ΕΔ

MUUUUURYYYYY!!!

σβΠϯγεςϜ͸ ׬ᘳʹͳΒͳ͍

ྫ͑͹

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.

What?

͜Ε͸গ͠ ϑΣΞ͡Όͳ͍

͜Ε͸ ໰୊͡Όͳ͍͸ͣ

σβΠϯγεςϜ͸ վળ͞ΕΔ΋ͷ

ৗʹਐԽ͍ͯ͘͠΋ͷ

׬ᘳͱ͸ มԽ͠ͳ͍΋ͷ

...

......

.........

.........Ͱ΋

͡Ό͍Δͷʁ

Ͳ͏ͤมΘΔΜͰ͠ΐʁ

ͦΕͬͯ ܕ͕ͳ͍ͷͱ Ұॹ͡Όͳ͍ͷʁ

ͭΒ͍...

ͳͥ࡞Δͷ͔ʁ

ඞཁ͔ͩΒ

ඞཁͩͱͯ͠΋ ՝୊͸Ұഋ ໰୊͸ࢁੵΈ

ۃΊ͚ͭʹ ਖ਼ղ΋ͳ͍ʢଟ෼ʣ

ͱ͸͍͑ ͜͏ͨ͠ํ͕ ͍͍ͷͰ͸ʁ

ͱ͍͏ ΞΠσΟΞΛ ͍͔ͭ͘঺հ

3. ͡ΌͲ͏͢Δ͔

σβΠϯγεςϜ͔Β࡞Βͳ͍ɻ ϓϩμΫτ͔ΒσβΠϯΛൈ͖ग़͢ɻ

ҙ֎ͱ΍Γ͕ͪ

͍Βͳ͍ػೳ ͚͕ͭͪ

͜Ε શ͘࢖ͬͯ ·ͤΜ

զຫ͠Α͏

͙͢ʹγεςϜԽ͢Δͳɻ ෳ਺ͷՕॴͰࢼͤɻ

͙͢৽͍͠ػೳ ཉ͘͠ͳͬͪΌ͍͕ͪ

NO is temporary, YES is forever.

ޙչ͢Δͧ

զຫ͠Α͏

σβΠϯγεςϜʹཷΊࠐΉͳɻ ͙͢ʹɺ͍·͙͢ɺ൓ө͠Ζɻ

σβΠϯγεςϜ͚ͩ ཱ೿ʹͳΓ͕ͪ

ੈʹग़ͯͳ͍ͳΒ ͳ͍ͷͱҰॹ

υΩϡϝϯτͱςετ͸࠷ॳʹॻ͘ɻ ޙճ͠ʹ͠ͳ͍ɻઈରɻ

·͡Ͱ

͋ͱ͔Βॻ͘ͷ ਏ͗ͯ͢ॻ͔ͳ͍·· ์ஔ͕ͪ͠

·͡Ͱ

ഁյΛڪΕΔͳɻ ϓϩάϨογϒʹվળ͠Ζɻ

ࠓ͋ΔػೳΛ ݴ͍༁ʹ͕ͪ͠

ϑϧεΫϥον͸஍ࠈ

Vue 3Ҡߦͷ஍ࠈͰΈΜͳֶΜͩͰ͠ΐ ϓϩάϨογϒେࣄ

͓͞Β͍

σβΠϯγεςϜ͔Β࡞Βͳ͍ɻ ϓϩμΫτ͔ΒσβΠϯΛൈ͖ग़͢ɻ

͙͢ʹγεςϜԽ͢Δͳɻ ෳ਺ͷՕॴͰࢼͤɻ

σβΠϯγεςϜʹཷΊࠐΉͳɻ ͙͢ʹɺ͍·͙͢ɺ൓ө͠Ζɻ

υΩϡϝϯτͱςετ͸࠷ॳʹॻ͘ɻ ޙճ͠ʹ͠ͳ͍ɻઈରɻ

ഁյΛڪΕΔͳɻ ϓϩάϨογϒʹվળ͠Ζɻ

😶

ۤͯ͘͠΋ɺ޾ͤ͸͋Δ

ۤͯ͘͠΋ɺ޾ͤ΋͋Δ

͍͔ۤ͠Βɺ޾͕ͤ͋Δ

NO PAIN, NO GAIN

ҿΈ·͠ΐ͏ 🍻

THANK YOU

v-tokyo Meetup #17 – KiaKing, May 18, 2023 Sefirot Global
Brain Design System σβΠϯγεςϜʹ͓͚ΔՌͯ͠ͳ͍ۤ͠Έͷڞ༗ɻ ͦͯͦ͠ͷઌʹ޾ͤΛݟ͚ͭΔͨΊͷݶΓͳ͍௅ઓɻ

Sefirot - Global Brain Design System

Sefirot - Global Brain Design System

More Decks by Kia King Ishii

Other Decks in Design

Featured

Transcript