Save 37% off PRO during our Black Friday Sale! »

Atomic Designにまつわるエトセトラ

Atomic Designにまつわるエトセトラ

20150530
春のフロントエンド祭り

D32564792887e3fb5955021f9804c0a6?s=128

Edward Fox

May 30, 2015
Tweet

Transcript

  1. Atomic Design ʹ·ͭΘΔΤτητϥ 2015-05-30

  2. Edward Fox • Repro Inc. • Front-end Developer • Ruby

    on Rails, CSS, JavaScript, Git, AWS
  3. ࠓճ࿩͢͜ͱ • Atomic Designͱ͍͏ઃܭࢥ૝ • ۜͷ஄ؙ͸ͳ͍

  4. ࠓճ࿩͞ͳ͍͜ͱ • ׬ᘳͳσβΠϯɾઃܭ • σβΠϯͷϋ΢πʔ΍ٕ๏

  5. None
  6. σβΠϯΛ֎஫͢Δ͜ͱʹ

  7. Atomic Designͱ͍͏΋ͷ͕͋ΔΒ͍͠

  8. None
  9. Brad Frost

  10. Atomic design provides a clear methodology for crafting design systems.

    It gives us the ability to traverse from abstract to concrete. Because of this, we can create systems that promote consistency and scalability while simultaneously showing things in their final context. And by assembling rather than deconstructing, we’re crafting a system right out of the gate instead of cherry picking patterns after the fact.
  11. Α͏͢Δʹ

  12. • σβΠϯγεςϜΛ࡞Δํ๏࿦ͷ1ͭ • σβΠϯͷҰ؏ੑͱ֦ுੑ • ଟਓ਺ͷ࡞ۀʹ͓͍ͯ΋ɺσβΠϯγες Ϝ͕1ͭ1ͭ૊Έ্͕ͬͯߏங͞ΕΔ

  13. Atoms

  14. Atoms

  15. Molecules

  16. Molecules

  17. Organisms

  18. Organisms

  19. Templates

  20. Templates

  21. Pages

  22. Pages

  23. Θ͔Γ΍͍͢ • ࠷খ୯ҐͷίϯϙʔωϯτΛ࡞ΓɺͦΕΛ ૊Έ߹ΘͤͯΑΓෳࡶͳσβΠϯΛܗ࡞Δ

  24. σβΠφʔͱΤϯδχΞ͕ڠௐ͠΍ͦ͢͏ • σβΠϯͷίϯϙʔωϯτʢࢹ֮తͳ·ͱ ·Γʣͱ࣮૷ͷ୯ҐʢHTMLλάʗCSS ϑΝΠϧʣ͕ରԠ͢Δ

  25. None
  26. None
  27. ৭ʑͱ໰୊΋͋Δ

  28. ໰୊: Τϥʔϝοηʔδ͸ Molecule? Organism? Template?

  29. ղܾ: ୯ମͰҙຯΛ΋ͬͯػೳ͢Δ͔Β Organismʹू໿

  30. ໰୊: ଟݴޠରԠͱ͔Ͳ͏͢Μͷ?

  31. ղܾ: ͦΕͧΕͷݴޠΛ 1ͭͷςϯϓϨʔτͱͯ͠ߟ͑Δ

  32. None
  33. None
  34. None
  35. None
  36. None
  37. θϩ͔ΒϓϩμΫτ΍ϒϩάςʔϚͳͲΛ࡞͍ͬͯ͘ ʹ͸ྑͦ͞͏ • طଘͷαʔϏε͔ΒཁૉΛநग़ͯ͠Atomicͳཁૉʹ ෼ׂ͍ͯ͘͠ͷ͸೉͍͠ • Photoshopͱ͔SketchͰͰ͖ͨσβΠϯΛ࣮૷͍ͯ͠ ͘৔߹ʹ͸Atomicͳཁૉͷ࿙Ε͕͋Γͦ͏

  38. • ୯ҰϖʔδʹAtomic DesignΛ࢖Θͳ͍

  39. ݁࿦ • Atomic Designྑ͍ɻͰ΋αʔϏεͷஈ֊΍։ൃʹ͋ͬ ͨσβΠϯ఩ֶɾઃܭΛબ୒͢Δͷେࣄ • CSS͸͙͢෗Δ • ׬શແܽͳઃܭΛ໨ࢦ͢ͷͰ͸ͳ͘ɺյΕͨͱͯ͠΋ ෮چ͕͙͢ʹग़དྷΔઃܭͱ৺ߏ͑Λ

  40. Sample: https://github.com/edwardkenfox/atomic-sample

  41. We’re hiring!

  42. ׬