Building Design Systems with Atomic Design

Transcript

1. Building Design Systems with Atomic Design ʔ @ooDEMi / 2019-02-08
2. Profile ͰΈ - @ooDEMi Front Engineer at Eureka, inc.
3. ఻͍͑ͨ͜ͱ
4. ໨తΛཧղͨ͠͏͑ͰAtomic DesignΛબͿ
5. Atomic Designͷϧʔϧ͸ઈରͰ͸ͳ͍
6. ·ͣ͸໨తͷ࿩͔Β
7. Atomic Designͷ໨త ↓ Design SystemsΛߏங͢Δ͜ͱ
9. Design Systems = ?
10. Design Systemsͷ3ཁૉ ໋໊ɾ෼ྨɾӡ༻
11. ໋໊ σβΠϯύλʔϯͷ໊લ͕ ڞ௨ͷݴޠͱͯ͠ػೳ͍ͯ͠Δ
13. ෼ྨ ໋໊͞ΕͨσβΠϯύλʔϯ͕ ڞ௨ͷϧʔϧͰ෼ྨ͞Ε͍ͯΔ
15. ӡ༻ ໋໊ɾ෼ྨ͞ΕͨσβΠϯύλʔϯΛ ϓϩμΫτʹద༻͠ɺӡ༻͠ଓ͚͍ͯΔ
16. ʮڞ௨ೝࣝʯ͕Ωʔϫʔυ
17. Design Systems͸σβΠφʔ/ΤϯδχΞ Ұํ͚ͩͰ࡞Δ͜ͱ͸ෆՄೳ
18. Atomic Design͸σβΠφʔ/ΤϯδχΞ Ұํ͚ͩͰ࣮ࢪ͢Δख๏Ͱ͸ͳ͍
19. Atomic Designͷ໨త ↓ Design SystemsΛߏங͢Δ͜ͱ
20. ໨తΛ஌ͬͨͷͰɺࠓ౓͸Atomic Designͷ࿩
22. Atomic Design͸σβΠϯύλʔϯΛ ෼ྨ͢ΔͨΊͷํ๏࿦
23. Design Systemsͷ3ཁૉ ໋໊ɾ෼ྨɾӡ༻
24. େ੾ͳ͜ͱ͸ɺσβΠφʔͱΤϯδχΞͰ ෼ྨͷೝ͕ࣝ߹͍ͬͯΔ͜ͱ
25. Ques%on ʮ͜ΕMoleculesͳͷʁ Organismsͳͷʁʯ
26. Answer ʮ໎͏͘Β͍ͳΒɺAtomic DesignΛ΍ΊΔʯ
27. Atomic DesignΛݫີʹकΔඞཁ͸ͳ͍
28. ࣗ෼͕ͨͪ෼ྨ͠΍͍͢Α͏ʹΞϨϯδ͢Δ
31. Atomic Design͸σβΠϯύλʔϯΛ෼ྨ͢ΔͨΊͷख๏ େ੾ͳ͜ͱ͸෼ྨʹରͯ͠ڞ௨ೝ͕ࣝ͋Δ͜ͱ ڞ௨ೝࣝΛऔΕΔͳΒAtomic Designʹͩ͜ΘΔඞཁ͸ͳ͍
32. ͜͜·Ͱ͕Atomic Designͷ࿩
33. Design Systemsͷ3ཁૉ ໋໊ɾ෼ྨɾӡ༻
34. ໋໊ͱӡ༻͸Atomic DesignͷൣᙝͰ͸ͳ͍
35. ໋໊ʹؔͯ͠͸ɺ νʔϜͰձ࿩͠ଓ͚Δ͔͠ແ͍
36. ύλʔϯ΢ΥʔϧΛઃஔͯ͠ɺि1Ͱ໋໊͢Δձ
37. ʮ΍ͬͯΔײʯΛग़͢
38. ӡ༻͸πʔϧͷྗΛआΓΔ
39. zeroheight
41. ߋ৽ɾࢀরͷ͠΍͢͞ΛՄೳͳݶΓߴΊΔ
42. ·ͱΊ
43. Atomic Designͷ໨త ↓ Design SystemsΛߏங͢Δ͜ͱ
44. Design Systemsͷ3ཁૉ ໋໊ɾ෼ྨɾӡ༻
45. Atomic Design͸σβΠϯύλʔϯΛ ෼ྨ͢ΔͨΊͷํ๏࿦
46. Atomic Designͷϧʔϧ͸ઈରͰ͸ͳ͍
48. Building Design Systems with Atomic Design ʔ @ooDEMi / 2019-02-08