Kuinka muokata luonnosta laajennuksilla

Yksi asioista, jotka tekevät Sketchistä niin tehokkaan suunnittelutyökalun, on se, että se on komentosarja. Bohemian Coding -tiimi - Sketchin takana olevat ihmiset - antaa käyttäjille mahdollisuuden mukauttaa sovellusta laajennuksilla, jotta he voivat keskittyä keskeisiin ominaisuuksiin, joista on hyötyä kaikille.

kuinka kallistaa muutosta Photoshopissa

Jos et ole koskettanut valikkorivin avattavaa laajennuksia aiemmin, toivon, että tämä artikkeli kannustaa sinua kokeilemaan. Jos sinulla on muutama laajennus asennettuna ja olet ajatellut tehdä oman, voit siirtyä loppuun ja oppia aloittamaan hakkeroinnin.

Laajennus sisältää yhden tai useampia CocoaScript-tiedostoja, jotka ovat JavaScript-muunnelmia, jotka voivat olla vuorovaikutuksessa Sketch Mac -sovelluksen kanssa. Nämä komentosarjat voivat käyttää ja muokata kaikkia Sketch-tiedostosi tasoja, muotoja, tekstiä ja piirtoalustoja. Ne voivat myös tavoittaa sovelluksen sisäiset ja käyttöjärjestelmän kehykset.



Tämän avulla voit kirjoittaa useita laajennuksia yksinkertaisista, jotka voivat (esimerkiksi) siirtää muotoja 100 pistettä kerrallaan, monimutkaisempiin, jotka siirtävät malleja yhteistyötyökaluihin, kuten Zeplin, Relay tai InVision.

Muokkaa Sketchia laajennuksilla

Avattava laajennukset-valikko sisältää kaikki asennetut laajennukset. Voit suorittaa komentosarjan tässä valikossa tai käyttää pikanäppäintä

Luonnoslaajennushakemisto on keskeinen arkisto, joka linkittää moniin muihin GitHubissa isännöityihin laajennuksiin. Kun joku haluaa jakaa laajennuksensa maailmalle, hän voi lähettää vetopyynnön ja Bohemian Coding -kehittäjä Ale Muñoz tarkistaa sen ja lisää sen hakemistoon. Sketchin takana oleva joukkue on myös kuratoinut luettelo upeista laajennuksista .

Lisäosien asentaminen

Yksittäiset laajennukset niputetaan tiedostoihin, joiden tunniste on .sketchplugin. Asenna ne yksinkertaisesti kaksoisnapsauttamalla tiedostoa ja se siirretään plugins-kansioon. Löydät tämän kansion siirtymällä kohtaan Plugins> Manage plugins ...> [rataskuvake]> Show plugins Folder.

Jotkut GitHubista löytämäsi projektit ovat itse asiassa esimerkiksi laajennuskokoelmia kansiossa Piirrä komennot . Tässä on paljon laajennuksia, jotka on jaettu kansioihin niiden suorittamien toimintojen perusteella. Nämä erilaiset laajennukset auttavat sinua tekemään nopeasti esimerkiksi tekstikerroksen isojen kirjainten käyttöä tai muotokerroksen leveyden lisäämistä 100 pisteellä kerrallaan. Laajennuskokoelmia varten sinun on ladattava pakattu kansio GitHubista, löydettävä laajennuskansio ja vedettävä purettu kansio sinne.

Sketch Betalla ja Sketch-sovelluksella on kullakin oma laajennuskansio, joten sinun on kopioitava laajennukset ja kokoelmat molempiin paikkoihin. Tämä on vähän tuskaa, minkä vuoksi Sketch Toolbox luotiin. Tämä on ilmainen Mac-sovellus, jonka avulla uusien laajennusten lataaminen ja asentaminen on helppoa.

Muokkaa Sketchia laajennuksilla

Tämä ilmainen, yhteisössä tehty sovellus tekee uusien laajennusten lataamisesta ja asentamisesta helppoa

Ennen kuin se rakennettiin, käyttäjien oli ladattava komentosarjat GitHubista ja asennettava ne itse. Jos käytit Sketchin beetaversiota normaalin julkaisun rinnalla, sinun on varmistettava, että laajennus on asennettu molempiin paikkoihin. Nyt voit yksinkertaisesti etsiä laajennusta Sketch Toolboxista ja painaa 'Asenna'.

Muokkaa Sketchia laajennuksilla

Sketchin uusi laajennusten hallinta

Sketchin uusimmalla versiolla on täysi plugin manager, joka on rakennettu suoraan sovellukseen. Löydät tämän kohdasta Plugins> Manage Plugins…. Jos napsautat laajennusten hallinnassa kohtaa Hae laajennuksia ..., sinut viedään Bohemian Codingin laajennushakemistoon.

Muut laajennuslähteet

