Upgrade to Pro — share decks privately, control downloads, hide ads and more …

dxel1

Ryo.Nitami
July 10, 2018
3.5k

 dxel1

Ryo.Nitami

July 10, 2018
Tweet

Transcript

  1. Who? — Ryo Nitami (@bird_tummy) — Android & iOS Application

    Engineer — iOSDC 2018 Core staff — ❤ SHISHAMO DXEL.1 ΤϯδχΞͱσβΠφʔ͕ʮ͍͍ؔ܎ʯΛஙͨ͘Ίʹ 2
  2. Very useful tools — Sketch — Adobe Ps / Ai

    — Zeplin — (Abstract) DXEL.1 ΤϯδχΞͱσβΠφʔ͕ʮ͍͍ؔ܎ʯΛஙͨ͘Ίʹ 6
  3. Big artboard is tsurai... — ݩ͸ 1 ΞʔτϘʔυ 1 ػೳʹ͍ͯͨ͠

    — ػೳʹΑͬͯ͸ 10 ຕҎ্ը໘͕͋ΔͷͰಡΈࠐΈ࣌ؒ൒୺ͳ͍ ʴॏ͍ — ϒϥ΢βͰ։͘ͱ࣮֬ʹϑϦʔζ — ίϝϯτ΋ͣΕΔ — ΞʔτϘʔυ಺ͷཁૉΛͣΒͯ͠΋͍͖ͭͯͯ͘Εͳ͍ ͳΜͱ͔͍ͨ͠ɻɻ(´ɾТɾʆ) DXEL.1 ΤϯδχΞͱσβΠφʔ͕ʮ͍͍ؔ܎ʯΛஙͨ͘Ίʹ 7
  4. Components released! ! 1 — ΞʔτϘʔυ 㱻 ίϯϙʔωϯτ ͷඥ͚͕ͮͰ͖Δ —

    ίϯϙʔωϯτΛબͿͱͲͷΞʔ τϘʔυͰ࢖ΘΕͯΔ͔͕ҰཡͰ ग़ͯ͘Δ — 7ʙ80 ݸ͘Β͍ొ࿥͢Δͱ͓ۚ ෷ͬͯͬͯݴΘΕΔʢະݕূʣ 1 https://blog.zeplin.io/introducing-zeplin-2-0- components-and-a-ton-more-goodies-7c09dacc1f48 DXEL.1 ΤϯδχΞͱσβΠφʔ͕ʮ͍͍ؔ܎ʯΛஙͨ͘Ίʹ 8
  5. Using components function on Artboard — ϓϩδΣΫτ͸ 1 ϓϥοτϑΥʔϜʹ͖ͭ 1

    ݸ — ΞʔτϘʔυ͸ 1 ը໘ʹ͖ͭ 1 ຕ — ͦͷը໘ʹؔ࿈͢Δ΋ͷʢϘλϯͷ׆ੑʗඇ׆ੑঢ়ଶͷը ૾ͳͲʣ͸ؚΊΔ — Android / iOS ʹڞ௨͢Δίϯϙʔωϯτ͸ Components ܦ ༝Ͱ — ϑΥϯτ΍ςΩεταΠζͳͲͷҧ͍͸ Text Styles Ͱٵऩ DXEL.1 ΤϯδχΞͱσβΠφʔ͕ʮ͍͍ؔ܎ʯΛஙͨ͘Ίʹ 9
  6. png or svg? — Sketch ͰεϥΠεͨ͠ͱ͜Ζ͸ Zeplin Ͱը૾ͱͯ͠ॻ͖ ग़͢͜ͱ͕Մೳ —

    Android Ͱ΋ iOS Ͱ΋ SVG දࣔ͸ՄೳͳͷͰɺ΍Γ΍͢ ͍ํΛબͿ — iOS ͸ͪΐͬͱ໘౗ DXEL.1 ΤϯδχΞͱσβΠφʔ͕ʮ͍͍ؔ܎ʯΛஙͨ͘Ίʹ 12
  7. ը૾΋దࡐదॴ — Google ͞Μ΋ Vector ࢖͏͔Ͳ͏͔͸ͪΌΜͱߟ͑ͯͬͯݴͬ ͯΔ 2 — Android

    ͷ৔߹ɺ200x200 Ҏ্ͷը૾͸ॳճಡΈࠐΈ͕஗͍ 3 — Zeplin Ͱ PNG ΍ JPG ΋ΤΫεϙʔτͰ͖ΔͷͰదࡐదॴɺ ͳ͍͠΍Γ΍͢͞Ͱબͼ·͠ΐ͏ 3 http://nyanyoni.hateblo.jp/entry/2017/01/29/021438 2 https://medium.com/upday-devs/optimizing-the-performance-of-vector- drawables-680a4c456286 DXEL.1 ΤϯδχΞͱσβΠφʔ͕ʮ͍͍ؔ܎ʯΛஙͨ͘Ίʹ 13
  8. ·ͱΊ — Zeplin ͱ Sketchʢ΋͘͠͸ Adobe ੡඼ʣ͸͍͍૊Έ߹Θ ͤ — Ұఆͷ࢓૊ΈΛߏஙͯ͠͠·͑͹͋ͱ͸ԶͷλʔϯʹͳΔ͸

    ͣ — ΤϯδχΞ ❤ σβΠφʔʹͳΔखॿ͚ʹͳΕ͹޾͍Ͱ͢ DXEL.1 ΤϯδχΞͱσβΠφʔ͕ʮ͍͍ؔ܎ʯΛஙͨ͘Ίʹ 14