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
Building Design Systems with Atomic Design
Search
oodemi
February 08, 2019
Design
4
5.2k
Building Design Systems with Atomic Design
oodemi
February 08, 2019
Tweet
Share
More Decks by oodemi
See All by oodemi
開発プロセスの改革を促進し変化を楽しむチームを作る「振り返り」
oodemi
1
170
ESLintプラグインでAST入門
oodemi
0
1.1k
マイクロインタラクション
oodemi
0
370
Other Decks in Design
See All in Design
freee + Product Design FY25Q4
freee
4
15k
Bulletproof Design System with TypeScript
takanorip
6
3.7k
21 Ways to Call American Airlines Customer Care Full Guide USA
americanhub
0
190
Designing User Experience through Interaction Design
lycorptech_jp
PRO
0
270
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
lycorptech_jp
PRO
0
280
7 Core Values of Round-L
wired888
0
570
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
3k
株式会社バクタム 会社説明資料
bactum
0
260
The Spectacular Lies of Maps
axbom
PRO
1
170
Yahoo!フリマ:生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
lycorptech_jp
PRO
0
320
ビジネス成果を最大限に発揮するPORTFOLIO
ataxi1003
0
210
「UXとUIの違い」v2
shirasu3
0
140
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
840
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
A designer walks into a library…
pauljervisheath
207
24k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
990
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Embracing the Ebb and Flow
colly
86
4.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Transcript
Building Design Systems with Atomic Design ʔ @ooDEMi / 2019-02-08
Profile ͰΈ - @ooDEMi Front Engineer at Eureka, inc.
͍͑ͨ͜ͱ
తΛཧղͨ͠͏͑ͰAtomic DesignΛબͿ
Atomic DesignͷϧʔϧઈରͰͳ͍
·ͣతͷ͔Β
Atomic Designͷత ↓ Design SystemsΛߏங͢Δ͜ͱ
None
Design Systems = ?
Design Systemsͷ3ཁૉ ໋໊ɾྨɾӡ༻
໋໊ σβΠϯύλʔϯͷ໊લ͕ ڞ௨ͷݴޠͱͯ͠ػೳ͍ͯ͠Δ
None
ྨ ໋໊͞ΕͨσβΠϯύλʔϯ͕ ڞ௨ͷϧʔϧͰྨ͞Ε͍ͯΔ
None
ӡ༻ ໋໊ɾྨ͞ΕͨσβΠϯύλʔϯΛ ϓϩμΫτʹద༻͠ɺӡ༻͠ଓ͚͍ͯΔ
ʮڞ௨ೝࣝʯ͕Ωʔϫʔυ
Design SystemsσβΠφʔ/ΤϯδχΞ Ұํ͚ͩͰ࡞Δ͜ͱෆՄೳ
Atomic DesignσβΠφʔ/ΤϯδχΞ Ұํ͚ͩͰ࣮ࢪ͢Δख๏Ͱͳ͍
Atomic Designͷత ↓ Design SystemsΛߏங͢Δ͜ͱ
తΛͬͨͷͰɺࠓAtomic Designͷ
None
Atomic DesignσβΠϯύλʔϯΛ ྨ͢ΔͨΊͷํ๏
Design Systemsͷ3ཁૉ ໋໊ɾྨɾӡ༻
େͳ͜ͱɺσβΠφʔͱΤϯδχΞͰ ྨͷೝ͕ࣝ߹͍ͬͯΔ͜ͱ
Ques%on ʮ͜ΕMoleculesͳͷʁ Organismsͳͷʁʯ
Answer ʮ໎͏͘Β͍ͳΒɺAtomic DesignΛΊΔʯ
Atomic DesignΛݫີʹकΔඞཁͳ͍
͕ࣗͨͪྨ͍͢͠Α͏ʹΞϨϯδ͢Δ
None
None
Atomic DesignσβΠϯύλʔϯΛྨ͢ΔͨΊͷख๏ େͳ͜ͱྨʹରͯ͠ڞ௨ೝ͕ࣝ͋Δ͜ͱ ڞ௨ೝࣝΛऔΕΔͳΒAtomic Designʹͩ͜ΘΔඞཁͳ͍
͜͜·Ͱ͕Atomic Designͷ
Design Systemsͷ3ཁૉ ໋໊ɾྨɾӡ༻
໋໊ͱӡ༻Atomic DesignͷൣᙝͰͳ͍
໋໊ʹؔͯ͠ɺ νʔϜͰձ͠ଓ͚Δ͔͠ແ͍
ύλʔϯΥʔϧΛઃஔͯ͠ɺि1Ͱ໋໊͢Δձ
ʮͬͯΔײʯΛग़͢
ӡ༻πʔϧͷྗΛआΓΔ
zeroheight
None
ߋ৽ɾࢀরͷ͢͠͞ΛՄೳͳݶΓߴΊΔ
·ͱΊ
Atomic Designͷత ↓ Design SystemsΛߏங͢Δ͜ͱ
Design Systemsͷ3ཁૉ ໋໊ɾྨɾӡ༻
Atomic DesignσβΠϯύλʔϯΛ ྨ͢ΔͨΊͷํ๏
Atomic DesignͷϧʔϧઈରͰͳ͍
None
Building Design Systems with Atomic Design ʔ @ooDEMi / 2019-02-08