Sketch & InVision-arbejdsgang for udviklere

Jeg har brugt Sketch til alle aspekter af designarbejde i lang tid nu, men når jeg oprettede et iOS og Android-projekt i den samme fil, har jeg haft problemer med at eksportere aktiver.

Hos MOBGEN Accenture Interactive har vi for nylig brugt InVision-pakken til designoverlevering til udviklere, og for at holde projekterne rene bruger vi et enkelt projekt med både iOS- og Android-design.

Når det kommer til målingerne, fungerer InVision temmelig godt for os; alle kan nemt skifte projekter og målingstyper. Når det gælder eksporterede aktiver, har vi imidlertid snublet over få problemer.

For at gøre aktiver, der kan eksporteres og downloades i InVision, skal designere markere hvert af disse elementer som eksporterbare eller bruge skiver, idet de definerer størrelsen og typen, der skal eksporteres til.

Ved at undersøge størrelser, der er nødvendige til iOS og Android, kan vi se, at der er nogle delte størrelser.

Sætup-skitsefil

Start med at navigere til Sketch 'Præferencer' og opret en ny forudindstilling til eksportindstillinger. Jeg har navngivet min 'Alle aktiver' - dette inkluderer alle eksportindstillinger til Android og iOS kombineret (vi sorterer og omdøber aktiver senere med et script).

Skitsepræferencer

Før du uploader nogen skærmbilleder til InVision, skal du sørge for, at du har markeret alle aktiver, du har brug for, som eksporterbare (eller brugte skiver). Det samme gælder hvis du ikke bruger InVision, markerer alle nødvendige aktiver som eksportbare og klikker derefter på 'Eksporter alle' længst til højre på værktøjslinjen.

Sketch Toolbar

invision

Naviger til dit projekt inden for InVision. Klik på en af ​​skærmene og gå ind i 'Inspicér tilstand' (du kan også bruge 'i' på tastaturet). Vælg nu fanen 'Aktiver' og 'Download alle' aktiver.

InVision-projekt

Når du har downloadet, skal du flytte alle aktiver til din ønskede mappe - jeg foreslår, at du opretter en midlertidig mappe på skrivebordet, mens du går gennem de næste trin i 'magi' og derefter kopierer og indsætter aktiverne i dit projekt.

Du vil ende med en mappe, der ligner denne

HereHvor magien sker

Det kræver lidt #hackerSkills for at bruge shell-kommandoen - men rolig - det er mest bare at kopiere og indsætte .

Jeg har skrevet to shell-kommandoskripter, der går gennem din aktivmappe og omarrangerer alle aktiverne i et korrekt format.

Og det går lidt i denne retning ...

Åbn din terminal og kopier og indsæt den kode, du har brug for. Før du indsætter, skal du ændre 'din destination' til din aktuelle mappedestination (for eksempel til / Desktop / temp).

Til Android-aktiver

cd din bestemmelse
mkdir xxxhdpi; mkdir xxhdpi; mkdir xhdpi; mkdir hdpi; mkdir mdpi; mkdir ldpi
Færdig
for fil i $ (find. -type f-navn '* @ 4x *'); gøre
  mv "$ fil" "xxxhdpi / $ {fil / @ 4x /}"
Færdig
for fil i $ (find. -type f-navn '* @ 3x *'); gøre
  mv "$ fil" "xxhdpi / $ {fil / @ 3x /}"
Færdig
for fil i $ (find. -type f-navn '* @ 2x *'); gøre
  mv "$ fil" "xhdpi / $ {fil / @ 2x /}"
Færdig
for fil i $ (find. -type f-navn '* @ 1,5x *'); gøre
  mv "$ fil" "hdpi / $ {fil / @ 1,5x /}"
Færdig
for fil i $ (find. -type f-navn '* @ 0,75x *'); gøre
  mv "$ fil" "ldpi / $ {fil / @ 0,75x /}"
Færdig
for fil i $ (find. -type f-navn '* .png'); gøre
  mv "$ fil" "mdpi /"
Færdig

Efter at have kørt scriptet skulle du ende med noget der ligner dette. Alle aktivfiler omdøbes og placeres i den tilsvarende mappe.

For iOS-aktiver

cd din bestemmelse
for fil i $ (find. -type f-navn '* @ 1x *'); gøre
  mv "$ fil" "$ {fil / @ 1x /}"
Færdig
  rm -f * @ 4x *
Færdig
  rm -f * @ 1,5x *
Færdig
  rm -f * @ 0,75x *
Færdig

Efter at have kørt script skal du ende med noget lignende. Scriptet fjerner filer i størrelserne x4, x1.5, x0.75 og omdøber x1.

Bonus

Hvis du ikke allerede bruger et Sketch-plugin til at komprimere alle dine billeder, foreslår jeg, at du prøver ImageOptim eller TinyPNG.

Hurtigt og nemt

Vi har fundet denne arbejdsgang meget nyttig. Vi kan oprette alle aktiver til iOS og Android i et enkelt projekt - hvilket betyder, at udviklere ender med optimerede og organiserede aktiver.

Jeg er Lan Belic, en designer, der bor i Amsterdam. Jeg skabte dette ikke kun for at gøre vores egne liv på MOBGEN lettere, men også forhåbentlig også gøre det samme for dig. Har du nogen tanker eller måske en feedback? Giv mig et råb på Twitter!