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
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.9k
サービスデザインにおける、 映像活用の可能性(Spectrum Tokyo Meetup #18)
ka71
0
150
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
620
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
1.1k
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
0
410
地理院地図をもっと楽しく!れきちず新機能のご紹介
hjmkth
1
100
タイミーでフィールドワークしたら、サービスデザインが始まった
kenichiota0711
2
2.9k
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
lycorptech_jp
PRO
0
510
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
lycorptech_jp
PRO
0
450
数理的アプローチで挑むスマホUIのデザイン改善:タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
lycorptech_jp
PRO
0
730
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.7k
Yumika Yamada Portfolio
yumii
0
1.2k
Featured
See All Featured
Designing Experiences People Love
moore
142
24k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Rails Girls Zürich Keynote
gr2m
95
14k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Measuring & Analyzing Core Web Vitals
bluesmoon
8
550
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Designing for humans not robots
tammielis
253
25k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
What's in a price? How to price your products and services
michaelherold
246
12k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
800
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