Verzija 47 programa Sketch ugledala je dugoočekivano uvođenje Biblioteke koja vam omogućuje globalnu sinkronizaciju simbola kroz sve datoteke Sketch. Dizajnerski sustavi posebno dobivaju priliku poput ove - mogućnost pristupačnog sredstva dizajnerskog sustava, istovremeno osiguravajući da budu ažurirani za sve, dizajnerski je san ostvarenje. Nakon što smo isprobali sve, od InVision's Craft-a do stvaranja vlastitog dodatka za Sketch, bili smo sretni što smo to na Sketchu konačno dobili kao izvornu značajku. Evo nekih odluka do kojih smo došli i lekcija koje smo naučili dok smo sustav dizajniranja postavili u knjižnicu.

Ciljevi naše knjižnice

Da bismo razumjeli dio razmišljanja koja su dio naših odluka, evo kratkog pregleda kakvi su bili ciljevi naše Knjižnice:

  1. Jedinstveni dućan za naše dizajnere. Samo jednu datoteku koju bi mogli iskoristiti i imaju najnovije što naš sustav dizajniranja može ponuditi.
  2. Što je moguće bliže 1: 1 s našim šifriranim komponentama, bez obzira na platformu, vizualno i strukturno.
  3. Jednostavno za održavanje. Ažuriranja ili dodaci komponenti trebaju biti jednostavni kako bi dizajneri dobili najnovije vijesti bez puno čekanja.

Gniježđeno vs samci

U ovom izvrsnom videu Sketch Together, Pablo Stanley govori o tome kako ugniježditi Biblioteke. To vam omogućuje da podijelite stvari poput boja i komponenata u različite datoteke Sketch, a zatim referentne simbole na te datoteke. Ako izvršite ažuriranje simbola u jednoj od datoteka, on će se i dalje širiti u ostale datoteke koje upućuju na taj simbol.

