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
650
僕たちはサービスの多言語化にどう立ち向かうべきか
endam
4
1.4k
Postman
endam
0
450
Engineer's Mind
endam
1
140
Be the best development team
endam
0
96
Yarnの導入
endam
0
530
Web APIの現場あるある解決特集〜こうして僕たちのAPIは使いやすくなった〜
endam
0
510
Other Decks in Technology
See All in Technology
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
1.3k
cdk initで生成されるあのファイル達は何なのか/cdk-init-generated-files
tomoki10
1
670
伴走から自律へ: 形式知へと導くSREイネーブリングによる プロダクトチームの信頼性オーナーシップ向上 / SRE NEXT 2025
visional_engineering_and_design
3
460
CDK Vibe Coding Fes
tomoki10
1
630
An introduction to Claude Code SDK
choplin
2
1k
Introduction to Bill One Development Engineer
sansan33
PRO
0
260
Copilot coding agentにベットしたいCTOが開発組織で取り組んだこと / GitHub Copilot coding agent in Team
tnir
0
190
CDKコード品質UP!ナイスな自作コンストラクタを作るための便利インターフェース
harukasakihara
2
230
AI エージェントと考え直すデータ基盤
na0
20
7.9k
Amplify Gen2から知るAWS CDK Toolkit Libraryの使い方/How to use the AWS CDK Toolkit Library as known from Amplify Gen2
fossamagna
1
350
マルチプロダクト環境におけるSREの役割 / SRE NEXT 2025 lunch session
sugamasao
1
730
Maintainer Meetupで「生の声」を聞く ~講演だけじゃないKubeCon
logica0419
0
110
Featured
See All Featured
KATA
mclloyd
30
14k
How to Ace a Technical Interview
jacobian
278
23k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
The Invisible Side of Design
smashingmag
301
51k
Code Review Best Practice
trishagee
69
19k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
What's in a price? How to price your products and services
michaelherold
246
12k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
We Have a Design System, Now What?
morganepeng
53
7.7k
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