こんなSketch(Zeplin)はイヤだ #dxel /Anti pattern of sketch and zeplin

某カレンダー作成アプリを開発している会社で受け取ったデザインファイルがもっとこうだったら良かったなぁというものをまとめた発表です。
https://engineers-x-designers.connpass.com/event/103562/

Transcript

1. ͜ΜͳSketch (Zeplin )͸ΠϠͩ DXEL.2 2018/10/22 !1
2. Profile struct Profile { let name = "Kazuya Ueoka" let twitter = "@fromkk" let github = "fromkk" let qiita = "fromkk" let company = "Timers Inc." } • !2
3. લఏ •๭ΧϨϯμʔ࡞੒ΞϓϦΛ։ൃ͍ͯ͠ΔձࣾͰ͸
 σβΠφʔ͸Sketch ͰσβΠϯσʔλΛ࡞੒ •Zeplin ͰUIͷ΍ΓऔΓ •σβΠϯΛड͚औͬͨΤϯδχΞ͕ʮ΋ͬͱ͜͏ͩͬͨ Βخ͍͠ͳ͊ʯͱࢥͬͨ෺Λ·ͱΊͨ࿩ !3
4. Sketch !4 https://sketchapp.com • σβΠϯ࡞੒πʔϧ • Web΍ΞϓϦʹಛԽ • ௚ײత • ϓϥάΠϯͳͲͰػೳ֦ு
5. Zeplin !5 https://www.zeplin.io • νʔϜ಺σβΠϯڞ༗πʔϧ • Sketch/Photoshop͔Β؆ ୯ॻ͖ग़͠ • ࡉ͔͍UIͷ֬ೝɺը૾ॻ͖ग़ ͠ػೳ • ίϝϯτʹΑΔίϛϡχέʔ γϣϯ • ಁա΢Οϯυ΢Ͱ੒Ռ෺֬ೝ
6. ໿3೥ΞϓϦΛ։ൃɾӡ༻͍ͯ͠Δͱ •UIͷ࣮૷ʹۤ࿑ͨ͠ •Ͳ͏࣮૷ͨ͠Β͍͍ͷ͔෼͔Βͳ͍ •୺຤αΠζม͑Δͱ่Εͨ •etc !6
7. 1. Ұݟී௨ͷϝχϡʔը໘ !7
8. ࣮͸ҰͭͷςΩετͩͬͨ !8
9. Կ͕πϥ͍ͷ͔ •࣮૷ͷࢥߟͱ߹Θͳ͍ •ϥϕϧͷ഑ஔ͸਌ͷϏϡʔ͔ΒͷεϖʔεΛௐ੔ͯ͠ ͍͘ •εϖʔεͷαΠζ͕શ͘෼͔Βͳ͍ •ϥϕϧ͸վߦ͕͋ΓಘΔͷ͔ɺӳޠ౳ଟݴޠ΋ߟྀ͞ Ε͍ͯΔͷ͔෼͔Βͳ͍ !9
10. վળҊ ໘౗Ͱ΋ηϧͱςΩετΛͪΌΜͱ෼͚ͯ഑ஔ͠·͠ΐ͏ !10
11. 2. ͖ͬ͞ΑΓ͸ྑͦ͞͏ͳը໘ !11
12. ຊ౰ʹtopͷεϖʔε4pt? !12
13. ຊ౰ʹtopͷεϖʔε4pt? !13 • Font sizeͱLine height͕ҟ ͳ͍ͬͯͨ • UILabel͸ͦͷ··࢖͏ͱϑΥ ϯταΠζ͕ߴ͞ʹͳΔ • ࣮ࡍͷεϖʔε͸
 24-18+4=10ptͩͬͨͱ͍͏ࣄ Λܭࢉ͠ͳ͍ͱ͍͚ͳ͍
