Begyndervejledningen til skrivning af sketch-plugins Del 1 - Kom godt i gang

Så du vil begynde at skrive Sketch-plugins, men har ingen idé om, hvor du skal starte? Bliv ved med at læse, fordi denne artikel er for dig!

Hvis du er som mig, er det ikke let at prøve at finde basale koncepter derude. Der er mange eksempler på eksisterende plugins, men det er svært at vide, hvor man skal begynde. Så for at hjælpe har jeg samlet alle de oplysninger, jeg har fundet, på et enkelt sted.

Dette er bestemt ikke en avanceret guide til skrivning af plugins, da jeg ikke er nogen udvikler. Jeg er en UI / UX Designer, der tilfældigvis koder temmelig ordentligt (så tror jeg). Rigtige udviklere græder måske åbent, når de ser min kode, men jeg tror, ​​jeg koder på en måde, der er forståelig for begyndere.

Hvis du er en ingeniør, der leder efter mere avancerede eksempler, er der et væld af oplysninger her: http://james.ooo/sketch-plugin-development og på det officielle Sketch-udviklerwebsted: http://developer.sketchapp.com/

Hvorfor skrive et plugin?

Plugins er perfekte til at automatisere gentagne opgaver, de gør arbejde og produktion meget lettere. Der er chancer for, at der allerede er et plugin til det, du skal gøre, så sørg for at søge først, før du prøver at skrive dit eget, fordi sandsynligvis en anden har gjort det bedre. Men hvis din proces med at oprette UI er unik (som for mig, designe UI til spil i Unity), har du sandsynligvis brug for en tilpasset løsning.

Kom godt i gang

Før du begynder at skrive en kodelinje, skal du starte med at få al din software og bogmærker opsat.

  1. Hvis du ikke allerede har en, skal du downloade en teksteditor. (Jeg bruger Atom, men der er en masse gode tekstredaktører derude som Sublime eller Textmate)
  2. Åbn derefter din konsol til fejlsøgning, og føj den til din dock, du bruger dette meget.

3. Konsollen bruges af din maskine til ALLE fejlsøgning, så opret søgefilter

Hvis du bruger MacOS Sierra, skal du bruge dette filter i søgeindgangen:

proces: Skitse 
bibliotek: Skitse 

Gem derefter filteret som skitse

Hvis du bruger et operativsystem tidligere end Sierra, skal du oprette et nyt Sketch System Query Log-filter efter: File> New System Query Log

Kopier disse indstillinger, og tryk på Ok.

Du skal nu se et skissefilter i venstre kolonne.

4. Bogmærk din Sketch Plugins-mappe for hurtig adgang ved at tilføje den til dine foretrukne i Finder-vinduet.

Du får også adgang til denne mappe meget, og at have den skjult i dit bibliotek gør det lidt irriterende at navigere til.

/ Brugere / YOURUSERNAME / Bibliotek / Applikationssupport / com.bohemiancoding.sketch3 / Plugins

Og nu er du klar til at skrive dit første plugin!

Oprettelse af et plugin i 10 nemme trin

Sketch-plugins er dybest set mapper med .sketchplugin-udvidelsen, hvilket gør det lettere at dele med andre brugere.

Til denne demo laver vi et grundlæggende script for at få navnet på en side. Du behøver ikke at vide, hvordan du koder for at få dette til at fungere, men det hjælper, hvis du forstår nogle grundlæggende begreber. I de kommende indlæg vil jeg dokumentere de forskellige manuskripter, jeg har brugt til at hente specifikke data fra Sketch og tilpasse dem. Men til denne demo bruger jeg bare denne.

Sketch-plugins er skrevet i CocoaScript, som er en blanding af Objekt-C / Cocoa og JavaScript. Jeg er temmelig fortrolig med Javascript, så det var ikke så svært at afhente det. Jeg vil ikke sige, at jeg er flydende i det på nogen måde, men jeg ser ud til at være i stand til at hacke mig rundt omkring det med noget grundlæggende kendskab til JavaScript.

Lad os komme i gang med det i tankerne!

  1. Start med at oprette en ny mappe i din Sketch Plugins-mappe, og kald den MyPlugin.sketchplugin

(Når du har tilføjet .sketchplugin-udvidelsen, dobbeltklikker den på, vil du prøve at installere plugin i stedet for at åbne mappen. For at åbne den, skal du højreklikke på pluginet og vælge Vis pakkeindhold)

2. Opret en mappe kaldet Indhold i den mappe

3. Opret indhold i indholdet en mappe kaldet Sketch

Din endelige plugin-mappestruktur skal se sådan ud:

Inde i mappen Sketch er det, hvor du begynder at oprette dit plugin, der som minimum består af 2 filer, et manifest og et script.

Manifestet beskriver plugin og kan tilføje ting som tastaturgenveje eller yderligere scripts, de kaldes altid manifest.json

Skriptet er det sted, hvor den faktiske plugin-kode går og henvises til i manifestet. Navnene kan tilpasses, uanset hvor du vil, så længe de matcher i begge filer.

4. Opret en ny fil, kaldet manifest.json, i din teksteditor og gem den på MyPlugin.sketchplugin> Indhold> Sketch

5. Kopier og indsæt denne kode i manifest.json, og gem.

Du skal nu se MyPlugin i menuen Sketch-plugins. Du kan ændre navnet på plugin eller genvejen, og det vil afspejles i menuen Plugins i Sketch. For genveje er det vigtigt, at du vælger en, der ikke allerede er tildelt en eksisterende applikation eller plugin-genvej, eller den vises ikke.

Lad os nu oprette MyScript.js, som manifestet refererer til og indlæses, når det er valgt. Sørg for, at dette navn matcher din manifestfil!

6. Gå tilbage til din teksteditor og opret en ny fil ved navn MyScript.js, og gem den også i MyPlugin.sketchplugin> Indhold> Sketch-mappe

7. Kopier og indsæt denne kode i MyScript.js

Jeg vil bedre forklare dette script i nogle opfølgningsindlæg sammen med yderligere uddrag. Men for nu forklarer kommentarerne, hvad hver linje gør.

8. Gå til Sketch, og åbn en ny fil, hvis du ikke allerede har en åben

9. Vælg MyPlugin> Hent sidenavne i menuen Plugins

10. Gå til din konsol, og i bunden af ​​loggen skal du se sidenavnet.

10:54:42 PM Få sidenavne (Sketch-plugin): Side 1

Prøv at ændre sidenavnet i Sketch-filen og køre plugin igen. Loggen skal vise det nye navn. Tilføj en anden side og omdøb den, og kør derefter plugin. Konsollen viser nu begge sidenavne.

Og det er det!

Der er naturligvis meget mere, du kan gøre med plugins, men dette er virkelig bare for at komme i gang. Jeg har kun brugt Sketch i et par uger, og jeg er allerede imponeret over dets tilpasning og magt. Forhåbentlig hjælper dette andre mennesker, der har stødt på de samme problemer, som jeg kom i gang, da Plugin-samfundet kun bliver bedre med, at flere mennesker bidrager.

Du kan downloade dette plugineksempel her. Du er velkommen til at kontakte mig for spørgsmål: Twitter, Facebook, e-mail.

Fortsæt til del 2