Suunnittelutyökalut kehittyvät jatkuvasti, ja uusia tulee markkinoille päivittäin ( InVision Studio , esimerkiksi). Tästä huolimatta Sketchin kaltaiset modernit suunnittelutyökalut luodaan vähäisiksi, jolloin työkalu on asetettu poistamaan kaikki olennaiset ominaisuudet. On tyypillistä luoda lisätoimintoja vain tarvittaessa, ja tässä siirrymme Sketch-laajennusten jännittävään maailmaan.

Sketch-laajennusten kehittäminen voi auttaa suunnittelijat omaksua Sketchin todellisen toiminnan tekninen näkökulma ja antaa heille kyky automatisoida toistuvia tehtäviä. Luonnoslaajennukset tehdään koodilla ja Piirrä JavaScript-sovellusliittymä , mutta koska suunnittelijoiden ei tarvitse olla asiantuntijakehittäjiä tämän sovellusliittymän käyttämiseksi, tämä opetusohjelma osoittaa, kuinka laajennus koodataan suunnitteluprosessin yksinkertaistamiseksi ja Sketchin työnkulun parantamiseksi.

Yksinkertaiset mutta erittäin hyödylliset luonnoslaajennukset

Hyvin usein, luonnossuunnittelijat sinulla on oltava asennettuna vähintään kolme tai neljä Sketch-laajennusta. Alla olevat laajennukset ovat luonteeltaan jonkin verran perusasioita, mutta niitä käytetään yleisesti, koska ne säästävät paljon aikaa.

• Nimeä se uudelleen (nimeä uudelleen useita kerroksia kerralla)
• Lajittele minut (auttaa järjestämään kerrokset uudelleen loogisella tavalla)
• UnsplashIt (noutaa kuvat Unsplashista)
• Sisällöntuottaja (tuottaa väärennettyjä nimiä ja muita 'todellisia' tietoja)

Jos haluat tietää, mitä Sketch-laajennuksilla voidaan saavuttaa, tutustu lopulliseen luetteloon 50 Sketch-laajennusta .

laajennus Nimeä uudelleen on suosittu Sketch-laajennus, joka auttaa suunnittelijoita nimeämään useita kerroksia kerralla.

JavaScriptin perusteet alle 2 minuutissa

Ennen kuin aloitat koodaamisen, sinun on opittava muutama asia JavaScript-syntaksista (ts. Koodin kirjoittamisen muodollisuudesta). Paitsi että tämä auttaa sinua kirjoittamaan Sketch-laajennuksen koodin, se auttaa sinua ymmärtämään paremmin, miten ja miksi koodi toimii.

Kommentit

Aloitetaan koodikommenteista.

Koodikommentit ovat kuin piilotettuja muistiinpanoja - ne eivät ole käyttäjälähtöisiä, eivätkä siksi näy tuloksena olevassa Sketch-laajennuksessa. Kehittäjät käyttävät näitä koodikommentteja usein selittääkseen kirjoitettua koodia, joten jos toinen kehittäjä lukee koodin tai palaa koodiin myöhemmin, he ymmärtävät kirjoitetun ja miten se toimii.

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

Muuttujat

Muuttujat ovat kuin pienet säilöt, joita käytetään arvojen tallentamiseen; esimerkiksi:

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

Tämän arvon noutamiseksi sinun on käytettävä muuttujaa; esimerkiksi:

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

Komentosarjaikkuna Esillä: konsoli, jota käytetään tuloksen testaamiseen.

Esineet

Objektit voivat tallentaa useita muuttujia, kuten tämä:

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

Huomaa, että iän arvo ei ole lainausmerkeissä. Tämä johtuu siitä, että lainausmerkit määrittelevät muuttujan merkkijonoksi, mikä tarkoittaa, että odotetun tuotoksen on oltava kirjaimellinen. Emme halua sitä; haluamme, että muuttuja määritetään kokonaisluvuksi, jotta voimme suorittaa sille matemaattisia operaatioita. Lainausmerkkien sijoittaminen arvon ympärille määrittää epätoivottavasti arvon merkkijonoksi.