Druga je mogućnost staviti sve u jednu datoteku. Ne dobijate čisto razdvajanje koje vam nude zasebne datoteke Sketch, ali u naše svrhe to je zapravo i uspjelo bolje jer:

  • Održavanje je lakše jer trebamo imati otvorenu samo jednu datoteku prilikom ažuriranja Biblioteke (Cilj # 3).
  • Naši dizajneri zahtijevaju da dodaju samo jednu biblioteku (Cilj # 1).

Upotreba stranica za organizaciju

Izmetanje svih naših boja, ikona, komponenti i slično u jednu datoteku nije prvo što vam padne na pamet kad pomislimo da je „lako održavati“. Srećom, svoju biblioteku možete podijeliti na stranice unutar programa Sketch. Evo poglavlja kako smo učinili svoje:

Ako stvari budu razdvojene Stranicama, čak je i velika Biblioteka jednostavna za održavanje.

Ključni dijelovi našeg dizajnerskog sustava (boja, vrsta, ikone) nalaze se na vrhu, a onda smo naše komponente jednostavno abecedno popisali. Na dnu ćete vidjeti dvije dodatne stranice. Testna stranica, ako je niste pogodili, stranica je na kojoj brzo možemo testirati sve nove simbole koje smo dodali. Pregled knjižnice koristi besplatni program Sketch Hunt da našoj knjižnici doda prilagođenu sliku za pregled kada idete da dodate biblioteku u preferencijama Sketch-a (ovo je sada pod zadanim postavkama podržano u Sketch-u od v48).

Imenovanje simbola

Stavke u izborniku Simboli mogu se grupirati po načinu imenovanja simbola. Razdvajanje stvari s a / stavlja ih u novu skupinu izbornika. Koristeći gore navedenu organizaciju i znajući kako su stvari grupirane na komponentnoj strani, nastavili smo s onim što je najlogičnije; za nešto poput gumba, to izgleda ovako:

Što stvara izbornik koji izgleda ovako: (uređivan malo da bi ga lakše vidio):

Dodavanje boje

Trenutno Sketch nema način dijeljenja boja sa značajkom Biblioteke. Naravno, postoje dodatci koji vam omogućuju stvaranje palete koje se mogu dijeliti, ali to je u suprotnosti s našim ciljevima „sve na jednom mjestu“ i jednostavne održavanja. Umjesto toga, svoje smo boje stvorili pomoću običnih starih pravokutnika.

Naše simbole u boji koristimo kao glavni građevni blok za ostale naše komponente.

Iako nije idealno, to nije previše gnjavaže za naše dizajnere, jer većina njihovih potreba u boji treba biti riješena na poništavanju simbola svake komponente. Uz to, omogućuje nam korištenje obojenih pravokutnika za izradu tih stvarnih komponenti (objašnjeno u nastavku). Ako izvršimo ažuriranje boje, ona će ažurirati svaku komponentu koja koristi taj simbol boje.

Naše boje na glavnoj razini (kao što su marka, uslužni programi, boje pozadine) nalaze se na stranici Boje i grupirane sukladno tome. Boje koje su specifične za komponentu idu na stranicu te komponente da biste održali tu jednostavnost održavanja. Još uvijek možemo stvoriti simbole pravokutnika koji se po potrebi pozivaju na boje na glavnoj razini, što čini ažuriranja kasnije bržim.

Ove korisne boje po potrebi se mogu unijeti na bilo koju drugu komponentu stranice - gumbe, tosteve, ikone itd.

Zadnji dio čišćenja kuća koje smo trebali učiniti je bilo da prilikom otvaranja preklapanja u boji niste bili prekriveni ogromnim popisom boja. Da bismo to riješili, jednostavno smo dimenzionirali pravokutnike u bojama u koracima od 10, jer se grupiranje poništavanja simbola temelji na veličini. Na primjer, boje marke su 20 px do 20px, korisne boje 30px 30px i tako dalje. Sada, kada dizajner želi prebaciti na drugu boju ikona, u knjižnici vide samo boje ikona, a ne svaku drugu boju.

Dodavanje ikona

Sa ikonama se rukuje na sličan način kao u bojama, tako da smo ih logično grupirali po njihovoj upotrebi (navigacija, sport, vrste datoteka itd.). Kako bismo dizajnerima omogućili prebacivanje između različitih boja koje imamo za ikone, te smo boje jednostavno dodali kao maske.

Svaka ikona sadrži oznaku boje s našeg popisa boja ikona.

Zapamtite da ih određivanje veličine na sličan način čini zajedno na izborniku za poništavanje. Imajući to u vidu, naše veličine boja ikona bile smo iste, tako da kad dizajner promijeni boju, vide samo one boje dostupne za ikone.

Jedan od izazova imali smo rukovanje s tri različite veličine na koje dolaze ikone. Da bismo to prebrodili, jednostavno smo stvorili tri simbola u odgovarajućoj veličini sa zadanom ikonom (naš logotip). Budući da koristimo simbol, dizajner sada može odabrati drugu ikonu na ploči za poništavanje - imajte na umu da možete umetnuti veličinu umetnutog simbola u sadržaj vašeg srca, bez utjecaja na ono što vidite na ploči za poništavanje. Uz puno ikona može se naći poprilično općenit popis, posebno u usporedbi s gore kategoriziranim načinom izrade ikona. Nemamo puno slučajeva gdje je ikona potrebna na bilo čemu drugom osim na veličini, tako da ovo rješenje, uh, djeluje za nas.

Isti simbol, samo promijenjene veličine.

Dodavanje vrste

To je još jedno područje u kojem značajka Knjižnice ne zadovoljava baš naše potrebe. Uređivanje teksta na ploči za poništavanje može biti muka s obzirom na to koliko je mali tekstni okvir. Samo napravite svoje početne Mnogo slične boje, postoje dodatci za skicu koji mogu podnijeti Type u vaše dokumente Sketch u obliku tekstualnih stilova, ali oni idu u skladu s našim jednostavnim održavanjima i radom na jednom mjestu.

Konačno smo odlučili ionako stvoriti simbole. Dizajneri mogu koristiti tekstni okvir na ploči za poništavanje ili samo odvojiti od simbola i urediti tekst onako kako bi i obično bili. Kao i kod Sketch v48, možete povećati tekstualni okvir na ploči Overrides povećanjem količine teksta u simbolu prema zadanim postavkama.

Količina teksta u simbolu određuje koliko ćete tekstnog polja dobiti na ploči za poništavanje.

Ima još jedne posljednje stvari s kojom se moramo pozabaviti tekstom i to su boje. S našim je tekstom komponenta već ispravno postavljena. Ali što je s drugačijim okruženjem, tematskim temama ili stvarima poput stanja pogrešaka? Zbog toga se ponovo oslanjamo na određivanje veličine simbola kako bismo utvrdili što se prikazuje u poništavanju. Za nešto poput oznake obrasca, jednostavno osiguravamo da su pojedini simboli teksta svi u istoj veličini.

Različite naljepnice u istoj veličini našim dizajnerima olakšavaju odabir između mogućih boja za nešto poput naljepnica oblika.

Dodavanje komponenata

Nakon stvaranja svih teških stvari, izrada gumba, modalica, tosteva itd. Bila je zapravo prilično jednostavna. Za nešto poput Modalsa, jednostavno dovodimo u pravu pozadinsku boju, dodamo simbol tipa s dobrom zadanom porukom i na kraju padnemo na ikonu Zatvori. U ovom trenutku, vrlo smo se približili stvaranju simbola poput načina na koji bismo postupili s Reactom.

A to je namerno jer želimo da se naši simboli što bliže podudaraju u komponentama 1: 1. U tu svrhu imenujemo simbol poništava točno kako u kodu imenujemo svoje komponente rekvizite. Da bismo našim dizajnerima još jasnije radili se o komponentnim rekvizitima, a imena čak zadržavamo i malim slovima. Sve što zapravo nije dio koda komponente (poput blokova obloga o kojima ćemo raspravljati u nastavku), naslovit ćemo slučaj. Zadržavanje poništavanja simbola imenovanih identično rekvizitima komponenti odličan je način da se premosti rasprava dizajner / programer kada dođe vrijeme za izradu sučelja.

Kada dizajneri i programeri razgovaraju, trebali bi upotrijebiti isti jezik. Naš nadimanje Sketch imenovanja odgovara imenovanju u stvarnim kodiranim komponentama.

savjeti i trikovi

Evo još nekoliko stvari koje smo naučili dok smo izrađivali komponente koje će vam možda pomoći:

  • Učinite stvari jednostavnijima i preuzmite dodatak Sketch Symbol Organizer. Svoje simbole možete organizirati abecednim redom i grupirati stvari na temelju imena. Uz to, čak ćete i svemirati stvari kako želite. Veliki uštedu vremena.
  • Redoslijed slojeva u vašim simbolima je važan. Kako su naručeni na simbolu, kako će biti naručeni na ploči za poništavanje
  • Ovdje vrijedi ponoviti milijunski put da je veličina vaših slojeva također bitna. Zapamtite: tako se stvari poput pozadine, vrste, ikone itd. Mogu grupirati.
  • Najvjerojatnije ćete imati simbole koje vam dizajneri zaista ne trebaju, ali su važni za sastav vaših komponenata. Odlučili smo stvoriti stavku izbornika _Building Blocks (donja crta se drži usidrenom na dnu) koja djeluje pomalo kao ladica za smeće. Te stavke ostaju na stranici odgovarajuće komponente, ali su imenovane prefiksom _Building Blocks kako bi se osiguralo da se sve nalaze pod tom stavkom izbornika.
Prefiksi predmeta koje ne želite biti prikazani, poput ovdje sa
  • Skica trenutno ne rukuje ugniježđeni simbol koji mijenja veličinu. Da bismo to zaobišli, obično stvaramo ono što nazivamo "razmaknuti blokovi". Primjer gdje bi to moglo biti potrebno su gumbi; ispustite gumb, dajte mu više teksta nego što je zadana i odjednom padding nije u padu. Za to imamo simbol za prikazivanje / sakrivanje razmaka bloka koji se spušta u poluprozirne „blokove“. Dizajner sada samo treba promijeniti veličinu gumba dok se blokovi ne poravnaju.
Ovi se blokovi mogu dodati bilo kojoj komponenti radi smanjenja nagađanja kada je u pitanju promjena veličine.

Čineći ga dostupnim

Nakon što je biblioteka dovršena, trebao nam je način kako bismo bili sigurni da će ona uvijek biti u tijeku za naše dizajnere. Koristimo Google pogon, pa je to mjesto bilo očito. Zaključali smo pristup samoj datoteci knjižnice kako se ne bi dogodilo nepotrebno brisanje ili dodavanje, a zatim smo napisali vodič za početak rada.

Jedna od naših karakteristika vodiča za početak rada su upute o postavljanju pomoću Sketch Runnera. Iako je ovo pomalo protiv našeg cilja „sve na jednom mjestu“, otkrivamo da su koristi ovog dodatka daleko izvan toga što smo ga koristili s našom bibliotekom - to je zaista neprocjenjiv alat.

Pomoću programa Sketch Runner možete brzo umetnuti simbole samo upisivanjem njihovog imena, što je većini ljudi prilično brže od prolaska kroz izbornike. Preporučili smo našim dizajnerima da isključe nejasno pretraživanje u opcijama i dodaju „_Building Blocks“ zanemarenom prefiksu u Postavkama.

Evo preporučenih postavki za Runner.

Od pokretanja primili smo puno povratnih informacija o tome koliko je vremena uštedjelo pomoću knjižnice. Radujemo se što će Sketch ubuduće nastaviti s poboljšanjima kako bi postao još impresivniji alat.