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.1k
Building Design Systems with Atomic Design
oodemi
February 08, 2019
Tweet
Share
More Decks by oodemi
See All by oodemi
開発プロセスの改革を促進し変化を楽しむチームを作る「振り返り」
oodemi
1
160
ESLintプラグインでAST入門
oodemi
0
1k
マイクロインタラクション
oodemi
0
360
Other Decks in Design
See All in Design
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
300
MLP_Cleanup_Olga
olgastoryboard
0
140
新しいemoji😄のアイデアをUnicodeが募集中‼️🏃♀️💨💨💨傾向を学んでみんな提案しよう💪
oguemon
2
660
Осязаемый потребительский опыт. Ловим его за хвост с Картой процесса-опыта
ashapiro
2
210
Design System for training program
mct
0
130
Night Shift (beginning sequence)
cpineda57
0
870
Lightning Talk: Beautiful Slides for Beginners
inesmontani
PRO
1
130
1年目のクリエイターがつくりあげた!採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
140
情報設計からのデザインアプローチ ~ユーザーの声を聞くよりも、もっとデータの声を聞け~
securecat
4
2.3k
デザインからアプリ実装まで一貫したデザインシステムを構築するベストプラクティス
shuzo
13
5.8k
202409_会社概要資料_Englishver.pdf
zakkerooni
0
200
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
230
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
1.9k
Navigating Team Friction
lara
183
14k
The Power of CSS Pseudo Elements
geoffreycrofte
72
5.3k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
3
370
The Art of Programming - Codeland 2020
erikaheidi
51
13k
It's Worth the Effort
3n
183
27k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
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