Sketchin versiossa 47 esitettiin kauan odotettu kirjastojen esittely, jonka avulla voit synkronoida symbolit globaalisti kaikkien Sketch-tiedostojesi välillä. Suunnittelijajärjestelmät saavat erityisen hyödyn tällaisesta ominaisuudesta - suunnittelijan unelma toteuttaa mahdollisuus saada helposti käytettävissä oleva tapa tuoda suunnittelujärjestelmän omaisuutta ja varmistaa, että se pysyy ajan tasalla kaikille. Kokeiltuaan kaikkea InVision's Craftista omaan Sketch-laajennuksen luomiseen, meillä oli ilo saada vihdoin tämä Sketchissä alkuperäisenä ominaisuutena. Tässä on joitain päätöksiä, joihin teimme päätöksen, ja opit opit, kun laitoimme suunnittelujärjestelmämme kirjastoon.

Kirjaston tavoitteet

Jotta ymmärrämme päätöksentekoon johtaneita ajatuksia, tässä on lyhyt kuvaus siitä, mitkä tavoitteemme kirjastomme kanssa olivat:

  1. Keskitetty palvelupiste suunnittelijoillemme. Vain yhden tiedoston, jonka he pystyivät hakemaan, ja niillä on uusin suunnittelujärjestelmämme tarjoama.
  2. Mahdollisimman lähellä 1: 1 -suoritusta koodattujen komponenttiemme kanssa alustasta riippumatta, sekä visuaalisesti että rakenteellisesti.
  3. Helppo ylläpitää. Komponenttien päivitysten tai lisäysten tulisi olla yksinkertaisia, jotta suunnittelijat saavat viimeisimmätkin odottamatta.

Sisäkkäiset vs.

Tässä erinomaisessa Sketch Together -videossa Pablo Stanley puhuu kirjastojen pesästä. Näin voit jakaa asiat, kuten värit ja komponentit, eri Sketch-tiedostoiksi ja viittaa sitten symboleihin tiedostojen välillä. Jos päivität jonkin tiedoston symbolia, se etenee edelleen muihin tiedostoihin, jotka viittaavat tähän symboliin.

