Sketch-laajennuksen luominen joka yhdistää kirjastosi symbolit mihin tahansa ulkoiseen dokumentaatioon

Melkein läpikäyntiopas Sketch-laajennuksen luomisesta skpm: n avulla

(Sergey Nikishkin) (28. toukokuuta 2020)

Otan esimerkkinä Google-materiaalin Luonnoksen suunnittelupaketti ja yhdistä symbolit niiden kuvaukseen material.io/components . Tietenkään en selitä kutakin koodiriviä, mutta korostan joitain osia, jotka ovat tärkeitä minun näkökulmastani. Mielenkiintoista? Aloitetaan sitten.

Jos et ole perehtynyt Sketch-laajennusten kehittämiseen, mutta haluat oppia lisää, voin neuvoa tätä Marc Marianon 7-artikkelisarjaa aloittelijoille tarkoitettuna kävelyoppaana:

( Aloittelijan opas luonnoslaajennusten kirjoittamiseen )

Ympäristö

Laajennuksen rakennustyökaluna käytän skpm . Tämä on apuohjelma, jonka avulla voit helposti luoda, korjata ja julkaista Sketch-laajennuksia. Ennen kuin aloitamme, sinun pitäisi olla asennettuna seuraavat asiat Macillesi:

skpm ja myös laajennuksen perustan luominen on hyvin yksinkertaista ja vaatii yhteensä kaksi komentoa. Luo vain uusi kansio, avaa Terminal.app tässä kansiossa ja syötä yksitellen nämä komennot:

  • npm install -g skpm
  • skpm create your-plugin-name

Ensimmäinen komento asentaa itse npm-paketin ja kaikki tarvittavat riippuvuudet. Toinen luo vielä yhden kansion, joka sisältää joukon resursseja uudelle laajennuksellesi. Tärkeimmät kohteemme siellä ovat:

  • my-plugin.sketchplugin – itse asennettava laajennus
  • src – laajennuksen lähdekoodikansio
Kuinka tulos näyttää VS-koodista
Kuinka tulos näyttää VS-koodista

Saanen kertoa hieman manifest.json src -kansiosta. Tämä on JSON-tiedosto, joka sisältää laajennusta, sen komentoja ja resursseja koskevat metatiedot. Siinä luetellaan laajennuksen määrittelemien komentojen nimet ja kerrotaan Sketchille, mitä vastaavia valikkokohteita kutsutaan ja mihin valikoihin ne laitetaan.

Nimeä myös ”rohkeasti” my-command.js kohtaan index.js ja poistaa kaikki koodit sisällä. Hieman myöhemmin kirjoitamme jotain paljon mielenkiintoisempaa kuin koodi, joka näyttää ” Se on elossa! 🙌 ”-viesti.

Malli

Ennen kuin aloitamme koodin kirjoittamisen, ymmärretään, miten laajennus toimii tehdä työtä. Ensinnäkin tarvitsemme kolme tiedostoa:

  • config.json – sisältää linkkejä, jotka yhdistetään symboleihin
  • index.js – sisältää kaikki päätoiminnot
  • manifest.json – sisältää laajennuksen metatiedot
Toimintamalli
Toimintamalli

Joten. Kun valitsemme taulusta symbolin ja suoritamme laajennuksen, se kutsuu funktion index.js, joka menee osoitteeseen config.json, tarkistaa valitun symbolin linkki palauttaa vastauksen muotoon index.js ja jos kaikki tarkistukset on suoritettu, avaa resurssin dokumentaatiolla. Kuten näette, logiikka on hyvin yksinkertainen.

Toiminnot

Ensimmäinen asia, joka meidän on tehtävä, on tuoda config.json tiedostoon index.js käyttämällä alla olevaa koodia:

index.js: n ensimmäinen rivi

Siirrytään nyt funktioihin.

openLink ()

Tässä toiminnossa käytämme muutamia luokkia ja menetelmiä Swift-sovellusliittymästä, joka auttaa meitä avaamaan ulkoiset linkit suoraan Sketchistä.

  • NSURL

  • URLWithString

  • NSWorkspace

  • SharedWorkspace

openLink () -funktio
  • const {link} = config.names[name] – saa URL-merkkijonon konfiguraatiosta.json
  • const url = NSURL.URLWithString(link) – muuntaa merkkijonon URL-osoitteen kanssa objektiksi URL-osoitteen kanssa
  • NSWorkspace.sharedWorkspace().openURL(url) – avaa objekti, jonka URL-osoite on oletusselaimessasi

jäsennä ()

Tässä toiminnossa sovitamme valittuna olevan piirrostaulun objektin kohteen kanssa config.json. Jos ne löytyvät, funktio palauttaa avaimen URL-linkin kanssa.

parse () -funktio

Mielestäni tässä mielenkiintoisin osa on regex 13. rivillä:

