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
Карта процесса-опыта. Презентация метода
ashapiro
0
310
DMMデザイン組織の生成AI導入プロセス - Adobe Fireflyと振り返る約1年とこれから -
takumasaito
1
330
Designship2024 Panel Discussion インハウスデザイナーは 何をデザインしているか、するべきか で使用したスライドを公開します。
kiyoshifuwa
0
1.9k
みんなでブラッシュアップするDesign Sprint_BASE BANKチームの場合
base
PRO
3
620
志ある事業の種を社会に開花させるための挑戦/ Designship2024_Nishimura
root_recruit
0
160
SaaSのマーケティングを進めるサービスサイトを育てる取り組み / Designship 2024 Main Stage
sms_tech
0
1k
Yahoo Newsletter Clicker Template
xuechunwu
0
290
アフォーダンスとシグニファイア
ryokanakai
0
300
ito aya|Portfolio2409
itoaya116
0
250
Managing Design Systems (Smashing NY 2024)
nathanacurtis
2
280
共創するのはモノではなく価値 ── 日本の「はたらく」を変える挑戦 / Designship2024 MainStage
visional_engineering_and_design
1
250
拡大するマルチプロダクトSaaSの顧客理解にデザイン組織はどう取り組んでいるか / RAKUSTechCon2024_Design
rakus_dev
0
2k
Featured
See All Featured
Embracing the Ebb and Flow
colly
84
4.4k
GraphQLとの向き合い方2022年版
quramy
43
13k
GraphQLの誤解/rethinking-graphql
sonatard
66
9.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Become a Pro
speakerdeck
PRO
24
5k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
The Invisible Side of Design
smashingmag
297
50k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
107
49k
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