Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
dxel1
Ryo.Nitami
July 10, 2018
0
2.4k
dxel1
https://engineers-x-designers.connpass.com/event/90163/
Ryo.Nitami
July 10, 2018
Tweet
Share
More Decks by Ryo.Nitami
See All by Ryo.Nitami
bird_tummy
1
550
bird_tummy
0
180
bird_tummy
2
2.6k
bird_tummy
0
2.7k
bird_tummy
0
200
bird_tummy
1
2.2k
bird_tummy
0
210
bird_tummy
2
84
bird_tummy
0
1.9k
Featured
See All Featured
mongodb
23
3.8k
reverentgeek
27
1.9k
robhawkes
52
2.8k
mthomps
39
2.3k
jensimmons
207
10k
wjessup
338
16k
jmmastey
9
550
keavy
106
14k
sugarenia
233
840k
jonrohan
1021
380k
revolveconf
200
9.6k
bkeepers
52
4.2k
Transcript
Android, iOS ྆ํΛߟྀͨ͠ΞϓϦσ βΠϯཧ 2018/07/10 DXEL.1 DXEL.1 ΤϯδχΞͱσβΠφʔ͕ʮ͍͍ؔʯΛஙͨ͘Ίʹ 1
Who? — Ryo Nitami (@bird_tummy) — Android & iOS Application
Engineer — iOSDC 2018 Core staff — ❤ SHISHAMO DXEL.1 ΤϯδχΞͱσβΠφʔ͕ʮ͍͍ؔʯΛஙͨ͘Ίʹ 2
My History — ֶੜ࣌ʹΞϧόΠτͷσβΠφʔͱͯ͠όφʔྔ࢈ͯͨ͠ — όφʔΉ͔ͣ͗͢͠ΘΖͨ — ϕδΣۂઢ͋ — σβΠϯ͓͠Ζ͍͚ͲࣗͰΞϓϦ࡞ΕΔͱͬͱྑ͞
ͦ͏ͩͳʔ — ΤϯδχΞ DXEL.1 ΤϯδχΞͱσβΠφʔ͕ʮ͍͍ؔʯΛஙͨ͘Ίʹ 3
Target — ΤϯδχΞ -> σβΠφʔ — Web σβΠϯͬͨ͜ͱ͋Δ͚ͲΞϓϦΘ͔ΒΜͬͯํ DXEL.1 ΤϯδχΞͱσβΠφʔ͕ʮ͍͍ؔʯΛஙͨ͘Ίʹ
4
Agenda — ΞʔτϘʔυͷཧ — ը૾ͷཧ DXEL.1 ΤϯδχΞͱσβΠφʔ͕ʮ͍͍ؔʯΛஙͨ͘Ίʹ 5
Very useful tools — Sketch — Adobe Ps / Ai
— Zeplin — (Abstract) DXEL.1 ΤϯδχΞͱσβΠφʔ͕ʮ͍͍ؔʯΛஙͨ͘Ίʹ 6
Big artboard is tsurai... — ݩ 1 ΞʔτϘʔυ 1 ػೳʹ͍ͯͨ͠
— ػೳʹΑͬͯ 10 ຕҎ্ը໘͕͋ΔͷͰಡΈࠐΈ࣌ؒͳ͍ ʴॏ͍ — ϒϥβͰ։͘ͱ࣮֬ʹϑϦʔζ — ίϝϯτͣΕΔ — ΞʔτϘʔυͷཁૉΛͣΒ͍͖ͯͭͯͯ͘͠Εͳ͍ ͳΜͱ͔͍ͨ͠ɻɻ(´ɾТɾʆ) DXEL.1 ΤϯδχΞͱσβΠφʔ͕ʮ͍͍ؔʯΛஙͨ͘Ίʹ 7
Components released! ! 1 — ΞʔτϘʔυ 㱻 ίϯϙʔωϯτ ͷඥ͚͕ͮͰ͖Δ —
ίϯϙʔωϯτΛબͿͱͲͷΞʔ τϘʔυͰΘΕͯΔ͔͕ҰཡͰ ग़ͯ͘Δ — 7ʙ80 ݸ͘Β͍ొ͢Δͱ͓ۚ ͬͯͬͯݴΘΕΔʢະݕূʣ 1 https://blog.zeplin.io/introducing-zeplin-2-0- components-and-a-ton-more-goodies-7c09dacc1f48 DXEL.1 ΤϯδχΞͱσβΠφʔ͕ʮ͍͍ؔʯΛஙͨ͘Ίʹ 8
Using components function on Artboard — ϓϩδΣΫτ 1 ϓϥοτϑΥʔϜʹ͖ͭ 1
ݸ — ΞʔτϘʔυ 1 ը໘ʹ͖ͭ 1 ຕ — ͦͷը໘ʹؔ࿈͢ΔͷʢϘλϯͷ׆ੑʗඇ׆ੑঢ়ଶͷը ૾ͳͲʣؚΊΔ — Android / iOS ʹڞ௨͢Δίϯϙʔωϯτ Components ܦ ༝Ͱ — ϑΥϯτςΩεταΠζͳͲͷҧ͍ Text Styles Ͱٵऩ DXEL.1 ΤϯδχΞͱσβΠφʔ͕ʮ͍͍ؔʯΛஙͨ͘Ίʹ 9
DXEL.1 ΤϯδχΞͱσβΠφʔ͕ʮ͍͍ؔʯΛஙͨ͘Ίʹ 10
DXEL.1 ΤϯδχΞͱσβΠφʔ͕ʮ͍͍ؔʯΛஙͨ͘Ίʹ 11
png or svg? — Sketch ͰεϥΠεͨ͠ͱ͜Ζ Zeplin Ͱը૾ͱͯ͠ॻ͖ ग़͢͜ͱ͕Մೳ —
Android Ͱ iOS Ͱ SVG දࣔՄೳͳͷͰɺΓ͢ ͍ํΛબͿ — iOS ͪΐͬͱ໘ DXEL.1 ΤϯδχΞͱσβΠφʔ͕ʮ͍͍ؔʯΛஙͨ͘Ίʹ 12
ը૾దࡐదॴ — 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
·ͱΊ — Zeplin ͱ Sketchʢ͘͠ Adobe ʣ͍͍Έ߹Θ ͤ — ҰఆͷΈΛߏஙͯ͠͠·͑͋ͱԶͷλʔϯʹͳΔ
ͣ — ΤϯδχΞ ❤ σβΠφʔʹͳΔखॿ͚ʹͳΕ͍Ͱ͢ DXEL.1 ΤϯδχΞͱσβΠφʔ͕ʮ͍͍ؔʯΛஙͨ͘Ίʹ 14