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
もうひとつのアーキテクチャ #kichijojipm
kondoyuko
0
240
#Dubois Challenge 2025: Economics
ajstarks
0
110
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
130
富山デザイン勉強会_デザイントレンド2025.pdf
keita_yoshikawa
0
310
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
490
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.6k
Cyber Heart Online Book
hjnasby
0
100
portfolio_YumiYasuda
yum0418
0
280
マンガで分かるサービスデザインガイドライン
senryakuka
1
890
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
shingo2000
1
1.5k
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
2.8k
札幌の雪を観光資源に変える:デザインプログラムSESSAの挑戦
ittyann
0
240
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
39
1.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
41
7.3k
Code Reviewing Like a Champion
maltzj
524
40k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
790
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Practical Orchestrator
shlominoach
188
11k
A better future with KSS
kneath
239
17k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
The Invisible Side of Design
smashingmag
299
51k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Done Done
chrislema
184
16k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
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