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-between-atomic-design
Search
takanorip
December 10, 2018
Programming
1
1.4k
Atomic Designとの 上手な付き合い方 / better-relationship-between-atomic-design
takanorip
December 10, 2018
Tweet
Share
More Decks by takanorip
See All by takanorip
社内管理画面のデザインもプロダクトデザイン
takanorip
3
720
早わかり W3C Community Group
takanorip
0
260
Ubieとアクセシビリティのこれからを考える
takanorip
0
230
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
2.9k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
2.8k
デザインシステム運用とOKRの良い関係
takanorip
0
1.7k
ユビーのペイシェントジャーニーを支えるデザインシステム構築
takanorip
0
170
メンタルヘルスチューニング
takanorip
0
250
Other Decks in Programming
See All in Programming
今、知っておきたい! 生成AIエージェントの世界
elith
3
330
受託開発でGitLab CI を活用していく
xiombatsg
1
260
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.2k
どうしてこうなった命名集 ~🔥編~ / OOC 2024 LT
pictiny
5
3.9k
ゆるい個人開発のススメ
kuroppe1819
10
930
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
350
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
180
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
160
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
260
チーム力を高めるスクラム実践法:カンバン公開と課題攻略について - ニフティのスクラムトーク Vol. 2 - NIFTY Tech Talk #18
niftycorp
PRO
1
110
Semantic search with Django and pgvector
pauloxnet
0
230
Javaエンジニアのための Nodejs/Nuxt3入門
hidekatsu_izuno
0
270
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
Why Our Code Smells
bkeepers
PRO
331
56k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
Writing Fast Ruby
sferik
619
60k
The Illustrated Children's Guide to Kubernetes
chrisshort
28
46k
10 Git Anti Patterns You Should be Aware of
lemiorhan
645
57k
Design by the Numbers
sachag
274
18k
How STYLIGHT went responsive
nonsquared
92
4.8k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
1.3k
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
RailsConf 2023
tenderlove
1
530
The Art of Programming - Codeland 2020
erikaheidi
41
12k
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が優秀(ただし有料プランのみ) • コンポーネントを保存でき、同じチーム内の プロジェクトで使い回せる • エンジニアもコンポーネントの デザイン一覧を確認できるので便利
どっちが主導権を握るかで 使うツールを変えても良い
おわり!