14. վળҊ !14 • 1ߦදࣔͷ৔߹͸Font sizeͱLine heightΛ߹ ΘͤΑ͏ • 2ߦදࣔҎ্ͷ৔߹͸ߦؒΛ ؾʹ͢Δͱࢥ͏ͷͰ͜ͷݶ ΓͰ͸͋Γ·ͤΜ
15. 3. ͓ɺը૾ͬΆ͍ !15 ॻ͖ग़͕͠ඞཁͩ
16. ͑ͬɺॻ͖ग़͠ग़དྷͳ͍ !16
17. վળҊ !17 ॻ͖ग़͠ઃఆ๨Εͳ͍
18. 4.SketchͰෳ਺ը૾·ͱΊͯॻ͖ग़͠ !18
19. ݁Ռ !19
20. ͑ͬ !20 ෳ਺ຕॻ͖ग़ͨ͠͸ͣͳͷʹ1ຕ͔͠ແ͔ͬͨ
21. ͜͏ͳ͍ͬͯͨ !21
22. վળҊ εϥΠεຖʹద੾ͳ໊લ෇͚·͠ΐ͏ !22
23. 5. iPhone XSͰ͸ͱͯ΋͍͍ײ͡ʹݟ͑Δը໘ !23
24. iPhone SEͰݟͨΒͲ͏ͳΔʁ !24
25. ͜͏ͳͬͨ !25 • େࣄͦ͏ͳϝοηʔδ͕੾Ε͍ͯΔ • େࣄͦ͏ͳΩϟονྖҬ͕੾Ε͍ͯΔ
26. վળҊ Zeplinͷ৔߹ !26 ֤ը໘αΠζ෼࡞ͬͯ ΋Β͏
27. վળҊ Sketchͷ৔߹ !27 ResizingΛ׆༻͢Δ
28. վળҊ Sketchͷ৔߹ !28 ResizingΛ׆༻͢Δ
29. վળҊ Sketchͷ৔߹ !29 ResizingΛ׆༻͢Δ
30. ߟ࡯ •UIͷड͚౉͠ʹZeplin͸ศར͚ͩͲສೳͰ͸ͳ͍ •ҟͳΔαΠζΛ֬ೝ͍ͨ͠৔߹ͳͲ͸SketchϑΝΠϧ Λͦͷ··΋Βͬͨํ͕఻ΘΔ͜ͱ΋͋Δ
 (※ResizingΛద੾ʹར༻͍ͯ͠Δ৔߹ʹݶΔ) !30
31. ଞʹ΋ •ಉ͡ϑΥϯτͬΆ͍͕Α͘ݟΔͱϖʔδຖʹϑΥϯτα Πζҧ͏ •ࣅ༷ͨͳύʔπ͕͍ΖΜͳϖʔδຖʹඍົʹҧ͏ •etc !31
32. վળҊ Atomic Designͷग़൪
 (Sketchͷ৔߹͸SymbolΛద੾ʹར༻) !32
33. ͜Ε͚ͩ͋Δͱπϥͦ͏ʹݟ͑Δ͚Ͳ ࣮͸େ͖ͳ໰୊ʹ͸ͳ͍ͬͯͳ͍ !33
34. Կނ͔ Pt.1 •UIΨΠυϥΠϯ͕͋Δ •ਖ਼ղ͸ͦ͜ʹ͋ΔͷͰଟগZeplin΍Sketch͕ζϨ͍ͯͯ΋ؾʹ͠ͳ ͍ओٛ •ΨΠυϥΠϯʹमਖ਼͕ೖͬͯ΋શ෦΍Βͳ͖ΌͬͯΘ͚Ͱ͸ͳ͘ݟͭ ͚ͨॴ͔Βগͣͭ͠ରॲ •ίϛϡχέʔγϣϯͰΧόʔ •ΤϯδχΞͷߴ౓ͳ዁౓ྗ' !34
35. Կނ͔ Pt.2 !35 https://speakerdeck.com/fromkk/use-ui-testing-as-a-tool-in-iosdc-2018 TestSummariesΛ࢖ͬͯ၆ᛌͯ͠σβΠϯ่ΕΛνΣοΫ
36. ͱ͸͍͑ •΋͠৽ͨʹΫϥΠΞϯτΤϯδχΞ͕૿͑ͨΒֶशί ετߴͦ͏ •ΫϥΠΞϯτଆͰAtomic Design΍OOUXͳͲΛऔΓ ೖΕͯίϯϙʔωϯτΛ࠶ར༻͠΍͍͢޻෉͸ඞཁ͔΋ • ʢσβΠφʔ΋ΨΠυϥΠϯʹԊͬͯ࡞ͬͯཉ͍͠͠ॻ͖ग़͠ઃఆ͙Β͍ ๨Εͳ͍Ͱཉ͍͠(খ੠)ʣ !36
37. ·ͱΊ •ݟͨ໨͚ͩσβΠϯ͞ΕͨSketch΍ZeplinΛ໯ͬͯ΋πϥ͍ ࣌͸͋ΔͷͰͪΌΜͱ੔ཧͯ͘͠ΕΔͱخ͍͠ •ϥϕϧ΍Ϙλϯɺը૾ؒͷεϖʔε͸࣮૷͢Δ࣌ͷίʔυͱҰ கग़དྷΔ༷ͳ޻෉͸ཉ͍͠) •ը૾ͷॻ͖ग़͠ઃఆ΍εϥΠεʹ໊લ෇͚Δͷେࣄ' •Symbol΍ResizingػೳΛద੾ʹ࢖͍͖ͬͯ·͠ΐ͏ !37
38. PR !38
39. !39
40. !40 ΤϯδχΞ΋σβΠφʔ΋ืूதʂ
41. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠) !41