Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Atomic Design の課題とその現実的解決策/Atomic Design
Search
sawa-zen
August 25, 2021
Design
2
830
Atomic Design の課題とその現実的解決策/Atomic Design
Atomic Design について語るイベントで登壇した際の資料です
# イベント詳細
https://techplay.jp/event/827002
sawa-zen
August 25, 2021
Tweet
Share
More Decks by sawa-zen
See All by sawa-zen
MCPを活用してVRChatと現実の境界を滑らかにする
sawa_zen
0
33
Web オンリーのプロダクトでも React Native for Web は輝く/react-native-web
sawa_zen
5
1.7k
デザインガイドラインを作るWebサービスを作っている話 / React Native Meetup 8
sawa_zen
1
430
React Sketch.appでデザインガイドラインを作ってみた
sawa_zen
7
2.4k
Birthday Driven Development
sawa_zen
0
550
Other Decks in Design
See All in Design
portfolio.pdf
onof003
0
160
アクセシビリティに取り組むメリット
magi1125
2
250
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
620
ビジネス成果を最大限に発揮するPORTFOLIO
ataxi1003
0
520
SAMSUL KAMAR ABDUL RAHMAN
samsulrahman32
0
160
そのUIコンポーネント、これから先も使えますか?―Headless UI,Open UI,グローバルデザインシステム
sakito
2
1.7k
新卒の目から見たサイボウズのデザイン組織
ryota5884
0
170
Character Experience AI 〜 AIキャラクターのつくりかた 〜
smartbank
1
280
デザイナー向けフライル説明資料
toshiblues
0
120
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
280
生成AIを活用した組み込みSW設計書検索システム開発
licux
7
1.4k
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
3.3k
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
135
9.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Code Reviewing Like a Champion
maltzj
525
40k
A better future with KSS
kneath
239
17k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Embracing the Ebb and Flow
colly
87
4.8k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
The Language of Interfaces
destraynor
161
25k
Docker and Python
trallard
45
3.6k
Practical Orchestrator
shlominoach
190
11k
Optimizing for Happiness
mojombo
379
70k
Transcript
Atomic Design ͷ՝ͱ ͦͷݱ࣮తղܾࡦ גࣜձࣾ Topotal CDO @sawa-zen @sawa-zen (2021/8/24)
Atomic Design 1
@sawa-zen ॴଐɿגࣜձࣾ Topotal ৬छɿCDO • ओʹϑϩϯτΤϯυͱσβΠϯΛ୲ • UIσβΠϯσβΠϯγεςϜ͕େ @sawa-zen
(2021/8/24) Atomic Design 2
@sawa-zen (2021/8/24) Atomic Design 3
Atomic Design ͬͨ͜ͱ͋Γ·͔͢ʁ @sawa-zen (2021/8/24) Atomic Design 4
͋Γ·͕͢... @sawa-zen (2021/8/24) Atomic Design 5
ఘΊ·ͨ͠ @sawa-zen (2021/8/24) Atomic Design 6
Α͘ݟΔ File Structure src/ ├─ components/ │ ├─ atoms/ ŋŋŋ
࠷খ୯ҐUI │ ├─ molecules/ ŋŋŋ 2ͭҎ্ͷAtomΛ࣋ͭUI │ ├─ organisms/ ŋŋŋ ͦΕ୯ମͰίϯςϯπͱͯ͠ΓཱͭUI │ ├─ layouts/ ŋŋŋ ϖʔδͷܗ │ ├─ pages/ ŋŋŋ ࣮ࡍʹσʔλ͕ྲྀ͠ࠐ·Εͨͷ @sawa-zen (2021/8/24) Atomic Design 7
͜Ε͕͏·͍͔͘ͳ͍ ! @sawa-zen (2021/8/24) Atomic Design 8
ͳͥ͏·͘ߦ͔ͳ͍ͷ͔ʁ ݪҼ1: Atom ͱ Molecule ʹ໎͏ • ʮAtom ͦΕҎ্ղͰ͖ͳ͍࠷খཁૉʯ͕ෆ໌ྎ͗͢Δ •
ʮղͰ͖ͳ͍ʯͱͲͷঢ়ଶΛࢦ͢ͷ͔ॻ͔Ε͍ͯͳ͍ • Atom ͱࢥΘΕͨίϯϙʔωϯτ͕ଞͷ Atom ʹґଘ͕ͪ͠ • ྫ: ΞΠίϯɺςΩετΛؚΉϘλϯ Molecule ʁ @sawa-zen (2021/8/24) Atomic Design 9
ͳͥ͏·͘ߦ͔ͳ͍ͷ͔ʁ ݪҼ2: Organism ͕ංେԽͯ͠͠·͏ • ίϯςΩετΛؚΉ͕ Organism ʹूத • 1֊͚ͩͰՙ͕ॏ͗͢Δ
@sawa-zen (2021/8/24) Atomic Design 10
͏·͍͔͘ͳͯ͘વ @sawa-zen (2021/8/24) Atomic Design 11
"5ͭͷͷ͏ͪͲͷUI ίϯϙʔωϯτΛͲͷ ʹྨ͢ΕΑ͍ ͔ɺ۩ମతͳج४ࣗ ͨͪͰܾΊΔඞཁ͕ ͋Γ·͢ɻ" @sawa-zen (2021/8/24) Atomic Design
12
ϧʔϧΛܾΊΒΕΔ͔͕伴 @sawa-zen (2021/8/24) Atomic Design 13
ϧʔϧܾΊਏ͍ • ίϛϡχέʔγϣϯίετ͕͔͔Γ͗͢Δ • νʔϜશһ͕ೲಘ͢Δʹ͠߹͍ • ϧʔϧ͕େʹͳΓͦ͏ • ϧʔϧͰໃ६͕ੜ·Εͦ͏ @sawa-zen
(2021/8/24) Atomic Design 14
ࣗ͜͜Ͱམ ! @sawa-zen (2021/8/24) Atomic Design 15
ͦͦ Atomic Design ͷ ྑͬͯ͞ͳΜ͚ͩͬʁ @sawa-zen (2021/8/24) Atomic Design 16
Atomic Design ͷྑ͞ • ίϯϙʔωϯτͷͷൣғʹ͍ͭͯߟ͑Δ͖͔͚ͬΛ࡞ΕΔ • UIͱͯ͠ͷҰ؏ੑΛอͯΔ • ΞδϦςΟͷߴ͍ίϯϙʔωϯτΛ࡞ΕΔ @sawa-zen
(2021/8/24) Atomic Design 17
5֊Ͱ͋Δඞཁͳ͍ ! @sawa-zen (2021/8/24) Atomic Design 18
ͰͲ͏͢Δ͔ʁ @sawa-zen (2021/8/24) Atomic Design 19
ࡦͱͯ͠ͷ File Structure ͷఏҊ ҎԼΛ݅ʹಠࣗͷ File Structure Λߟ͑ͯΈͨ 1. ίϯϙʔωϯτͷ֊ʹ੍ݶΛͨͤͳ͍
2. ྨʹ·ͳ͍ @sawa-zen (2021/8/24) Atomic Design 20
ࡦͱͯ͠ͷ File Structure ͷఏҊ 1. PCFS (Per-component File Structure) 2.
શମͷߏ @sawa-zen (2021/8/24) Atomic Design 21
PCFS (Per-component File Structure) • ίϯϙʔωϯτ୯Ґͷ File Structure ͷ͜ͱ •
ίϯϙʔωϯτඞͣ͜ͷߏΛकΔ @sawa-zen (2021/8/24) Atomic Design 22
PCFS (Per-component File Structure) Button/ ├─ index.tsx ᶃ ├─ styles.ts
ᶄ ├─ components/ ᶅ │ ├─ SubComponentA │ ├─ ... 1. ֎෦ export ͞ΕΔ root 2. Γग़͞ΕͨελΠϧ 3. ࢠཁૉͷίϯϙʔωϯτ܈ • PCFS ͷ܁Γฦ͠ @sawa-zen (2021/8/24) Atomic Design 23
PCFS (Per-component File Structure) Button/ ├─ index.tsx ᶃ ├─ styles.ts
ᶄ ├─ components/ ᶅ │ ├─ SubComponentA │ ├─ ... 1. ֎෦ export ͞ΕΔ root 2. Γग़͞ΕͨελΠϧ 3. ࢠཁૉͷίϯϙʔωϯτ܈ • PCFS ͷ܁Γฦ͠ @sawa-zen (2021/8/24) Atomic Design 24
PCFS (Per-component File Structure) Button/ ├─ index.tsx ᶃ ├─ styles.ts
ᶄ ├─ components/ ᶅ │ ├─ SubComponentA │ ├─ ... 1. ֎෦ export ͞ΕΔ root 2. Γग़͞ΕͨελΠϧ 3. ࢠཁૉͷίϯϙʔωϯτ܈ • PCFS ͷ܁Γฦ͠ @sawa-zen (2021/8/24) Atomic Design 25
PCFS (Per-component File Structure) Button/ ├─ index.tsx ᶃ ├─ styles.ts
ᶄ ├─ components/ ᶅ │ ├─ SubComponentA │ ├─ ... 1. ֎෦ export ͞ΕΔ root 2. Γग़͞ΕͨελΠϧ 3. ࢠཁૉͷίϯϙʔωϯτ܈ • PCFS ͷ܁Γฦ͠ @sawa-zen (2021/8/24) Atomic Design 26
શମͷߏ src/ ├─ components/ ᶃ │ ├─ core/ │ │
├─ CoreComponentA │ │ ├─ ... │ ├─ CommonComponentA │ ├─ CommonComponentB │ ├─ ... ├─ screens/ ᶄ │ ├─ HogeScreen/ │ ├─ HugaScreen/ │ ├─ ... @sawa-zen (2021/8/24) Atomic Design 27
શମͷߏ src/ ├─ components/ ᶃ │ ├─ core/ │ │
├─ CoreComponentA │ │ ├─ ... │ ├─ CommonComponentA │ ├─ CommonComponentB │ ├─ ... ├─ screens/ ᶄ │ ├─ HogeScreen/ │ ├─ HugaScreen/ │ ├─ ... ① ڞ௨ίϯϙʔωϯτ܈ • core/ ίϯςΩετΛ࣋ͨͳ͍ • Atom, Molecule Ϩϕϧ • ͜ͷ֊ಉ࢜ͷґଘOK • core/ Ҏ֎ίϯςΩετΛ࣋ͭ • Organism Ϩϕϧ @sawa-zen (2021/8/24) Atomic Design 28
શମͷߏ src/ ├─ components/ ᶃ │ ├─ core/ │ │
├─ CoreComponentA │ │ ├─ ... │ ├─ CommonComponentA │ ├─ CommonComponentB │ ├─ ... ├─ screens/ ᶄ │ ├─ HogeScreen/ │ ├─ HugaScreen/ │ ├─ ... ② ը໘ίϯϙʔωϯτ܈ • Atomic Design ͷ Pages @sawa-zen (2021/8/24) Atomic Design 29
Atomic Design ͱൺͯԿ͕خ͍͔͠ • ڧ੍ྗ͕ڧ͍ͭᐆດͳϧʔϧ͕ແ͍ • ྨͷͨΊͷڥք͕ͨͬͨ̎ͭ 1. ෳՕॴͰΘΕ͍ͯΔ͔ʁ 2.
ίϯςΩετΛؚΜͰ͍Δ͔ʁ @sawa-zen (2021/8/24) Atomic Design 30
Atomic Design ѱͳͷ͔ʁ • ͦΜͳ͜ͱͳ͍ • ͬ͘͟Γͱͨ͠ίϯϙʔωϯτͷઢҾͯ͘͠Εͨ • ڞ௨ݴޠͱ͍ͯ͠ଓ͚ΒΕΔ •
Atom Ϩϕϧͷʓʓ • Molecule Ϩϕϧͷʓʓ • etc... • File Structure ͱ૬ੑ͕ѱ͔͚ͬͨͩ @sawa-zen (2021/8/24) Atomic Design 31
·ͱΊ • Atomic Design ͋͘·ͰࢦͰ͔͠ͳ͍ • ۜͷؙͰͳ͍ • ࣮ʹద͍ͯ͠Δ͔Αۛ͘ຯͨ͠΄͏͕ྑ͍ •
Atomic Design ڞ௨ݴޠͱ͍ͯ͠ଓ͚ΒΕΔ • ఏҊͨ͠ File Structure Λࢀߟʹ͍͚ͯͨͩ͠Εخ͍͠Ͱ͢ @sawa-zen (2021/8/24) Atomic Design 32