new RegExp(".*(" + set.join("|") + ")(\/|$), "i")

Käyttämällä Tämän regexin avulla voimme löytää ja sovittaa objekteja eri pesintätasoilla. Meidän tapauksessamme objekti on symbolin nimi tai sen ryhmän nimi, johon symboli sijoitetaan. Tarkastelkaamme Chips-komponentin ja sen muunnosten sisäkkäisrakennetta luonnosmateriaalipaketissa:

Rakenne Pelimerkkikomponentin sisäkkäistäminen luonnoksen materiaalisuunnittelupaketissa
Pelimerkkikomponentin pesimisen rakenne luonnosmateriaalipaketissa luonnos

Ja miten tämä taso-paneelin sisäkkäin voidaan sovittaa config.json:

Kuinka vastaavuus toimii
Kuinka haku toimii

Regexissämme ei ole väliä, millä tasolla haluat yhdistää symbolin dokumentaation kanssa. Pääsääntö on, että nimien tulisi olla samat molemmilla puolilla. Ei myöskään ole väliä mitä merkintää käytät symbolien ryhmittelyyn, onko se numeroilla, kirjaimilla, alaviivoilla ja niin edelleen. myös pesinnällä ei ole merkitystä.

isValidType ()

Kun valitset ect jotain taululla ja suorittaa laajennuksen, tämä toiminto tarkistaa valitun objektin tyypin. Ja jos objektilla on jokin luetelluista tyypeistä, palauttaa vastauksen parametrilla true.

isValidType ( ) function

Vain pieni bonus, jossa on mahdollisuus yhdistää paitsi symboleja, myös ryhmiä ja muotoja Sketch-otsikoiden avulla.

https://developer.sketch.com/plugins/internal-api

onRun()

Saanen lainata Mathieu Dutouria, joka on skpm: n luoja.

skpm odottaa myös sinua export default function (context) {} ylätason onRun -funktion kirjoittamisen sijaan.

onRun () -toiminto

config.json

Joten. On aika valmistaa JSON-tiedosto, joka sisältää linkit ulkoiseen dokumentaatioon. Olen valinnut testattavasta materiaalisuunnittelupaketista kolme komponenttia: "Banner", "Input chip" ja "Card".

config.json todellisilla tiedoilla

Kuten näet, että JSON-tiedoston rakenne on hyvin yksinkertainen. Älä unohda, että kohteen config.json objektin nimen tulisi olla sama kuin osa Sketch-objektin nimeä, kuten edellä mainitsin.

Muuten, emme voi käyttää paitsi http:// tai https:// myös zpl:// linkit, joiden avulla voimme avata kaikki Zeplin.app-osiot.

manifest.json

Kuten edellä mainitsin, tämä on JSON-tiedosto, joka sisältää laajennuksen, sen komentojen ja resurssit. Laajennuksemme manifest.json lopullinen rakenne näyttää tältä:

Luettelon lopullinen rakenne. json

Lisää parametreja, myös yksityiskohtaisena kuvauksena jokaisesta parametrista, jota käytämme tässä tiedostossa. Löydät virallisesta dokumentaatiosta.

https://developer.sketch.com/plugins/plugin-manifest

Resu lt

On aika palata Terminal.app-sovellukseen ja rakentaa laajennus:

npm ajonrakenne

Se on siinä. Laajennus on valmis asennettavaksi ja testattavaksi. Tehdään se lopulta ja katsotaan tulos.

Se toimii!
Se toimii!

Lopuksi

Olkaamme rehellisiä. Tämä on enemmän kokeilua kuin valmiin tuotteen, eikä se tietenkään ole ihanteellinen toteutus. Päätavoitteemme oli olla käyttämättä paljon aikaa kehitykseen, ja siksi olemme joissakin paikoissa käyttäneet ratkaisuja, jotka olivat yksinkertaisempia eikä oikeampi. Mutta olemme käyttäneet tätä laajennusta päivittäisessä työssä yli vuoden ajan.Ja haluaisin sanoa, että se on loistava uusille suunnittelijoille, jotka ovat äskettäin saapuneet tiimiin ja aloittaneet vasta tutustumisen käyttämiisi komponentteihin.

Haluaisin myös sanoa suuret kiitokset Kirill Saveloville ja Dmitry Kozloville kärsivällisyydestä ja avusta.

Lisää tarinoita suunnittelujärjestelmästä ja työkaluista

  • (Suunnittelujärjestelmä, osa 2. Kuvakkeet, SVG-fontit, Gulp)
  • (Suunnittelujärjestelmä, osa 3. Itsetehdyt työkalut, joita käytämme päivittäisessä työssä)
  • (ffmpeg + ImageMagick. Muunna video GIF-muotoon Terminal.app-sovelluksella macOSissa)
  • (Kuvien optimointi macOS Terminal + TinyPNG CLI: n avulla)

Hyödyllisiä linkkejä

Seuraa Acronis Designia