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
4
1.3k
早わかり W3C Community Group
takanorip
0
330
Ubieとアクセシビリティのこれからを考える
takanorip
0
310
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.3k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
2.9k
デザインシステム運用とOKRの良い関係
takanorip
0
1.8k
ユビーのペイシェントジャーニーを支えるデザインシステム構築
takanorip
0
210
メンタルヘルスチューニング
takanorip
0
290
Other Decks in Programming
See All in Programming
Composing an API the *right* way (Droidcon Berlin 2024)
zsmb
1
450
最古の関数型言語「Lisp」ことはじめ / lisp_in_kamiyama
uhooi
1
190
Rust.Nagoya #1
codemountains
0
170
12年前の『型システム入門』翻訳の思い出話
mame
11
1.2k
MIERUNE BBQにおけるユーザー中心設計()
mierune
PRO
1
110
Android開発者のための Kotlin Multiplatform入門
ntaro
0
190
Async Await: Mastering Python's Time-Bending Tricks - EuroPython2024
yanbo
1
290
コード生成を伴うLLMエージェント - 2024.07.18 Tokyo AI
smiyawaki0820
11
4.1k
わかりやすい正解を捨てて、コトに向き合う - スクラムフェス金沢2024 スポンサーセッション
yusukekokubo
0
170
Javaの現状2024夏 / Java current status 2024 summer
kishida
4
1.4k
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
1.9k
君たちはどうコードをレビューする (される) か / 大吉祥寺.pm
utgwkk
15
8.5k
Featured
See All Featured
The Language of Interfaces
destraynor
151
23k
Visualization
eitanlees
139
14k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.8k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
20
7.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
26
2.1k
Into the Great Unknown - MozCon
thekraken
20
1.3k
A Modern Web Designer's Workflow
chriscoyier
689
190k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
44
4.7k
A Tale of Four Properties
chriscoyier
155
22k
StorybookのUI Testing Handbookを読んだ
zakiyama
15
4.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
34
1.9k
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が優秀(ただし有料プランのみ) • コンポーネントを保存でき、同じチーム内の プロジェクトで使い回せる • エンジニアもコンポーネントの デザイン一覧を確認できるので便利
どっちが主導権を握るかで 使うツールを変えても良い
おわり!