$30 off During Our Annual Pro Sale. View Details »

Building Design Systems with Atomic Design

oodemi
February 08, 2019

Building Design Systems with Atomic Design

oodemi

February 08, 2019
Tweet

More Decks by oodemi

Other Decks in 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Λߏங͢Δ͜ͱ

  8. None
  9. Design Systems = ?

  10. Design Systemsͷ3ཁૉ ໋໊ɾ෼ྨɾӡ༻

  11. ໋໊ σβΠϯύλʔϯͷ໊લ͕ ڞ௨ͷݴޠͱͯ͠ػೳ͍ͯ͠Δ

  12. None
  13. ෼ྨ ໋໊͞ΕͨσβΠϯύλʔϯ͕ ڞ௨ͷϧʔϧͰ෼ྨ͞Ε͍ͯΔ

  14. None
  15. ӡ༻ ໋໊ɾ෼ྨ͞ΕͨσβΠϯύλʔϯΛ ϓϩμΫτʹద༻͠ɺӡ༻͠ଓ͚͍ͯΔ

  16. ʮڞ௨ೝࣝʯ͕Ωʔϫʔυ

  17. Design Systems͸σβΠφʔ/ΤϯδχΞ Ұํ͚ͩͰ࡞Δ͜ͱ͸ෆՄೳ

  18. Atomic Design͸σβΠφʔ/ΤϯδχΞ Ұํ͚ͩͰ࣮ࢪ͢Δख๏Ͱ͸ͳ͍

  19. Atomic Designͷ໨త ↓ Design SystemsΛߏங͢Δ͜ͱ

  20. ໨తΛ஌ͬͨͷͰɺࠓ౓͸Atomic Designͷ࿩

  21. None
  22. Atomic Design͸σβΠϯύλʔϯΛ ෼ྨ͢ΔͨΊͷํ๏࿦

  23. Design Systemsͷ3ཁૉ ໋໊ɾ෼ྨɾӡ༻

  24. େ੾ͳ͜ͱ͸ɺσβΠφʔͱΤϯδχΞͰ ෼ྨͷೝ͕ࣝ߹͍ͬͯΔ͜ͱ

  25. Ques%on ʮ͜ΕMoleculesͳͷʁ Organismsͳͷʁʯ

  26. Answer ʮ໎͏͘Β͍ͳΒɺAtomic DesignΛ΍ΊΔʯ

  27. Atomic DesignΛݫີʹकΔඞཁ͸ͳ͍

  28. ࣗ෼͕ͨͪ෼ྨ͠΍͍͢Α͏ʹΞϨϯδ͢Δ

  29. None
  30. None
  31. Atomic Design͸σβΠϯύλʔϯΛ෼ྨ͢ΔͨΊͷख๏ େ੾ͳ͜ͱ͸෼ྨʹରͯ͠ڞ௨ೝ͕ࣝ͋Δ͜ͱ ڞ௨ೝࣝΛऔΕΔͳΒAtomic Designʹͩ͜ΘΔඞཁ͸ͳ͍

  32. ͜͜·Ͱ͕Atomic Designͷ࿩

  33. Design Systemsͷ3ཁૉ ໋໊ɾ෼ྨɾӡ༻

  34. ໋໊ͱӡ༻͸Atomic DesignͷൣᙝͰ͸ͳ͍

  35. ໋໊ʹؔͯ͠͸ɺ νʔϜͰձ࿩͠ଓ͚Δ͔͠ແ͍

  36. ύλʔϯ΢ΥʔϧΛઃஔͯ͠ɺि1Ͱ໋໊͢Δձ

  37. ʮ΍ͬͯΔײʯΛग़͢

  38. ӡ༻͸πʔϧͷྗΛआΓΔ

  39. zeroheight

  40. None
  41. ߋ৽ɾࢀরͷ͠΍͢͞ΛՄೳͳݶΓߴΊΔ

  42. ·ͱΊ

  43. Atomic Designͷ໨త ↓ Design SystemsΛߏங͢Δ͜ͱ

  44. Design Systemsͷ3ཁૉ ໋໊ɾ෼ྨɾӡ༻

  45. Atomic Design͸σβΠϯύλʔϯΛ ෼ྨ͢ΔͨΊͷํ๏࿦

  46. Atomic Designͷϧʔϧ͸ઈରͰ͸ͳ͍

  47. None
  48. Building Design Systems with Atomic Design ʔ @ooDEMi / 2019-02-08