AtomicDesignの運用方法

AtomicDesignを運用する上気にしていることなどをまとめてみました

Transcript

1. Farmnote, Inc How to use Atomic design Atomic design ͷӡ༻ํ๏
2. גࣜձࣾ ϑΝʔϜϊʔτ σβΠφʔ΋΍ΔϓϩάϥϚ ੁݪ ޹ଇ ϑϨʔϜϫʔΫΛઃܭ͢Δͷͱ ΠϯλϥΫγϣϯͷ࣮૷͕ಘҙͰ͢ɻ σβΠϯ΋ͦΕͳΓʹ΍Γ·͢
3. ڇʹηϯαʔΛ͚ͭͯεϚϗʹൃ৘Λ௨஌ͨ͠Γ
 ຀৔؅ཧɾ෼ੳΛ͢ΔͨΊͷαʔϏεΛ࡞ͬͯΔձࣾͰ͢ɻ
4. զ͕ࣾʹ͸ઐۀͷσβΠφʔ͕͓Βͣɺ ݱࡏ͸๻͕݉ۀσβΠφʔΛ͓ͯ͠Γ·͢
5. ڇͷࣄશવΘ͔ΒΜ
6. ίʔυ΋ॻ͔Ͷ͹ͳΒΜ
7. ͕࣌ؒͨΓΜ
8. ्ҩͱϓϩάϥϚʹ σβΠϯͤ͞Ε͹͍͍ ͦ͏ͩʂʂʂ
9. Atomic Design
11. ͲΜͳײ͡Ͱ࡞͍ͬͯ Δͷ͔
12. ͜ͷลΓΛσβΠφʔ ͕࡞ΓࠐΉ
13. ͜ͷลΓͷୟ͖Λ ्ҩʹ࡞ͬͯ΋Β͏
14. σβΠφʔ͕࢓্͛ Δ
15. ࣮ࡍʹίʔυʹམͱͤΔͷʁ
16. ϓϩάϥϚͱσβΠφͰ ͸ཻ౓ઃܭͷண؟఺͕ҧ ͏ͷͰ௒ٞ࿦ ཻ౓Λௐ੔͢Δ
17. ࣮ࡍʹ࡞Δͱཻ౓͕ͣΕͨΓ͢ ΔͷͰɺ୭Ͱ΋͍͍ͷͰɺඞͣ σβΠϯʹมߋΛ൓өͤ͞Δ ஫ҙʂ
18. ࣮ࡍ΍ΔͱɺσβΠϯσʔλͷ
 ΍ΓͱΓେม͡Όͳ͍ͷʁ
19. FigmaΛ࢖͍·͢
20. Figma GoogleDriveͱSketchΛࠞͥͨΑ͏ͳπʔϧ
21. ͱΓ͋͑ͣ͜ΕͰσβΠϯʹ ৘ใΛ੝ΕΔ͚ͩ੝Γଓ͚Δ
22. ΈΜͳ͕ར༻Ͱ͖ͯ
 ద౰ʹϨΠΞ΢τͯ΋ ࣮૷͕αΫοͱऴΘΔ σβΠϯγεςϜ͕ग़དྷ্͕Δ ݁Ռ