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
770
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
Web オンリーのプロダクトでも React Native for Web は輝く/react-native-web
sawa_zen
5
1.5k
デザインガイドラインを作るWebサービスを作っている話 / React Native Meetup 8
sawa_zen
1
320
React Sketch.appでデザインガイドラインを作ってみた
sawa_zen
7
2.2k
Birthday Driven Development
sawa_zen
0
440
Other Decks in Design
See All in Design
不可分の民藝から可分の工業産業へ
creatorqsf
1
340
言語やロールの違いを超えて、一緒にデザインしていくための挑戦
hrtnde
0
1.3k
雑誌『広告』をサイズ展開する
takuro_nakajima
PRO
0
1.2k
ダークテーマとアクセシビリティ の融合したカラートークンの設計
degudegu2510
0
280
コラボレーションを小さくはじめ、大きく広める - 相互理解のためのデザイン&開発交流会, Friends of Figma Tokyo by Yasuhiro Yokota
yasuhiroyokota
2
1.2k
良いアプリケーションをデザインするための感覚の持ち方 / Cultivating a Sense for Designing Great Applications
usagimaru
22
7.6k
新しい資産運用サービスALTERNA(オルタナ)の伝え方の工夫
layerx
PRO
0
910
Wishing Star Comic
torije
2
1.1k
Jeremy's First Day
myates3
1
130
デザインをみんなのものに 「デザインの脱植民地化」を日本の文脈で考える
mayunak
7
4.1k
Resolving text accessibility dilemmas in UIs
romanshamin
0
130
素晴らしき余白の世界
kasumidyaya
0
100
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Atom: Resistance is Futile
akmur
258
25k
GitHub's CSS Performance
jonrohan
1023
450k
The Mythical Team-Month
searls
214
42k
Practical Orchestrator
shlominoach
181
9.7k
Rebuilding a faster, lazier Slack
samanthasiow
72
8.2k
GraphQLとの向き合い方2022年版
quramy
30
12k
Fontdeck: Realign not Redesign
paulrobertlloyd
75
4.9k
Documentation Writing (for coders)
carmenintech
59
3.9k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
2k
The Language of Interfaces
destraynor
151
23k
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