Voimme käyttää objektin muuttujia seuraavasti:

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

Taulukot

Taulukot ovat yksinkertaisempaa tyyppiä objekteja:

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'

ominaisuudet

Ominaisuudet ovat toimintakelpoisia - ne tehdä jotain. Seuraavassa esimerkissä funktio laskee a summan ja b. Tässä esimerkissä a se on 2 ja b se on 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

Ehdolliset lausunnot

Ehdolliset lauseet suorittavat koodin suluissaan vain, jos määritetty ehto täyttyy. Seuraavassa esimerkissä koodi suoritetaan välittömästi, koska firstName itse asiassa se on yhtä suuri kuin 'Manuele'; siksi koodi else if ja else ei toimi.

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 }

Yritetään kirjoittaa joitain peruskoodeja luonnokseen.

Kirjoita ensimmäinen koodirivi Sketchiin

Siirry luonnoksessa kohtaan Plugins → Run Script. Tässä komentosarjaikkunassa voit kirjoittaa koodin, jotta asiat tapahtuvat Sketchissä (kuten kerrosten uudelleennimeäminen) ja pakata tämä koodi Sketch-laajennukseen .sketchplugin tiedostotyyppi.

Alla: Tämä näyttää komentosarjaikkunan, kun avaat sen ensimmäisen kerran. Saatat nähdä koodin, jota et tunne, mutta opit hieman enemmän JavaScriptistä matkan varrella. Tässä ikkunassa jo oleva oletuskoodi kertoo luonnosdokumentin nimen, valitut tasot ja paljon muuta.

Poista toistaiseksi kaikki ikkunan koodi ja korvaa se seuraavalla:

log('Hello Sketch');

Se mitä teet täällä, kutsuu log ja välitä merkkijono Hello Sketch argumenttina. Tämä loki on käytettävissä vain kulissien takana, mikä tekee siitä hyödyllisen koodin virheenkorjauksessa, kun asiat eivät toimi odotetulla tavalla. Jos napsautat Suorita-painiketta, argumentti Hello Sketch se kirjataan komentosarjan alla olevaan konsoliin.

Kaivetaan vähän syvemmälle.

Nimeä luonnoskerros uudelleen luomalla laajennus

Nyt voit käyttää JavaScriptiä ja Sketch-komentosarjojasi luomalla komentosarjan, joka nimeää uudelleen useita kerroksia kerralla. Rodrigo Soares loi laajennus Nimeä uudelleen , joka saavuttaa saman ja säästää suunnittelijat pitkään - luodaan yksinkertaistettu versio. Muista luoda joitain luonnoskerroksia, jotta voit testata komentosarjaasi.

Koodin on aloitettava toistuvalla rivillä. Sinun on käytettävä Sketchin sovellusohjelmointirajapintaa (API) - tämä on hieno termi erityiselle objektille, jota tarvitset, jos haluat olla vuorovaikutuksessa Sketchin kanssa merkityksellisellä tavalla. Nimeä tämä erityinen API-objekti sketch.

Nimeä vain valitut tasot uudelleen. Kuinka saat selville valitut tasot? Sketch JavaScript -sovellusliittymä tarjoaa kätevän tavan saada nämä tiedot yhdellä koodirivillä.

Näin voit tehdä kaiken tämän JavaScript-koodilla:

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

Kaikki tiedot valituista tasoista sisältyvät muuttujaan selection Nyt sinun tarvitsee vain 'iteroida' (suorittaa useita koodeja) kerrosten yli niiden uudelleennimeämiseksi.

Nimeä jokainen taso uudelleennimeämisen vuoksi 'Nimeä uudelleen tasoksi'.

Lisää tämä koodi komentosarjan loppuun:

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

