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
84
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
490
Angular × Atomic Designでデザインリニューアルを行った話
endam
2
640
僕たちはサービスの多言語化にどう立ち向かうべきか
endam
4
1.4k
Postman
endam
0
450
Engineer's Mind
endam
1
130
Be the best development team
endam
0
95
Yarnの導入
endam
0
530
Web APIの現場あるある解決特集〜こうして僕たちのAPIは使いやすくなった〜
endam
0
510
Other Decks in Technology
See All in Technology
さくらのIaaS基盤のモニタリングとOpenTelemetry/OSC Hokkaido 2025
fujiwara3
2
280
Lambda Web Adapterについて自分なりに理解してみた
smt7174
5
140
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
2
3.6k
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
1
5.7k
Beyond Kaniko: Navigating Unprivileged Container Image Creation
f30
0
110
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
2
8.2k
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
170
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
4
280
AWS認定を取る中で感じたこと
siromi
1
130
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
6
2k
論文紹介:LLMDet (CVPR2025 Highlight)
tattaka
0
260
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
940
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
94
14k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Six Lessons from altMBA
skipperchong
28
3.9k
It's Worth the Effort
3n
185
28k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
GraphQLとの向き合い方2022年版
quramy
49
14k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Testing 201, or: Great Expectations
jmmastey
42
7.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
For a Future-Friendly Web
brad_frost
179
9.8k
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