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
What is Atomic Design?
Search
endam
July 30, 2019
Technology
0
89
What is Atomic Design?
To easy to understand what is Atomic Design
endam
July 30, 2019
Tweet
Share
More Decks by endam
See All by endam
Web開発における開発環境構築の歴史と変遷〜原始時代から現代(Docker)まで〜
endam
0
230
レガシーなフレームワークで不本意ながらもとことん頑張ってみた
endam
0
500
Angular × Atomic Designでデザインリニューアルを行った話
endam
2
670
僕たちはサービスの多言語化にどう立ち向かうべきか
endam
4
1.4k
Postman
endam
0
460
Engineer's Mind
endam
1
140
Be the best development team
endam
0
96
Yarnの導入
endam
0
530
Web APIの現場あるある解決特集〜こうして僕たちのAPIは使いやすくなった〜
endam
0
520
Other Decks in Technology
See All in Technology
動画データのポテンシャルを引き出す! Databricks と AI活用への奮闘記(現在進行形)
databricksjapan
0
130
Railsアプリケーション開発者のためのブックガイド
takahashim
14
5.9k
それでも私はContextに値を詰めたい | Go Conference 2025 / go conference 2025 fill context
budougumi0617
4
1.1k
リーダーになったら未来を語れるようになろう/Speak the Future
sanogemaru
0
230
Goに育てられ開発者向けセキュリティ事業を立ち上げた僕が今向き合う、AI × セキュリティの最前線 / Go Conference 2025
flatt_security
0
320
全てGoで作るP2P対戦ゲーム入門
ponyo877
3
1.3k
後進育成のしくじり〜任せるスキルとリーダーシップの両立〜
matsu0228
3
1.2k
KAGのLT会 #8 - 東京リージョンでGAしたAmazon Q in QuickSightを使って、報告用の資料を作ってみた
0air
0
190
非同期処理実行基盤 Delayed脱出 → Solid Queue完全移行への旅路。
srockstyle
3
1.6k
LLMアプリケーション開発におけるセキュリティリスクと対策 / LLM Application Security
flatt_security
7
1.7k
AI Agentと MCP Serverで実現する iOSアプリの 自動テスト作成の効率化
spiderplus_cb
0
400
Oracle Cloud Infrastructure:2025年9月度サービス・アップデート
oracle4engineer
PRO
0
360
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Become a Pro
speakerdeck
PRO
29
5.5k
How to Ace a Technical Interview
jacobian
280
23k
GitHub's CSS Performance
jonrohan
1032
460k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Automating Front-end Workflow
addyosmani
1371
200k
Writing Fast Ruby
sferik
629
62k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Transcript
UUUU Welcome to Atomic Design Masayuki Yoshida
Topics ๏ What is Atomic Design ? ๏ Why did
Goalous decide to adopt Atomic Design ? ๏ How does Goalous use Atomic Design? ๏ Pros and Cons of Atomic Design
What is Atomic Design ?
Atomic Design is… ๏a design methodology that create big components
by combining small components. ๏It is composed of five component layers
https://www.youtube.com/watch?v=q5CB1za0NfA Refer this movie to know the role of each
layer https://www.youtube.com/watch?v=q5CB1za0NfA
Component Layers of Atomic Design
What's the difference between traditional design method and Atomic Design?
Traditional Design as top-down and decompose from page Page U
Atomic Design Design as bottom-up and combine minimum unit parts
Page U
Atomic Design is similar to Lego Various designs can be
made depending on the combination
Why did Goalous decide to adopt Atomic Design ?
Let's go over the previous Goalous system…
There are a lot of the negative legacies of technology
continued to accumulate in frontend system… System is collapsed so much! We need to remake system for future ! Damasa
System was like this…..
We have design problems same as system ๏Bad information architecture
๏Difficult to use service, especially beginner ๏Not transmitted advantages for customers
Finally we decided to do Service Renewal !
Renewal Development Concept ๏ Respond to design changes flexibly and
quickly ๏ Robust (design collapse is unlikely to occur) ๏ Unify service design rules We decided to adopt Atomic Design
Atomic Design is widespread around the world. it has been
already adopted by some famous services even Japan
How does Goalous use Atomic Design?
Refer presentation slides that Hiroko Suzuki created
Pros and Cons of Atomic Design
Pros ๏ The UI parts dependency greatly reduced (Lower component
doesn’t depend on upper component) ๏ The collaboration of design and development became smooth among developer, designer and even product owner ๏ It’s easy to develop after get used to Atomic Design
Cons ๏It is difficult to design follow Atomic Design until
get used to it even senior designer ๏Sometimes worry about how to separate components and which layer the component is
Conclusion ๏It was good decision for Goalous to adopt Atomic
Design ๏But Atomic Design is not silver bullet
Thank you for listening