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
86
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
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.7k
Geminiとv0による高速プロトタイピング
shinya337
0
230
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
3
3.2k
Lazy application authentication with Tailscale
bluehatbrit
0
150
WordPressから ヘッドレスCMSへ! Storyblokへの移行プロセス
nyata
0
430
Operating Operator
shhnjk
1
460
AWS Organizations 新機能!マルチパーティ承認の紹介
yhana
1
260
生成AIで小説を書くためにプロンプトの制約や原則について学ぶ / prompt-engineering-for-ai-fiction
nwiizo
6
4k
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
150
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
150
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
1
13k
Tech-Verse 2025 Keynote
lycorptech_jp
PRO
0
1.7k
Featured
See All Featured
Building an army of robots
kneath
306
45k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
How to Ace a Technical Interview
jacobian
277
23k
4 Signs Your Business is Dying
shpigford
184
22k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Code Review Best Practice
trishagee
69
18k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
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