Lähes kaikki suosituimmat laajennukset on lueteltu laajennushakemistossa. Kaikki kehittäjät eivät kuitenkaan lähetä töitään hakemistoon julkaisemisen jälkeen GitHubissa, joten se ei sisällä kaikkea. Jos et löydä etsimääsi hakemistosta, voit kokeilla muutama muu asia:

  • Google [mitä haluat laajennuksen tekevän] + Sketch-laajennus. Tämä tuo usein jotain hyödyllistä
  • Ping Ale Muñoz Twitterissä ( @bomberstudios Hän on todella hieno kertoa sinulle, jos jotain sopii tarpeisiisi, ja joskus hän jopa tekee sinulle mukautetun laajennuksen
  • Mene tämä GitHub-repo ja ehdottaa laajennusideoitasi
  • Vierailla sketchappsources.com/plugins.html , mahtava-sket.ch tai luonnos.maa . Nämä sivustot sisältävät hyödyllisiä laajennuksia ja korostavat uusia

Luo oma

Jos haluat jotain Sketchin tekemän etkä löydä laajennusta, joka tekisi sen, suosittelen sinua sukeltamaan ja yrittämään hakata jotain yhdessä. Jos olet löytänyt laajennuksen, joka tekee jotain samanlaista kuin mitä etsit, voi olla paljon nopeampi käyttää koodia idean lähtökohtana.

Esimerkiksi kun halusin tehdä laajennuksen, joka siirsi valikoiman kerroksia 100 pistettä kerrallaan, katsoin laajennusten koodia, jotka siirtivät kerroksia eri tavoin, ja suunnittelin sen uudelleen.

Muokkaa Sketchia laajennuksilla

Sketchin mukana toimitettu mukautettu laajennusten muokkausohjelma ja konsoli

Aloita oman laajennuksen kirjoittaminen napsauttamalla Laajennukset> Mukautettu laajennus ... tai napsauttamalla 'Ctrl + Vaihto + K' tuodaksesi mukautetun laajennusten muokkaimen esiin. Tässä näet esimerkkikoodin, joka on kirjoitettu CocoaScript:

log('This is an example Sketch script.'); var documentName = context.document.displayName(); log('The current document is named: ' + documentName); var selectedLayers = context.selection; var selectedCount = selectedLayers.count(); if (selectedCount == 0) { log('No layers are selected.'); } else { log('Selected layers:'); for (var i = 0; i < selectedCount; i++) { var layer = selectedLayers[i]; log((i+1) + '. ' + layer.name()); } };

Jos painat Escape-painiketta, mukautettu laajennusten muokkausohjelma liukuu ylöspäin ja poispäin. Valitse nopeasti muutama kerros, paina Ctrl + Vaihto + K uudelleen saadaksesi sen takaisin ja paina Suorita uudelleen.

Tuloksesi pitäisi näyttää tältä:

This is an example Sketch script. The current document is named: Untitled Selected layers: 1. Rectangle 1 2. Rectangle 2 3. Rectangle 3 4. Rectangle 4 Script executed in 0.007364s

Pura tämä pakkaus hieman katsomalla, kuinka laajennus toimii. Tämän laajennuksen tarkoituksena on tuottaa luettelo tasojen nimistä konsolille. Koodin kolme ensimmäistä riviä tuottavat perustekstiä ja näyttävät, miten kontekstimuuttuja sisältää asiakirjan nimen. If-lauseet tarkastavat context.selection-määritelmän, joka on määritelty edellä valituksi Layers-muuttujaksi, nähdäksesi, onko se tyhjä. Jos näin ei ole, komentosarja toistaa kaikki valinnan tasot ja kirjaa heidän nimensä konsoliin.

On yllättävää, kuinka paljon voit tehdä vain muutamalla koodirivillä. Aloitetaan katsomalla pieni lisäosa, jonka kirjoitin poistaa varjot kaikista valitsemistani tasoista käyttämällä pikanäppäintä:

//Disable Shadow (control option s) var selection = context.selection for (var i = 0; i < [selection count]; i++) { var layer = [[selection objectAtIndex:i] style] [[layer shadow] setIsEnabled:0] }

Ensimmäinen rivi on kommentti, jolla on tarkoitus: se määrittelee näppäinyhdistelmän, joka aktivoi laajennuksen. Koodi silmukkaa kaikkien tällä hetkellä valittujen tasojen yli, etsii kunkin tason varjot ja poistaa ne sitten.

Yritä liittää tämä koodi mukautettuun laajennusten muokkausohjelmaan ja lyödä sitten Tallenna…. Voit nimetä komentosarjan ja se tallennetaan laajennuskansioon. Siellä voit avata sen suosikkitekstieditorilla.

mitä polttotyökalu tekee photoshopissa

Lisätietoja

Siellä on paljon upeita resursseja, joiden avulla voit oppia tekemään omia Sketch-laajennuksia. Suosittelen lämpimästi seuraavia paikkoja:

Johtopäätös

Luonnos on loistava työkalu, jonka avulla saat ideoita päästäsi ja näyttöön, mutta se ei voi tehdä kaikkea. Laajennukset ovat tapa korjata tämä aukko ja antaa sinun muokata työkalua, jota käytät työn tekemiseen.

Vaikka suurta työtä rajoittava tekijä ei ole koskaan kuinka nopeasti voit suunnitella, tärkeille hankkeille on aina aikarajoituksia. Tavoitteena on tehdä iterointiprosessistasi nopeampi, jotta voit kokeilla uusia ideoita.

Toivon, että kun seuraavan kerran huomaat tekevän jotain toistuvasti, mikä ei tunnu tarpeelliselta, etsit laajennusta ja pelaat sen kanssa ja löydät yksinkertaisemman tavan saavuttaa tehtäväsi. Jos et löydä tarpeisiisi sopivaa, on hienoa, jos sinulla on oma rakentaa oma laajennuksesi. Jos teet niin, jaa se minulle Twitterissä @satama - se tekee päivästäni!

Sanat : Richard Burton

Richard Burton on freelance-verkkosuunnittelija. Tämä artikkeli julkaistiin alun perin numerossa 273 nettilehti .

Piditkö tästä? Lue nämä!