A Sketch testreszabása beépülő modulokkal

Az egyik dolog, ami miatt a Sketch olyan hatékony tervezőeszköz, hogy szkriptelhető. A Bohemian Coding csapata - a Sketch mögött álló emberek - lehetővé teszik a felhasználók számára, hogy pluginekkel testre szabják az alkalmazást, így azokra a funkciókra összpontosíthatnak, amelyek mindenki számára hasznosak lesznek.

Ha még nem érintette meg a bővítmények legördülő menüjét a menüsorban, remélem, hogy ez a cikk arra ösztönzi Önt, hogy próbálja ki. Ha telepített néhány bővítményt, és elgondolkodott azon, hogy saját maga készítsen egyet, akkor a végére ugorva megtanulhatja, hogyan kezdjen el hackelni.

A beépülő modul egy vagy több CocoaScript-ben írt fájlt tartalmaz, amely a JavaScript olyan változata, amely kölcsönhatásba léphet a Sketch Mac alkalmazással. Ezek a szkriptek hozzáférhetnek és kezelhetik a Sketch fájl összes rétegét, alakzatát, szövegét és rajztábláját. Elérhetik az alkalmazás belső részét és az operációs rendszer kereteit is.



Ez lehetővé teszi, hogy egy sor plugint írjon, az egyszerűektől, amelyek egyszerre 100 pontot képesek mozgatni az alakzatokon, egészen a bonyolultabbakig, amelyek a terveket átadják az olyan együttműködési eszközöknek, mint a Zeplin, a Relay vagy az InVision.

A Sketch testreszabása beépülő modulokkal

A beépülő modulok legördülő menü tartalmazza az összes telepített bővítményt. A parancsfájlt ebben a menüben futtathatja, vagy használhat billentyűparancsot

A Vázlat plugin könyvtár egy központi adattár, amely sok más, a GitHubon tárolt pluginhez kapcsolódik. Amikor valaki meg akarja osztani a beépülő modulját a világgal, beküldhet egy lekérési kérelmet, és Ale Muñoz, a Bohemian Coding fejlesztője ellenőrzi, és felveszi a könyvtárba. A Sketch mögött álló csapat is kurátort készített a nagyszerű bővítmények listája .

Bővítmények telepítése

Az egyes beépülő modulokat „.sketchplugin” kiterjesztésű fájlokba csomagolják. Telepítéséhez egyszerűen kattintson duplán a fájlra, és a fájl a plugins mappába kerül. Ezt a mappát a Pluginok> Bővítmények kezelése ...> [fogaskerék ikon]> Bővítmények mappa megjelenítése menüpontban találhatja meg.

Néhány projekt, amelyet a GitHub-on talál, valójában egy mappában lévő pluginok gyűjteménye lesz - például Vázlatparancsok . Ebben rengeteg plugin van mappákra osztva, az általuk végrehajtott műveletek fajtája alapján. Ezek a különféle beépülő modulok segítenek gyorsan megtenni például egy szövegréteget nagybetűvel vagy egyszerre 100 ponttal növelni az alakréteg szélességét. A beépülő modulok gyűjteményéhez le kell töltenie a tömörített mappát a GitHub-ból, meg kell találnia a beépülő modulok mappáját, és oda kell húznia a kibontott mappát.

A Sketch Beta és a fő Sketch alkalmazás mindegyike saját plugin mappával rendelkezik, ezért mindkét helyre át kell másolnia a beépülő modulokat és gyűjteményeket. Ez egy kis fájdalom, ezért Vázlat eszköztár elkészült. Ez egy ingyenes Mac alkalmazás, amely megkönnyíti az új bővítmények letöltését és telepítését.

A Sketch testreszabása beépülő modulokkal

Ez az ingyenes, közösség által készített alkalmazás megkönnyíti az új bővítmények letöltését és telepítését

A felépítés előtt a felhasználóknak le kellett tölteniük a szkripteket a GitHub-ból, és maguknak kellett őket telepíteniük. Ha a Sketch béta verzióját futtatta a normál kiadás mellett, akkor meg kell győződnie arról, hogy a beépülő modult mindkét helyen telepítette. Most egyszerűen keressen egy plugint a Sketch Toolbox-ból, és nyomja meg az 'Install' gombot.

A Sketch testreszabása beépülő modulokkal

Az új plugin-kezelő a Sketch-ben

A Sketch legújabb verziójának teljes beépülő modul-kezelője van beépítve közvetlenül az alkalmazásba. Ezt megtalálja a Plugins> Plugins kezelése ... oldalon. Ha a beépülő modul-kezelőben a 'Bővítmények letöltése' gombra kattint, akkor a Bohemian Coding plugin könyvtárába kerül.

Egyéb bővítményforrások

