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
650
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
530
Bulletproof Design System with TypeScript
takanorip
7
4.2k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
170
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
950
効果的な管理画面を デザインをするために 避けるべき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
GC25 Recap: The Code You Reviewed is Not the Code You Built / #newt_gophercon_tour
mazrean
0
110
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
650
ALL CODE BASE ARE BELONG TO STUDY
uzulla
28
6.7k
Six and a half ridiculous things to do with Quarkus
hollycummins
0
210
モテるデスク環境
mozumasu
3
1.3k
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
3
740
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
18
8.8k
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
980
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
2
380
社会人になっても趣味開発を続けたい! / traPavilion
mazrean
1
100
Webサーバーサイド言語としてのRustについて
kouyuume
1
4.9k
Developer Joy - The New Paradigm
hollycummins
1
370
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
140
7.2k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Speed Design
sergeychernyshev
32
1.2k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Why Our Code Smells
bkeepers
PRO
340
57k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Agile that works and the tools we love
rasmusluckow
331
21k
Scaling GitHub
holman
463
140k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Docker and Python
trallard
46
3.6k
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が優秀(ただし有料プランのみ) • コンポーネントを保存でき、同じチーム内の プロジェクトで使い回せる • エンジニアもコンポーネントの デザイン一覧を確認できるので便利
どっちが主導権を握るかで 使うツールを変えても良い
おわり!