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で助かった人たち
Search
Yukako IIDA
December 06, 2016
Design
0
16
Atomic designで助かった人たち
frontrend vol.8 LT枠にて、AbemaTVで採用しているatomic designの話を「Atomic designで助かった人たち」というタイトルで発表しました。
Yukako IIDA
December 06, 2016
Tweet
Share
More Decks by Yukako IIDA
See All by Yukako IIDA
[2024/09/28 - フロントエンド・オブザーバビリティ Meetup] フロントエンドエンジニアとして、オブザーバビリティにコミットすること
becyn
0
440
[2023/10/06 - Four Keysで改善する開発生産性] フロントエンド開発における、 デプロイ頻度を上げるための テスト設計と仕組みづくりのヒント / Tips for designing and structuring tests to increase deployment frequency in front-end development
becyn
17
2.7k
[2023.06.17] うちのデザインシステム
becyn
3
190
2023.03.08@高まるウェブアクセシビリティの需要ーfreee×ニューズピックスー〜フロントエンド最前線〜
becyn
0
27
[Observability conference 2022/3/11] NewsPicks のプロダクト開発エンジニアが実践するスキルとしての SRE
becyn
0
70
[Next.js Update! 2021/11/24] Web Frontend Unit の立ち上げとリアーキテクチャに際してNext.js を採用したワケ
becyn
0
19
Other Decks in Design
See All in Design
Night Shift (beginning sequence)
cpineda57
0
950
aya_murakami_portfolio
ayakaimi1101
0
200
世界中のチームワークをどうデザインしているのか
ka3zu1ma10
0
260
Managing Design Systems (Smashing NY 2024)
nathanacurtis
2
360
AIネイティブな時代におけるUXデザインの在り方とは
kuni29
0
1.1k
1年目のクリエイターがつくりあげた!採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
450
【Designship 2024|10.13】デザイン組織を進化させるための仕組み化の要諦
payatsusan213
1
750
(第1回) アーキテクト・テックリード育成講座
masakaya
0
130
Design System for training program
mct
0
310
ピクシブにおける「ビジョン」の取り扱われ方 #pixivdevmeetup / 20240920
minamitary
1
1.8k
共通言語としてのデザイントークンと Figmaでの運用
kamy0042
0
180
デザイナー視点の体験設計とデザインレビューを事業部全員で体験するワークショップをしたお話
masayofff
3
220
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
560
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Git: the NoSQL Database
bkeepers
PRO
427
64k
The Pragmatic Product Professional
lauravandoore
32
6.4k
The Cost Of JavaScript in 2023
addyosmani
46
7.2k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
For a Future-Friendly Web
brad_frost
176
9.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
860
Code Reviewing Like a Champion
maltzj
521
39k
Adopting Sorbet at Scale
ufuk
74
9.2k
Transcript
atomic designͰ ͔ͨͬͨ͢ਓͨͪ front-end engineer@AbemaTV Yukako IIDA @becyn
about myself • front-end engineer @ AbemaTV • AbemaTV join࣌ۀͰͷfrontܦݧ΄΅0
• atomic designʹͱͯॿ͚ΒΕͨਓ • server-side 2.5y • android 0.5y
what’s atomic design? • σβΠϯγεςϜΛ࡞ΔͨΊͷํ๏ • ཻʹΑͬͯɺίϯϙʔωϯτΛ5ͭʹ۠ ATOMS MOLECULES ORGANISMS
TEMPLATES PAGES
what’s atomic design? • σβΠϯγεςϜΛ࡞ΔͨΊͷํ๏ • ཻʹΑͬͯɺίϯϙʔωϯτΛ5ͭʹ۠ ATOMS MOLECULES ORGANISMS
TEMPLATES PAGES ίϯϙʔωϯτͷதͷ࠷খ୯Ґ
what’s atomic design? • σβΠϯγεςϜΛ࡞ΔͨΊͷํ๏ • ཻʹΑͬͯɺίϯϙʔωϯτΛ5ͭʹ۠ ATOMS MOLECULES ORGANISMS
TEMPLATES PAGES ATOMSΛΈ߹Θͤͨͷ
what’s atomic design? • σβΠϯγεςϜΛ࡞ΔͨΊͷํ๏ • ཻʹΑͬͯɺίϯϙʔωϯτΛ5ͭʹ۠ ATOMS MOLECULES ORGANISMS
TEMPLATES PAGES ߋʹΈ߹Θͤͨ ࠶ར༻Մೳͳͷύʔπ
what’s atomic design? • σβΠϯγεςϜΛ࡞ΔͨΊͷํ๏ • ཻʹΑͬͯɺίϯϙʔωϯτΛ5ͭʹ۠ ATOMS MOLECULES ORGANISMS
TEMPLATES PAGES ۩ମతʹ֤ίϯϙʔωϯτͷ ؔΛද͍ͯ͠Δͷ
what’s atomic design? • σβΠϯγεςϜΛ࡞ΔͨΊͷํ๏ • ཻʹΑͬͯɺίϯϙʔωϯτΛ5ͭʹ۠ ATOMS MOLECULES ORGANISMS
TEMPLATES PAGES ςϯϓϨʔτͷΠϯελϯε
what’s atomic design? • σβΠϯγεςϜΛ࡞ΔͨΊͷํ๏ • ཻʹΑͬͯɺίϯϙʔωϯτΛ5ͭʹ۠ ATOMS MOLECULES ORGANISMS
TEMPLATES PAGES ͜ΕΛݩʹϓϩμΫτͷσβΠϯγεςϜΛ࡞͍ͬͯ͘
what’s atomic design? • AbemaTVͰҎԼͷ3۠ͷΈ࠾༻ ATOMS MOLECULES ORGANISMS TEMPLATES PAGES
atomic design খ with me
atomic design খ • ҟಈॳɺڥඋͨ͠ޙɺ 1PR͚ͩͰ͍͍͔Β௺ࠟͯ͠ؼΓ͍ͨ…ʂ • ॳͷλεΫ͍͍ͨͩͨ • ͰͲ͔͜Βணखͨ͠Β͍͍ͷ͔ख୳Γ😭
None
atomic design খ • ͔Βͷ atomic design ʹ͍ͭͯͷઆ໌Λࢥ͍ग़͠ɺ ͍͍ͨͩͨσβΠϯΛཻ͝ͱʹղ atomic
design ͷಋࢣ @ygoto3_
hover࣌
͜Ε͕ҰͭͷओͳཁૉͬΆ͍
ओͳίϯϙʔωϯτͷதͷओͳίϯϙʔωϯτ
hover࣌ ͦΕͧΕͰ ఆٛͰ͖ͦ͏ ͬͱղͰ͖Δʂ·͍͚ͩΔʂ
ORGANISMS MOLECULES ATOMS ORGANISMS hover࣌ ATOMS ATOMS
atomic design খ • ͔Βͷ atomic design ʹ͍ͭͯͷઆ໌Λࢥ͍ग़͠ɺ ͍͍ͨͩͨσβΠϯΛཻ͝ͱʹղ •
ҟಈॳʹ”όϧʔϯͷ࡞” ͷ PRΛૹΔ͜ͱ͕Ͱ͖ͨʢ҆ṉʣ atomic design ͷಋࢣ @ygoto3_ ͜ͷtooltipత balloon࡞PR
atomic designΛݩʹ͠ɺ ʮίϯϙʔωϯτࢥߟʯͷ ʢײ֮తʹڞ༗͍ͯ͠ΔʣཻΛ ΑΓΘ͔Γ͘͢ೝࣝՄೳʹʂ
atomic design খ with designers
atomic design খ (2) ͜ͷؒͷΞϨͱΞϨΈ߹Θͤͯ งғؾͰ࡞͓ͬͯ͘ͷͰɺ ଞͷσβΠϯͷޙணखͰOKͰ͢Α💪 ϑϩϯτΤϯυ͞Μ ৽ϖʔδͷσβΠϯΔͶ💦 σβΠφʔ͞Μ
࠷ߴɻ σβΠφʔ͞Μ
σβΠφʔ͞ΜͱѨჴͷݺٵ͕ ΑΓͰ͖ΔΑ͏ʹͳΔʂ ʢຊϦϦʔεલͱ͔ͱ͍͍ͯײ͡ʹಈ͚ͨʣ
atomic design খ (3) • σβΠφʔI௩͞Μ ʮ͜͜ɺΧϥʔίʔυมߋͰ͢ʂʯ • σβΠφʔUా ʮΞϓϦΞΠίϯͷѹॖɺมߋͨ͠ʂʯ
atomic design খ (3) • σβΠφʔI௩͞Μ ʮ͜͜ɺΧϥʔίʔυมߋͰ͢ʂʯ • σβΠφʔUా ʮΞϓϦΞΠίϯͷѹॖɺมߋͨ͠ʂʯ
Ͱͳ͘ɺ ্ͷձ
ߏ͕γϯϓϧͳͷͰɺ σβΠφʔ͞Μʹͱͬͯ ͓͠PRΛૹΓ͍͢ڥʂ
࠷ߴ
·ͱΊ
atomic designͷ͓͢͢ΊϙΠϯτ γϯϓϧͳߟ͑ ΤϯδχΞͷख़࿅ΛΘͣɺ νʔϜͰͷڞ௨ೝࣝΛ͍࣋ͪ͢ σβΠϯ͕౷Ұ͞Ε͍͢ ʮ͜ͷϖʔδ͚༷͕ͩҧ͏ʯͳͲ͕ͳ͘ͳΓɺ ϓϩμΫτΛ͍͍͢ɺૢ࡞ʹ໎͍͕ͳ͘ͳΔ σβΠφʔ͞ΜͱΑΓྑ͘ͳΕΔ ͢ػձ͕૿͑ɺ͓ޓ͍ʹํ๏Λ࣠ʹ͠ͳ͕Βɺ
ఏҊ͠߹͏ؔʹͳΕΔ
atomic designͰ ͔ͨͬͨ͢ਓͨͪ front-end engineer@AbemaTV Yukako IIDA ଓ͖ɺ࠙ձͰ͓͠·͠ΐ͏ʔ🍻 ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