Orodja za oblikovanje se nenehno izboljšujejo in vsak dan jih vstopa na trg več ( InVision Studio na primer). Kot rečeno, sodobna oblikovalska orodja, kot je Sketch, so ustvarjena tako, da so minimalna, kjer je orodje nastavljeno tako, da odstrani vse nebistvene funkcije. Značilno je, da ustvarjate dodatne funkcije le, kadar je to potrebno, in tu vstopimo v razburljiv svet razvoja vtičnikov Sketch.

Razvoj vtičnikov za Sketch vam lahko pomaga oblikovalci sprejeti tehnični vidik, kako Sketch dejansko deluje, in jim omogočiti avtomatizacijo ponavljajočih se nalog. Vtičniki za skice so narejeni s kodo in Skiciraj API za JavaScript Ker pa za uporabo tega API-ja oblikovalcem ni treba biti strokovni razvijalci, ta vadnica prikazuje, kako kodirati vtičnik, da poenostavi postopek načrtovanja in izboljša potek dela v programu Sketch.

Preprosti, a zelo uporabni vtičniki za skice

Zelo pogosto, oblikovalci skic imeti nameščene vsaj tri ali štiri vtičnike za Sketch. Spodnji vtičniki so nekoliko osnovne narave, vendar se pogosto uporabljajo, ker prihranijo veliko časa.

• Preimenuj (preimenuj več plasti hkrati)
• Razvrsti me (pomaga pri logičnem preurejanju slojev)
• UnsplashIt (pridobi slike iz programa Unsplash)
• Generator vsebine (ustvari lažna imena in druge 'resnične' podatke)

Če vas zanima, kaj lahko dosežete z vtičniki Sketch, si oglejte naš zadnji seznam 50 vtičnikov za skice .

The vtičnik RenameIt je priljubljen vtičnik Sketch, ki oblikovalcem pomaga preimenovati več plasti hkrati.

Osnove JavaScript-a v manj kot 2 minutah

Preden začnete s kodiranjem, se boste morali naučiti nekaj stvari o sintaksi JavaScript (to je formalnost zapisa kode). Ne samo, da vam bo to pomagalo napisati kodo za vtičnik Sketch, temveč vam bo pomagalo bolje razumeti, kako in zakaj koda deluje.

Komentarji

Začnimo s komentarji kode.

Komentarji kode so kot skrite opombe - niso uporabniško naravnani in se zato ne bodo pojavili v nastalem vtičniku Sketch. Razvijalci te komentarje kode pogosto uporabljajo za razlago kode, ki je bila napisana, tako da bo, če jo bo razvijal drug razvijalec ali če se bo koda vrnila pozneje, razumel, kaj je bilo napisano in kako deluje.

// this is a single-line comment /* This is a multiline comment */

Spremenljivke

Spremenljivke so kot majhni vsebniki, ki se uporabljajo za shranjevanje vrednosti; na primer:

var firstName = 'Manuele Capacci'; // the variable firstName now equals 'Manuele Capacci'

Če želite pridobiti to vrednost, morate uporabiti spremenljivko; na primer:

log(firstName); // esto grabará 'Manuele Capacci' en la consola

Okno za skriptiranje Predstavljeno: konzola, ki se uporablja za preizkus izhoda.

Predmeti

Predmeti lahko shranijo več spremenljivk, kot je ta:

var user = { firstName: 'Manuele', lastName: 'Capacci', age: 28, role: 'Product Designer' }

Upoštevajte, da vrednost 'starost' ni v narekovajih. Razlog za to je, da bodo narekovaji spremenljivko definirali kot niz, kar pomeni, da mora biti pričakovani izhod dobeseden. Tega si ne želimo; želimo, da je spremenljivka definirana kot celo število, da lahko nad njo izvajamo matematične operacije. Če postavite narekovaje okoli vrednosti, bo vrednost nezaželeno definirana kot niz.

Lahko uporabimo spremenljivke predmeta, kot je ta:

// using the object's variables user.firstName; user.lastName; user.age; user.role;

Polja

Polja so preprostejša vrsta predmeta:

var users = ['Manuele', 'Daniel', 'Miklos'] // 'users' is an array that contains a list of names user[0]; // this equals 'Manuele' user[1]; // this equals 'Daniel' user[2]; // this equals 'Miklos'

Lastnosti

Funkcije je mogoče uporabiti - oni naredite nekaj V naslednjem primeru funkcija izračuna vsoto a in b. V tem primeru je a je 2. in b je 3. .