Szinte az összes legnépszerűbb bővítmény a plugin könyvtárban található. Azonban nem minden fejlesztő küldi be a munkáját a könyvtárba, miután közzétette a GitHub-on, ezért nem tartalmaz mindent. Ha nem találja, amit keres a könyvtárban, akkor még néhány dolgot kipróbálhat:

  • Google [amit a pluginnak tennie kell] + Sketch plugin. Ebből gyakran kiderül valami hasznos
  • Ping Ale Muñoz a Twitteren ( @bomberstudios ). Nagyon jó, hogy tudatja veled, ha van valami, ami megfelel az igényeidnek, és néha még egy egyedi plugint is készít neked
  • Menj ez a GitHub repo , és javasolja plugin ötletét
  • Látogatás sketchappsources.com/plugins.html , awesome-sket.ch vagy vázlat.föld . Ezek a webhelyek mindegyike hasznos bővítményeket sorol fel, és újakat emel ki

Készítsd el a saját

Ha van valami, amit a Sketch-nek meg kell tennie, és nem talál egy plugint, amely megcsinálná, arra ösztönözném, hogy merüljön el, és próbáljon meg feltörni valamit. Ha talált egy plugint, amely valami hasonlót csinál, mint amire vágyik, sokkal gyorsabb lehet ezt a kódot használni ötlete kiindulópontjaként.

Például, amikor olyan plugint akartam készíteni, amely egyszerre 100 ponttal mozgatta a kiválasztott rétegeket, megnéztem a pluginok kódját, amelyek különböző módon mozgatták a rétegeket, és újra megcéloztam.

A Sketch testreszabása beépülő modulokkal

A Sketchhez mellékelt egyéni plugin-szerkesztő és konzol

A saját plugin írásának megkezdéséhez kattintson a Plugins> Custom Plugin ... elemre, vagy kattintson a 'Ctrl + Shift + K' gombra az egyéni plugin szerkesztő megjelenítéséhez. Itt láthat néhány példát a CocoaScript-ben írt kódra:

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

Ha megnyomja az Escape billentyűt, az egyéni bővítményszerkesztő felfelé és távolabb csúszik. Gyorsan válasszon ki néhány réteget, nyomja meg ismét a „Ctrl + Shift + K” billentyűt, hogy visszahozza, majd nyomja meg ismét a Futtatás gombot.

A kimenetének ilyennek kell kinéznie:

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

Csomagoljuk ki ezt egy kicsit azzal, hogy megnézzük, hogyan működik a beépülő modul. A plugin célja, hogy a fólianevek listáját kiadja a konzolnak. A kód első három sora néhány alapvető szöveget ad ki, és megmutatja, hogy a kontextus változó hogyan tartalmazza a dokumentum nevét. Az if utasítások ellenőrzik a context.selection beállítást - amelyet fentebb a kiválasztottLayers változóként definiáltak -, hogy megnézzék, üres-e. Ha nem, akkor a szkript a kiválasztás összes rétegét végig fogja hajtani, és naplózza a nevüket a konzolon.

Meglepő, hogy mennyit tehet csak néhány kódsorral. Kezdjük azzal, hogy megnézünk egy apró bővítményt, amelyet írtam, hogy eltávolítsam az árnyékokat az általam kiválasztott rétegekről egy billentyűparancs segítségével:

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

Az első sor egy megjegyzés, amelynek célja: meghatározza a plugin aktiválásához szükséges billentyűk kombinációját. A kód az összes jelenleg kiválasztott rétegen körbevezet, megtalálja az egyes rétegek árnyékát, majd eltávolítja azokat.

Illessze be ezt a kódot az egyedi plugin-szerkesztőbe, majd nyomja meg a 'Mentés ...' gombot. Nevezheti a szkriptet, és a rendszer a plugin mappájába menti. Miután odaért, megnyithatja kedvenc szövegszerkesztőjével.

Tudj meg többet

Rengeteg nagyszerű forrás áll rendelkezésre, amelyek segítenek megtanulni, hogyan készíthet saját Sketch beépülő modulokat. Nagyon ajánlom a következő helyeket:

Következtetés

A Sketch nagyszerű eszköz, amely segít ötleteket kijuttatni a fejéből és a képernyőre, de nem képes mindent megtenni. A beépülő modulok segítségével áthidalhatja ezt a szakadékot, és meg tudja alakítani azt az eszközt, amelyet a munka elvégzéséhez használ.

Bár a nagyszerű munka korlátozó tényezője soha nem az, hogy milyen gyorsan tudja megtervezni, a fontos projekteknek mindig vannak időbeli korlátai. A cél itt az, hogy az iterációs folyamat gyorsabb legyen, így több ötlettel kísérletezhet.

Remélem, hogy amikor legközelebb valami olyasmit csinál, amely nem tűnik szükségesnek, akkor keres egy plugint, eljátszadozik vele, és megtalál egy egyszerűbb módszert a feladatod elérésére. Ha nem talál az igényeinek megfelelőt, akkor nagyon jó lenne, ha a saját pluginjának elkészítésével foglalkozna. Ha mégis, kérjük, ossza meg velem a Twitteren @ricburton - ettől lesz a napom!

Szavak : Richard Burton

Richard Burton szabadúszó webdesigner. Ezt a cikket eredetileg a net magazin .

Tetszett ez? Olvassa el ezeket!