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
Atomic Designとの 上手な付き合い方 / better-relationship-...
Search
takanorip
December 10, 2018
Programming
1
1.5k
Atomic Designとの 上手な付き合い方 / better-relationship-between-atomic-design
takanorip
December 10, 2018
Tweet
Share
More Decks by takanorip
See All by takanorip
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
0
440
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
520
Bulletproof Design System with TypeScript
takanorip
7
4.2k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
170
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
940
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
7.5k
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2.1k
早わかり W3C Community Group
takanorip
0
510
Ubieとアクセシビリティのこれからを考える
takanorip
0
480
Other Decks in Programming
See All in Programming
All About Angular's New Signal Forms
manfredsteyer
PRO
0
120
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
220
CSC305 Lecture 05
javiergs
PRO
0
210
CSC305 Lecture 06
javiergs
PRO
0
220
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
230
Serena MCPのすすめ
wadakatu
4
980
Devvox Belgium - Agentic AI Patterns
kdubois
1
120
CSC509 Lecture 06
javiergs
PRO
0
260
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
210
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
300
Software Architecture
hschwentner
6
2.3k
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
190
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
Building Adaptive Systems
keathley
43
2.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.3k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Side Projects
sachag
455
43k
Documentation Writing (for coders)
carmenintech
75
5k
Designing Experiences People Love
moore
142
24k
Navigating Team Friction
lara
190
15k
Docker and Python
trallard
46
3.6k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Become a Pro
speakerdeck
PRO
29
5.5k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Transcript
Atomic Designとの 上手な付き合い方 Takanori Oki
自己紹介 • Takanori Oki(@takanorip) • フロントエンドエンジニア • React / Nuxt.js
/ Polymer ... • フォントが好き • 前職で1年くらいAtomicDesign運用経験あり
たぶん 前の人達と同じような 話をします
私的な感情論なので あまり真面目に捉えないで ください
最近思うこと
みんな Atomic Design に 真面目すぎるんじゃない?
真面目すぎる • コンポーネントの分け方の議論に時間を かけすぎて、実装が進まない • 設計の手助けをしてくれるはずのものが 設計を難しくしてる、本末転倒 • 全てに満足することはできない
「コンポーネントの設計しっかりしなきゃ…」 「これはMolecules? Organisms?」
つらい!!
つらくならないためには 「大雑把に」 付き合うことが大切
最小単位を意識する • コンポーネントを作る際は最小単位(Atom) だけ意識する • Molecules か Organisms かは大した問題じゃ ないし、早すぎる最適化を生む危険もある
• ある程度全体が見えてきてから考えたほうが 良い
「正解はない」 • Atomic Design は概念 • 正解はないので、チームやプロダクトに 合わせた階層構造を考える必要がある • 厳密になりすぎず、ゆとりを持つことが必要
• が、ルールは必要
ルールを整備することで 考えることを減らす
基本再利用しないものとして コンポーネントをつくる
重要なのは Templates/Pages と Organisms 以下の分離
責務を分離する
Template/Pagasは Storeに接続され、 アプリケーション全体の状態 を知っている
Organisms以下の コンポーネントは そのコンポーネントのこと しか知らない
デザイナーを巻き込むこと
デザイナー重要 • そもそも、エンジニアだけでこういう話を するのは良くない • デザイナーに Atomic Design の概念を デザインフローに組み込んでもらう
• コンポーネントの単位はデザイナーに決めて もらうのが良いかも
Atomic Designをちゃんと 機能させるには デザインと実装 両方の知識が必要!
僕の理想 • デザイナーがコンポーネントをデザインする 段階で、おおよその階層を決める(Atoms/ Molecules/Organizms) • 実装時に不都合がある場合は、エンジニア側 から相談し解決
コンポーネントのデザイン管理 • コンポーネントごとのデザイン管理は Figmaが優秀(ただし有料プランのみ) • コンポーネントを保存でき、同じチーム内の プロジェクトで使い回せる • エンジニアもコンポーネントの デザイン一覧を確認できるので便利
どっちが主導権を握るかで 使うツールを変えても良い
おわり!