Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 …
•
• 😭
atomic design
• 

atomic design 

atomic design
@ygoto3_
hover
hover

ORGANISMS
MOLECULESATOMS
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
🍻
Atomic designで助かった人たち
Atomic designで助かった人たち
Atomic designで助かった人たち
Atomic designで助かった人たち
Atomic designで助かった人たち
Upcoming SlideShare
Loading in …5
×

Atomic designで助かった人たち

2,192 views

Published on

frontrend vol.8 LT枠にて、AbemaTVで採用しているatomic designの話を「Atomic designで助かった人たち」というタイトルで発表しました。

Published in: Engineering
  • Be the first to comment

Atomic designで助かった人たち

  1. 1. atomic design 
 front-end engineer@AbemaTV Yukako IIDA @becyn
  2. 2. about myself • front-end engineer @ AbemaTV • AbemaTV join front 0 • atomic design • server-side 2.5y • android 0.5y
  3. 3. what’s atomic design? • • 5 ATOMS MOLECULES ORGANISMS TEMPLATES PAGES
  4. 4. what’s atomic design? • • 5 ATOMS MOLECULES ORGANISMS TEMPLATES PAGES
  5. 5. what’s atomic design? • • 5 ATOMS MOLECULES ORGANISMS TEMPLATES PAGES ATOMS
  6. 6. what’s atomic design? • • 5 ATOMS MOLECULES ORGANISMS TEMPLATES PAGES 

  7. 7. what’s atomic design? • • 5 ATOMS MOLECULES ORGANISMS TEMPLATES PAGES 

  8. 8. what’s atomic design? • • 5 ATOMS MOLECULES ORGANISMS TEMPLATES PAGES
  9. 9. what’s atomic design? • • 5 ATOMS MOLECULES ORGANISMS TEMPLATES PAGES
  10. 10. what’s atomic design? • AbemaTV 3 ATOMS MOLECULES ORGANISMS TEMPLATES PAGES
  11. 11. atomic design with me
  12. 12. atomic design • 
 1PR … • • 😭
  13. 13. atomic design • 
 atomic design 
 atomic design @ygoto3_
  14. 14. hover
  15. 15. hover

  16. 16. ORGANISMS MOLECULESATOMS ORGANISMS hover ATOMS ATOMS
  17. 17. atomic design • 
 atomic design 
 • ” ” 
 PR atomic design @ygoto3_ tooltip 
 balloon PR
  18. 18. atomic design 

  19. 19. atomic design with designers
  20. 20. atomic design (2) 
 
 OK 💪 💦
  21. 21. 
 

  22. 22. atomic design (3) • I 
 • U 

  23. 23. atomic design (3) • I 
 • U 

  24. 24. PR
  25. 25. atomic design 
 
 

  26. 26. atomic design 
 front-end engineer@AbemaTV Yukako IIDA 🍻

×