Toinen vaihtoehto on laittaa kaikki yhteen tiedostoon. Et saa sitä puhdasta erottelua, jonka erilliset Sketch-tiedostot antavat sinulle, mutta tarkoituksiamme varten se todella toimi paremmin, koska:

  • Ylläpito on helpompaa, koska tarvitsemme vain yhden tiedoston auki, kun teemme päivityksiä kirjastoon (tavoite # 3).
  • Se vaatii suunnittelijamme lisäämään vain yhden kirjaston (tavoite # 1).

Sivujen käyttäminen organisaatiossa

Kaikkien värien, kuvakkeiden, komponenttien ja niin edelleen purkaminen yhdeksi tiedostoksi ei ole ensimmäinen asia, joka tulee mieleen ajatellessasi “helppo ylläpitää”. Onneksi voit jakaa kirjastosi Sketch-sivuille. Tässä on piilotettu kuinka me teimme:

Asioiden pitäminen erillään sivuista tekee jopa suuren kirjaston helpon ylläpitämisen.

Suunnittelujärjestelmän tärkeimmät osat (väri, tyyppi, kuvakkeet) ovat yläosassa ja sitten me vain luetteloimme komponentit aakkosjärjestyksessä. Näet alareunassa kaksi lisäsivua. Testisivu, jos et ole arvaa sitä, on sivu, jolla voimme nopeasti testata lisäämämme uudet symbolit. Kirjaston esikatselussa käytetään Sketch Huntin ilmaista sivua, joka antaa kirjastoomme mukautetun esikatselukuvan, kun lisäät kirjaston Sketchin asetuksiin (tätä tuetaan nyt oletuksena Sketchissä, alkaen v48).

Symbolien nimeäminen

Symbolit-valikon kohteet voidaan ryhmitellä symbolien nimeämisessä. Asioiden erottaminen painikkeella / asettaa ne uuteen valikkoryhmään. Käyttämällä yllä hahmoteltua organisaatiota ja tietämällä kuinka asiat on ryhmitelty komponenttipuolelle, menimme sen kanssa, mikä tuntui loogisimmalta; jotain nappien kaltaista, joka näyttää tältä:

Mikä luo valikon, joka näyttää noin tältä (muokattu hiukan, jotta se olisi helpompi nähdä):

Värin lisääminen

Tällä hetkellä Sketchillä ei ole tapaa jakaa värejä kirjasto-ominaisuuden kanssa. Toki, on olemassa laajennuksia, joiden avulla voit luoda jaettavissa olevia paletteja, mutta se oli ristiriidassa keskitetyn palvelupisteemme ja helpon ylläpidettävyyden tavoitteidemme kanssa. Sen sijaan loimme värit käyttämällä vain vanhoja suorakulmioita.

Käytämme värisymboleitamme muiden rakenneosien päärakennuksena.

Vaikka se ei olekaan ihanteellinen, se ei ole liikaa vaivaa suunnittelijoillemme, koska suurin osa heidän värintarpeistaan ​​olisi käsiteltävä kunkin komponentin symbolin ohittamisessa. Lisäksi se antaa meille mahdollisuuden käyttää noita värillisiä suorakulmioita todellisten komponenttien rakentamiseksi (selitetty alla). Jos teemme päivityksen väriin, se päivittää kaikki komponentit, jotka käyttävät kyseistä värisymbolia.

Päätason värit (kuten tuotemerkki, apuohjelmat, taustavärit) sisältyvät Värit-sivulle ja ryhmitetty vastaavasti. Komponentille ominaiset värit siirtyvät komponentin sivulle ylläpitämisen helpottamiseksi. Voimme silti luoda suorakulmion symboleja, jotka viittaavat päätason väreihin tarvittaessa, mikä tekee päivityksistä myöhemmin paljon nopeampia.

Nämä apuohjelman värit voidaan tuoda tarvittaessa mihin tahansa muuhun komponenttisivulle - painikkeet, paahtoleikkeet, kuvakkeet jne.

Viimeinen talonpuhdistuksemme, jonka tarvitsimme tehdä, oli varmistaa, että kun avasit värien korvaamisen, et puhunut valtavasta väriluettelosta. Tämän korjaamiseksi mitoimme ne värilliset suorakulmiot yksinkertaisesti 10: n välein, koska symbolien ohitusten ryhmittely perustuu kokoon. Esimerkiksi tuotemerkkien värit ovat 20xx20x, apuohjelmavärit ovat 30xx30px ja niin edelleen. Nyt kun suunnittelija haluaa vaihtaa toiseen kuvakkeen väriin, he näkevät vain kuvakkeen värit eikä kaikkia muita värejä kirjastossa.

Kuvakkeiden lisääminen

Kuvakkeita käsiteltiin samalla tavalla kuin värejä, koska ryhmitelimme ne loogisesti käytön mukaan (navigointi, urheilu, tiedostotyypit jne.). Jotta suunnittelijat voivat vaihtaa kuvakkeiden värien välillä, lisäsimme nämä värit vain naamioiksi.

Jokaisessa kuvakkeessa on värimerkki kuvakkeiden väriluettelosta.

Muista, että asioiden mitoittaminen samalla tavalla saa ne näkymään ohitusvalikossa yhdessä. Tätä silmällä pitäen mitoitimme kuvakkeemme värit samaan, jotta kun suunnittelija menee vaihtamaan väriä, he näkevät vain kuvakkeisiin käytettävissä olevat värit.

Yksi haaste oli käsitellä kolmen erilaista kokoa, joista kuvakkeet tulevat sisään. Tämän kiertämiseksi loimme yksinkertaisesti kolme symbolia oikeassa koossa oletuskuvakkeella (logomme). Koska käytämme symbolia, suunnittelija voi nyt vain valita toisen kuvakkeen ohituspaneelista - muista, että voit muuttaa lisätyn symbolin sydämesi sisältöön vaikuttamatta siihen, mitä näet Ohitukset-paneelissa. Paljon kuvakkeita se voi olla melko hiljainen luettelo, etenkin verrattuna yllä hienosti luokiteltuun tapaan tehdä kuvakkeita. Meillä ei ole paljon tapauksia, joissa kuvaketta tarvitaan missä tahansa muussa kuin keskikokoisessa, joten tämä kiertotapa toimii meille.

Sama symboli, vain koon mukaan.

Lisää tyyppi

Tämä on toinen alue, jolla kirjasto-ominaisuus ei täysin vastaa tarpeitamme. Tekstin muokkaaminen Ohitukset-paneelissa voi olla hiukan tuskallinen, kun otetaan huomioon, kuinka pieni tekstilaatikko on. Tee vain alkuperäiset Paljon kuin värit. On olemassa Sketch-laajennuksia, jotka pystyvät käsittelemään Tyypin tuomista Sketch-asiakirjoihisi tekstityylinä, mutta ne ovat helposti ylläpidettävien ja yhden luukun tavoitteidemme vastaisia.

Lopulta päätimme joka tapauksessa luoda symboleja. Suunnittelijat voivat joko käyttää Ohitus-paneelin tekstilaatikkoa tai vain irrottaa symbolista ja muokata tekstiä normaalisti. Ja kuten luonnos v48, voit suurentaa Ohitus-paneelin tekstilaatikkoa lisäämällä symbolin tekstin määrää oletuksena.

Symbolissa olevan tekstin määrä määrittää, kuinka suuri tekstikenttä saat ohituspaneelissa.

Viimeinen asia, johon meidän on puututtava tekstin avulla, on värit. Tekstillämme se on jo asetettu komponenttiin oikein. Entä entinen ympäristö, niiden käyttäminen tai esimerkiksi virhetilat? Tätä varten luotamme jälleen symbolin koon määrittämiseen, mikä näkyy ohituksissa. Jotakin lomakkeetyyppistä varten varmistamme vain, että kyseiset tekstisymbolit ovat kaikki samankokoisia.

Eri värilliset etiketit samassa koossa tekevät suunnittelijoillemme helpon valita valintamahdollisuuksista esimerkiksi lomakemerkkejä.

Komponenttien lisääminen

Kun olet luonut kaikki kovat asiat, painikkeiden, modaalien, paahtoleipien jne. Valmistaminen oli oikeastaan ​​aika helppoa. Jotakin modaalien kaltaista varten tuomme vain oikea taustaväri, lisäämme tyyppisymbolin, jolla on hyvä oletusviesti ja pudota lopuksi Sulje-kuvake. Tässä vaiheessa olemme pääsemässä hyvin lähelle sellaisten symbolien luomista, kuin miten me reagoisimme.

Ja se on tarkoituksellista, koska haluamme, että symbolimme ovat mahdollisimman lähellä osien 1: 1 vastausta. Tätä varten nimeämme symboli korvaa tarkalleen sen, kuinka nimeämme komponentti rekvisiittamme koodina. Jotta se olisi entistä selkeämpää suunnittelijoillemme, nämä ovat komponenttiosastot, pidämme jopa nimiä pienillä kirjaimilla. Kaikki, mikä ei oikeastaan ​​kuulu komponentin koodiin (kuten pehmustelohkot, joista keskustellaan alla), nimitämme tapaukseksi. Samalla tavalla komponenttituotteille nimettyjen symbolien ohitusten pitäminen on hieno tapa silittää kyseinen suunnittelija / kehittäjä -keskustelu, kun on aika rakentaa rajapinnat.

Kun suunnittelijat ja kehittäjät puhuvat, heidän tulisi käyttää samaa kieltä. Luonnoksemme ohitusnimitys vastaa todellisten koodattujen komponenttien nimeämistä.

Vinkkejä

Tässä on muutamia muita asioita, jotka opimme rakentaessamme komponentteja, jotka voivat auttaa sinua:

  • Tee asioista helpompaa ja lataa Sketch Symbol Organizer -laajennus. Voit järjestää symbolit aakkosjärjestykseen ja ryhmitellä asiat nimen perusteella. Lisäksi se antaa jopa asioita asioida haluamallasi tavalla. Suuri ajansäästäjä.
  • Kerrosten järjestyksellä symboleissa on merkitystä. Se, kuinka he tilataan symbolissa, on kuinka ne järjestetään Ohitus-paneelissa.
  • Siinä on syytä toistaa miljoonan kerran, että myös kerrosten koko on tärkeä. Muista: Näin esimerkiksi asiat, kuten taustat, tyyppi, kuvakkeet jne., Voidaan ryhmitellä.
  • Sinulla on todennäköisesti symboleja, joita suunnittelijat eivät todellakaan tarvitse, mutta ne ovat tärkeitä komponenttien meikissä. Päätimme luoda _Building Blocks -valikkokohdan (alaviiva pitää sen ankkuroituneena alaosaan), joka toimii vähän roskapostina. Nämä kohteet pysyvät vastaavan komponentin sivulla, mutta niille annetaan _Building Blocks -etuliite, jotta varmistetaan, että ne kaikki menevät kyseisen valikkokohteen alle.
Sellaisten esineiden etuliitteet, joita et halua näyttää, kuten meillä on täällä “_Building Blocks”, varmistaa, että ne kaikki heitetään tähän roskapöytään.
  • Luonnoksessa ei tällä hetkellä käsitellä sisäkkäisiä symboleja, joiden koko on erittäin hyvä. Tämän kiertämiseksi luomme yleensä niin kutsutut välilyönnit. Esimerkkejä siitä, missä tämä saattaa olla tarpeen, ovat painikkeet; pudotat painikkeen, annat sille enemmän tekstiä kuin oletusarvoa ja yhtäkkiä pehmuste on tyhjä. Tätä varten meillä on show / hide spacing -symboli, joka putoaa puoliläpikuultaviin ”lohkoihin”. Suunnittelijan on nyt vain muutettava painikkeen kokoa, kunnes lohkot rinnastuvat.
Nämä lohkot voidaan lisätä mihin tahansa komponenttiin koon vähentämisen arvailujen vähentämiseksi.

Asettaminen saataville

Kun kirjasto oli valmis, tarvitsimme tavan varmistaa, että se pysyisi aina ajan tasalla suunnittelijoillemme. Käytämme Google Drivea, joten se oli ilmeinen paikka laittaa se. Lukitsimme pääsyn itse kirjastotiedostoon varmistaaksemme, ettei tarpeettomia poistoja tai lisäyksiä tapahdu, ja kirjoitimme sitten Aloitusoppaan.

Yksi Aloitusoppaan ominaisuuksistamme on ohjeet Sketch Runner -sovelluksen käyttöönottoon. Vaikka tämä on hiukan vastoin päämääräämme olla keskitetty palvelupiste, havaitsemme, että tämän laajennuksen käytön edut ylittävät pelkästään sen käytön kirjastomme kanssa - se on todella korvaamaton työkalu.

Sketch Runner -sovelluksella voit nopeasti lisätä symboleja kirjoittamalla heidän nimensä, mikä monille ihmisille on aika nopeampaa kuin valikoiden läpi käyminen. Suosittelemme suunnittelijoillemme poistamaan sumea haku käytöstä vaihtoehdoista ja lisäämään ”_Building Blocks” ohitetun etuliitteen asetuksiin.

Tässä ovat suositellut asetukset juoksijalle.

Käynnistämisen jälkeen olemme saaneet paljon palautetta siitä, kuinka paljon aikaa on tallennettu kirjaston avulla. Odotamme, että Sketch jatkaa parannuksia tulevaisuudessa, jotta siitä tulisi entistä vaikuttavampi työkalu.