Kun painat 'Suorita', näet, että jokainen taso on nimetty uudelleen 'Uudeksi nimeksi tasoksi', mutta käyttäjältä kysytään, minkä uuden kerroksen nimen pitäisi olla. Sovitetaan skripti:

// 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 })

Esiin tulee ponnahdusikkuna, jossa käyttäjää pyydetään määrittämään tasoille uusi nimi.

Jos et ole varma, kuinka pääset tiettyihin konteksteihin, kuten nykyisin valittuihin tasoihin, tai kuinka paljastaa käyttäjän syöttöruutu (kuten edellisissä tilanteissa), voit lukea virallisen asiakirjan Luonnos kehittäjän dokumentaatio , joka näyttää mitä koodia tarvitaan.

Kun olet valmis jatkamaan, paina 'Tallenna ...' -painiketta komentosarjan ikkunan vasemmassa alakulmassa ja nimeä komentosarja. Löydät tämän Sketch-laajennuksen nyt Sketch-valikosta 'Plugins', kuten kaikki muut Sketch-laajennukset.

Nimeä kerrokset uudelleen luonnoksessa - koko koodi

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 })

Luo 'Valitse kaikki ryhmän tasot' luonnoslaajennus

Nyt aiomme luoda jotain hieman monimutkaisempaa. Seuraava Sketch-laajennus valitsee automaattisesti kaikki tason tasot ryhmässä, jonka voit mukauttaa sisällyttämään siihen vain tekstikerrokset tai vain muotoiset kerrokset, tai se voi jopa tunnistaa tasotyypin automaattisesti ja valita vain kyseisen tyyppisiä kerroksia.

Kuten aiemmin, aloitetaan määrittelemällä asiayhteys. Sitten voit toistaa / toistaa kyseisessä kontekstissa olevat kerrokset ja valita ne automaattisesti.

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 } });

Tällä koodilla valitaan kaikki kerrokset missä tahansa tällä hetkellä valitussa ryhmässä (kunhan jotkut on valittu). Samaan aikaan ryhmät itse ovat alkaen valittu.

Voit tarkentaa tätä komentosarjaa lisäämällä ehdollisen käskyn, joka tarkistaa, onko taso tietyntyyppinen. Oletetaan, että haluat valita kaikki tasot teksti ryhmässä - tee se jokaisessa iteraatiossa tarkistamalla jokaisen kerroksen kerrostyyppi, näin:

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

Valitse kaikki ryhmän tekstikerrokset: koko koodi

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 } });

Voit parantaa tätä komentosarjaa useilla tavoilla käyttämällä dokumentointi viitteenä:

• Salli käyttäjän valita vain muodot
• Salli käyttäjän valita vain kuvat
• Jos yhtään ryhmää ei ole valittu, valitse pääryhmä automaattisesti, jolloin käyttäjä voi valita saman tyyppisiä kerroksia
• Jos ryhmässä on sisäkkäisiä ryhmiä, käsittele samalla tavalla

johtopäätös

Jos olet kiinnostunut kehittämään Sketch-laajennuksia, joita muut suunnittelijat voivat käyttää, katsokaa SKPM (Sketch-laajennusten hallinta). SKPM antaa suunnittelijoille mahdollisuuden pakata laajennuksensa tiedostomuotoon .sketchplugin , mikä tekee laajennuksesta asennettavan. Tämän prosessin aikana laajennuskehittäjät voivat myös määrittää pikanäppäimet laajennustoiminnoille.

Suunnittelija, joka osaa koodata Sketch-laajennuksia, on a suunnittelija kuka tietää kuinka parantaa työnkulkua ja työskennellä tarvittaessa nopeammin, mikä säästää enemmän aikaa korkealaatuisen lopputuotteen toimittamiseen. Paitsi, että Sketchin toiminta kulissien takana on upea tilaisuus sukeltaa JavaScript-maailmaan.