Zeplinを使ったコンポーネント管理術

2019年11月24日（日）にDesignship 2019 でLTした登壇資料です。Quipper でのデザインコンポーネント管理を、Abstract/zeplin/sketchを使ってどのようにやっているのかを簡単に説明しました。

Transcript

1. Zeplin Λ࢖ͬͨ ίϯϙʔωϯτ؅ཧज़ 24 November 2019 @ Designship 2019 @daitorii Quipper Limited - VP of Design
2. Quipper Limited VP of Design ௗډ େ @daitorii લ৬ࣄۀձࣾ΁σβΠφʔͱͯ͠ೖࣾޙɺ৽نࣄۀ੹೚ऀ ʹɻͦͷޙσβΠϯ૊৫ϚωʔδϟʔΛܦͯ೥݄ 2VJQQFS
   ΁ೖࣾɻ೥݄ΑΓ 71
   PG
   %FTJHO
   ͱͯ͠೔ ຊΠϯυωγΞϑΟϦϐϯͷσβΠϯ૊৫Λ౷ׅɻ όϯυʢ"5"5"ʣͰ͸ΪλʔΛ୲౰ɻ
3. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ 2VJQQFS
   ͸ %JTUSJCVUPST
   PG
   8JTEPN ͱ͍͏Ϗδϣϯͷ΋ͱɺΦϯϥΠϯڭҭαʔϏεΛ௨ͯ͡ #SJOHJOH
   UIF
   #FTU
   &EVDBUJPO
   UP
   &WFSZ
   $PSOFS
   PG
   UIF
   8PSME ੈքͷՌͯ·Ͱ࠷ߴͷֶͼΛಧ͚Α͏ɺͱ͍͏ϛογϣϯΛܝ͍͛ͯ·͢ɻ
5. Japan Indonesia G4-9 G10-12 Adults G10-12 G10-12 Philippines Mexico ύʔιφϧίʔν Online Video Online Video & Assessment Online Coaching G9 ఏڙ͍ͯ͠ΔαʔϏε Services
6. σβΠϯ૊৫
7. ελσΟαϓϦ , খதߴେ
   ͷϫʔΫϑϩʔ Ϧαʔν ػೳઃܭ ཁ݅ఆٛ ߏ଄ઃܭ ը໘ઃܭ ಋઢઃܭ σβΠϯ ࡞ۀ ϨϏϡʔ मਖ਼ ຊ൪σʔλ όʔδϣϯ؅ཧ ˞ ศ্ٓҰํ௨ߦͷ໼ҹͰ͕͢ɺ࣮ࡍ͸Կ౓΋͍ͬͨΓ͖ͨΓ͠·͢ ෼ੳ اը
8. ελσΟαϓϦ , খதߴେ
   ͷϫʔΫϑϩʔ όʔδϣϯ؅ཧ Ϧαʔν ػೳઃܭ ཁ݅ఆٛ ߏ଄ઃܭ ը໘ઃܭ ಋઢઃܭ σβΠϯ ࡞ۀ ϨϏϡʔ मਖ਼ ຊ൪σʔλ ෼ੳ اը
9. 出展: https://uxdaystokyo.com/articles/glossary/atomic-design/ ίϯϙʔωϯτͰσβΠϯσʔλΛϥΠϒϥϦԽ
10. ͜ͷύʔπ͸৽نʁ طଘͰ͔͢ʁ ͳʹ΋Θ͔Βͳ͍ Ͳ͔͜ͷϖʔδͰ ࢖ͬͯ·͔͢ʁ ͋;Εग़ٙ͢໰࣭໰
11. ;FQMJO
    Ͱղܾ͠·͠ΐ͏
12.  ίϯϙʔωϯτΛϥΠϒϥϦԽ͠؅ཧ
13.  ͞·͟·ͳϨΠΞ΢τύλʔϯ͝ͱʹ ίϯϙʔωϯτΛ࡞੒͠ఆٛ
14.  ίϯϙʔωϯτΛ૊Έ߹Θͤϖʔδ࡞੒
15.  ֤ϖʔδΛηΫγϣϯͰ؅ཧ
16.  Ұཡ͔ΒηΫγϣϯʹҠಈ΋Մೳ Mac AppͳΒӈΫϦοΫͰ ηΫγϣϯ΁ͷδϟϯϓ͕ग़དྷ·͢
17.  ίϯϙʔωϯτ΋֊૚Խͯ͠؅ཧ
18.  ίϯϙʔωϯτͷ࢖༻ϖʔδ͕Θ͔Δ ͜ͷίϯϙʔωϯτΛ ࢖༻͍ͯ͠Δϖʔδ
19. ͜ͷύʔπ͸طଘͰ͋ Γ·ͨ͠ ͳʹ΋Θ͔Βͳ͍ ͜ͷϖʔδͰ࢖ͬͯΔ ΜͩͶ ࢖༻ՕॴΛݟ͑ΔԽͯ͠ղܾ
20. ͳʹ΋Θ͔Βͳ͍
21. ৽نɾར༻ͷϧʔϧ͕ͳ͍ ίϯϙʔωϯτͷ؅ཧ͸ग़དྷͨɻ͕ɺ ʢਖ਼͘͠͸ɺ͋Δ͕໌จԽ͞Ε͍ͯͳ͍ʣ
22. ࠓޙ΍͍ͬͯ͘͜ͱ ࡞੒ɾར༻ϧʔϧ΋໌จԽ͠ ࠶ݱੑͷ͋ΔσβΠϯ࡞੒ΛՄೳʹ
24. Thank you for listening! @daitorii