Tweet
Tweet

Slide 1

Slide 1 text

Farmnote, Inc How to use Atomic design Atomic design ͷӡ༻ํ๏

Slide 2

Slide 2 text

גࣜձࣾ ϑΝʔϜϊʔτ σβΠφʔ΋΍ΔϓϩάϥϚ ੁݪ ޹ଇ ϑϨʔϜϫʔΫΛઃܭ͢Δͷͱ ΠϯλϥΫγϣϯͷ࣮૷͕ಘҙͰ͢ɻ σβΠϯ΋ͦΕͳΓʹ΍Γ·͢

Slide 3

Slide 3 text

ڇʹηϯαʔΛ͚ͭͯεϚϗʹൃ৘Λ௨஌ͨ͠Γ
 ຀৔؅ཧɾ෼ੳΛ͢ΔͨΊͷαʔϏεΛ࡞ͬͯΔձࣾͰ͢ɻ

Slide 4

Slide 4 text

զ͕ࣾʹ͸ઐۀͷσβΠφʔ͕͓Βͣɺ ݱࡏ͸๻͕݉ۀσβΠφʔΛ͓ͯ͠Γ·͢

Slide 5

Slide 5 text

ڇͷࣄશવΘ͔ΒΜ

Slide 6

Slide 6 text

ίʔυ΋ॻ͔Ͷ͹ͳΒΜ

Slide 7

Slide 7 text

͕࣌ؒͨΓΜ

Slide 8

Slide 8 text

्ҩͱϓϩάϥϚʹ σβΠϯͤ͞Ε͹͍͍ ͦ͏ͩʂʂʂ

Slide 9

Slide 9 text

Atomic Design

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

ͲΜͳײ͡Ͱ࡞͍ͬͯ Δͷ͔

Slide 12

Slide 12 text

͜ͷลΓΛσβΠφʔ ͕࡞ΓࠐΉ

Slide 13

Slide 13 text

͜ͷลΓͷୟ͖Λ ्ҩʹ࡞ͬͯ΋Β͏

Slide 14

Slide 14 text

σβΠφʔ͕࢓্͛ Δ

Slide 15

Slide 15 text

࣮ࡍʹίʔυʹམͱͤΔͷʁ

Slide 16

Slide 16 text

ϓϩάϥϚͱσβΠφͰ ͸ཻ౓ઃܭͷண؟఺͕ҧ ͏ͷͰ௒ٞ࿦ ཻ౓Λௐ੔͢Δ

Slide 17

Slide 17 text

࣮ࡍʹ࡞Δͱཻ౓͕ͣΕͨΓ͢ ΔͷͰɺ୭Ͱ΋͍͍ͷͰɺඞͣ σβΠϯʹมߋΛ൓өͤ͞Δ ஫ҙʂ

Slide 18

Slide 18 text

࣮ࡍ΍ΔͱɺσβΠϯσʔλͷ
 ΍ΓͱΓେม͡Όͳ͍ͷʁ

Slide 19

Slide 19 text

FigmaΛ࢖͍·͢

Slide 20

Slide 20 text

Figma GoogleDriveͱSketchΛࠞͥͨΑ͏ͳπʔϧ

Slide 21

Slide 21 text

ͱΓ͋͑ͣ͜ΕͰσβΠϯʹ ৘ใΛ੝ΕΔ͚ͩ੝Γଓ͚Δ

Slide 22

Slide 22 text

ΈΜͳ͕ར༻Ͱ͖ͯ
 ద౰ʹϨΠΞ΢τͯ΋ ࣮૷͕αΫοͱऴΘΔ σβΠϯγεςϜ͕ग़དྷ্͕Δ ݁Ռ