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
34
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
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
_psyc0_
0
310
そのUIコンポーネント、これから先も使えますか?―Headless UI,Open UI,グローバルデザインシステム
sakito
2
1.9k
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
bebe
0
840
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
0
300
【MIXI MEETUP!ー TECH & DESIGN DAYー】新たなSNS「mixi2」の “0→1”開発の舞台裏:デザイナーが語るプロダクト誕生秘話
mixi_design
PRO
0
140
#Dubois Challenge 2025: Economics
ajstarks
1
180
Installing and Running decksh/pdfdeck
ajstarks
1
860
デザインシステムの「種」を使って、受託開発を加速させる
akane___ui
0
11k
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
1.1k
AI業務アプリケーションの体験デザイン
kazuhirokimura
0
190
Liquid GlassとApp Intents
touyou
0
340
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
620
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
246
12k
Writing Fast Ruby
sferik
629
62k
Building Adaptive Systems
keathley
43
2.8k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Code Reviewing Like a Champion
maltzj
525
40k
GraphQLとの向き合い方2022年版
quramy
49
14k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
GitHub's CSS Performance
jonrohan
1032
460k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Site-Speed That Sticks
csswizardry
11
870
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
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