// a function declaration function sum(a, b) { return a + b; } // calling the function sum(2, 3); // this equals 5 // recapitulando lo que hemos aprendido hasta ahora var total = sum(2, 3); // la variable 'total' será igual a 5 log(sum(2, 3)); // esto dará como resultado 5 en la consola log(total); // esto también dará como resultado 5 en la consola

Pogojni stavki

Pogojni stavki izvršijo kodo v svojih oklepajih le, če je izpolnjen določen pogoj. V naslednjem primeru se koda zažene takoj, ker je vrednost firstName pravzaprav je enako 'Manuele'; zato je koda else if in else ne teče.

var firstName = 'Manuele'; if(firstName == 'Manuele') { // hacer algo por Manuele } más si(firstName == 'Daniel') { // haz algo por Daniel } más { // hacer algo por alguien más }

Poskusimo v Sketch napisati nekaj osnovne kode.

V Sketch napišite svojo prvo vrstico kode

V Sketch pojdite na 'Plugins → Run Script'. V tem oknu za skriptiranje lahko napišete kodo, da se stvari v Sketchu zgodijo (na primer preimenovanje slojev), nato pa to kodo zapakirate v vtičnik Sketch z .sketchplugin vrsta datoteke.

Spodaj: Tako izgleda skriptno okno, ko ga prvič odprete. Morda boste videli kakšno kodo, ki je ne poznate, vendar boste ob tem izvedeli nekaj več o JavaScriptu. Privzeta koda, ki že obstaja v tem oknu, vam pove ime dokumenta skice, katere sloji so trenutno izbrani in še več.

Za zdaj v tem oknu izbrišite vso kodo in jo zamenjajte z:

log('Hello Sketch');

Kar tukaj počnete, kličete log in posredujte niz Hello Sketch kot argument. Ta dnevnik je dostopen samo zakulisno, zaradi česar je uporaben za odpravljanje napak kode, kadar stvari ne delujejo po pričakovanjih. Če kliknete gumb 'Zaženi', se argument Hello Sketch zapisal se bo v konzolo pod skriptnim oknom.

Poglobimo se malo globlje.

Ustvarite vtičnik za preimenovanje sloja skice

Zdaj lahko s svojim znanjem o skriptiranju JavaScript in Sketch ustvarite skript, ki hkrati preimenuje več plasti. Rodrigo Soares je ustvaril vtičnik RenameIt , ki doseže enako in prihrani oblikovalci dolgo časa - ustvarimo poenostavljeno različico. Ustvarite nekaj plasti skic, da boste lahko preizkusili svoj skript.

Koda se mora začeti s ponavljajočo se vrstico. Uporabiti morate Sketch-ov aplikacijski programski vmesnik (API) - to je modni izraz za poseben objekt, ki ga potrebujete, če želite smiselno sodelovati s Sketch-om. Poimenujte ta posebni objekt API sketch.

Očitno je, da samo preimenujte trenutno izbrane sloje. Kako ugotovite, katere plasti so trenutno izbrane? API Sketch JavaScript ponuja priročen način pridobivanja teh informacij z eno vrstico kode.

Tukaj je opisano, kako vse to doseči s kodo JavaScript:

// asignar el objeto API a una variable var sketch = context.api(); // asignar capas actualmente seleccionadas a una variable var selection = sketch.selectedDocument.selectedLayers;

Vse informacije o trenutno izbranih slojih so vsebovane v spremenljivki selection. Zdaj morate le 'iterirati' (večkrat zagnati neko kodo) nad sloji, da jih preimenujete.

Zaradi preskušanja preimenujte vsako plast v 'Preimenovana plast'.

To kodo dodajte na konec skripta:

selection.iterate(function(layer) { // for every selected layer layer.name = 'Renamed Layer'; // rename to 'Renamed Layer' })

Ko pritisnete »Zaženi«, boste videli, da je bila vsaka plast preimenovana v »Preimenovana plast«, vendar se uporabnika vpraša, kako naj bo ime nove plasti. Prilagodimo skript:

// pregunta al usuario cuál debe ser el nuevo nombre de la capa var newLayerName = context.document.askForUserInput_initialValue('What should these layers be renamed to?', ''); selection.iterate(function(layer) { // for every selected layer layer.name = newLayerName; // rename to the value of newLayerName })

Pojavilo se bo pojavno okno, v katerem bo uporabnik zahteval, da določi novo ime za sloje.

Če niste prepričani, kako dostopati do določenih kontekstov, na primer trenutno izbranih slojev, ali kako razkriti uporabniško vnosno polje (kot v prejšnjih scenarijih), lahko preberete uradni dokument Skica dokumentacije za razvijalce , ki vam bo pokazal, katera koda je potrebna.

Ko ste pripravljeni na nadaljevanje, pritisnite gumb 'Shrani ...' v spodnjem levem kotu okna skripta in poimenujte skript. Zdaj boste našli ta vtičnik Sketch dostopen v meniju Sketch pod 'Plugins', tako kot vsi drugi vtičniki Sketch.

Preimenovanje slojev v skici - celotna koda

var sketch = context.api(); var selection = sketch.selectedDocument.selectedLayers; // pregunta al usuario cuál debe ser el nuevo nombre de la capa var newLayerName = context.document.askForUserInput_initialValue('What should these layers be renamed to?', ''); selection.iterate(function(layer) { // para cada capa seleccionada layer.name = newLayerName; // renombrar al valor de newLayerName })

Ustvarjanje vtičnika za skico 'Izberi vse sloje v skupini'

Zdaj bomo ustvarili nekaj bolj zapletenega. Naslednji vtičnik Sketch bo samodejno izbral vse sloje v skupini, ki jih lahko nato prilagodite tako, da bodo vključevali samo sloje besedila ali samo sloje oblike ali pa bo lahko celo samodejno zaznal vrsto sloja in izbral samo plasti te vrste.

Kot prej začnimo z opredelitvijo konteksta. Nato lahko ponovite / ponovite sloje znotraj tega konteksta in jih samodejno izberete.

var sketch = context.api(); var selection = sketch.selectedDocument.selectedLayers; selection.iterate(function(layer) { if(layer.isGroup) { // solo ejecuta el siguiente código si la selección es un grupo layer.iterate(function(innerLayer){ // para cada capa en el grupo innerLayer.addToSelection(); // agregarlo a la selección }); layer.deselect(); // deseleccionar el grupo } });

S to kodo bodo izbrane vse plasti znotraj katere koli trenutno izbrane skupine (če so izbrane nekatere). Medtem pa bodo same skupine iz izbrano.

Če želite še izboljšati ta skript, lahko vključite pogojni stavek, ki preveri, ali je sloj določene vrste. Recimo, da želite posebej izbrati vse plasti besedilo v skupini - za to pri vsaki ponovitvi preverite vrsto sloja vsakega sloja, takole:

if(innerLayer.isText) { innerLayer.addToSelection(); }

Izberite vse sloje besedila v skupini: celotno kodo

var sketch = context.api(); var selection = sketch.selectedDocument.selectedLayers; selection.iterate(function(layer) { if(layer.isGroup) { // solo si la selección es un grupo layer.iterate(function(innerLayer){ // para cada capa en el grupo if(innerLayer.isText) { // solo si la capa es una capa de texto innerLayer.addToSelection(); // agregar a la selección } }); layer.deselect(); // deseleccionar el grupo } });

Ta skript lahko izboljšate na več načinov z uporabo dokumentacijo kot referenca:

• Dovoli uporabniku, da izbere samo oblike
• Dovoli uporabniku, da izbere samo slike
• Če ni izbrana nobena skupina, samodejno izberite glavno skupino, ki uporabniku omogoča, da izbere sloje podobnega tipa
• Če ima skupina v sebi ugnezdene skupine, obdelajte na enak način

sklep

Če vas zanima razvoj vtičnikov za Sketch, ki jih lahko uporabljajo drugi oblikovalci, si oglejte SKPM (Upravitelj vtičnikov za skice). SKPM omogoča oblikovalcem, da svoje vtičnike zapakirajo v datotečno obliko .sketchplugin , zaradi česar je vtičnik mogoče namestiti. Med tem postopkom lahko razvijalci vtičnikov določijo tudi bližnjice na tipkovnici za dejanja vtičnikov.

Oblikovalec, ki zna kodirati vtičnike za Sketch, je oblikovalec ki ve, kako izboljšati potek dela in po potrebi delati hitreje, s čimer sprosti več časa za dobavo visokokakovostnega končnega izdelka. Ne samo to, ampak učenje, kako Sketch deluje v zakulisju, je odlična priložnost, da se potopite v svet JavaScript.