Vodiči za skice

Biblioteke skica: Kako djeluju i lude stvari koje možete raditi s njima

Ova nova značajka je još bolja od ugniježđenih simbola. Obećajem.

Prije nego što učinite bilo šta, provjerite jeste li ažurirali na Sketch 47.

Neke brze pozadine

Ako postoji jedna fraza koja je u dizajnu uprla svijet više od bilo kojeg drugog u posljednjih godinu dana, to je ovo: "JEDINI IZVOR ISTINE".

Ne, ovo nije prava tetovaža. Da, uvijek se slažem s majicama sa svojim tepihom.

Ne, to nije singl oglas za sudbinu („27, Muško. Samohrani, Izvor Istine. Voli plažu.“). Ideja je održavanja središnjeg dokumenta ili biblioteke kao konačne verzije dizajna i svih povezanih dijelova.

To nije nova ideja. Programeri su se uvijek borili jedni protiv drugih (i Git ) kako bi baza koda bila sinkronizirana između velikih razvojnih timova.

I stvarno, nije ni novo u dizajnu.

No, poslovični megafon za istinu postaje sve glasniji tijekom posljednjih nekoliko godina jer sve više tvrtki ulaže u dizajn i distribuira rad preko timova od 5, 10 i 100+ espresso-sipinga, sočnog vrtlarenja, jogger-panted, boja znalci.

Kako danas rade stvari

Postoje mnoštvo različitih dodataka, aplikacija i usluga pomoću kojih možete održati zlatni izvor istine, ali to je opasna igra kada vaš proizvod ovisi o nečijem drugom. Svaki put kada se Sketch ažurira, ta se rješenja prekidaju i svi gunđaju na Twitteru 24 sata dok se krpa ne gurne u proizvodnju.

Djeluje, ali je slomljeno. Tik ispod jednostranog graničnog nadzora i iznad poništavanja boja za simbole (ahem, skica) nalazi se nadasve popularan zahtjev za značajke dizajnerskih timova: Shared Design Libraries.

Značajke koje bih odrekao AirPods ™ za:
1. Izvorna jednostrana granična kontrola
2. Knjižnice zajedničkog dizajna
3. Poništavanje boje za simbole

Pripremite se za dobre vijesti.

Sva je ova povijest samo nadograđena: Sketch je upravo objavio izvorno rješenje koje će dijeljenje učiniti lakšim od pravljenja avokada tost

Predstavljamo… Biblioteke skica!

Pripremite se za to da vam se joge hlače potpuno spušu.

Što su biblioteke?

Knjižnice su Sketch dokumenti koji se mogu koristiti širom svijeta.

Kako djeluju?

  1. Otvorite svoje postavke Sketch i idite na karticu "Knjižnice".
  2. Kliknite "Dodaj knjižnicu ..." i odaberite datoteku Sketch.
  3. Gotovo!

Sada možete koristiti svaki simbol iz ove datoteke Sketch u bilo kojem dokumentu:

Kada dodate vanjski simbol, oni će izgledati ovako na vašem popisu slojeva:

Svaki put kada spremite promjene na simbol u datoteci glavne knjižnice, bit ćete obaviješteni o promjenama i od vas će se zatražiti da sinkronizirate bilo koji dokument koji koristi simbole iz te biblioteke:

Lako je propustiti, ali ne smeta mi što ne smeta. Ne bih se gnjavio svakih 5 sekundi ako netko radi na glavnoj datoteci. Klikom na ovaj gumb dobivate priliku da selektivno sinkronizirate sva / sva ažuriranja izvršena u glavnoj biblioteci, pokazujući vam šta se razlikuje između vaše kopije i matične kopije. Ova bi paradigma trebala biti poznata dizajnerima sa iskustvom u razvoju:

Ako želite urediti vanjski simbol, samo ga dvaput kliknite. Skica će vas pitati kako to želite urediti:

  • Prekini vezu s bibliotekom: Razmislite o tome kao o drugoj razini "odvajanja od simbola". U ovom slučaju prvo se odvaja od vanjske biblioteke i stvara lokalni simbol. U ovom trenutku to je još uvijek simbol, ali umjetnička ploča simbola sada zapravo postoji u vašoj lokalnoj datoteci.
  • Otvori u izvornom dokumentu: Ovo će otvoriti glavnu datoteku biblioteke i prebaciti vas ravno na ploču sa slikama zbog simbola na koji ste kliknuli.

Da. To je to.

Dragi moji prijatelji ... stvarno je tako lako.

Pokušajte sami

Evo besplatne biblioteke skica korisničkih avatara koje sam sastavio tako da ih možete koristiti kao vanjske simbole. Ovo je korisno ako se želite uvijek koristiti istim grupama ljudi u svojim modelima, umjesto da se oslanjate na slučajnosti u Generatoru sadržaja.

Pitanja i odgovori

Neće li vanjski simboli izbrisati stranicu Simboli u mojoj lokalnoj datoteci?
Nope! Vanjski simboli se NE dodaju na vašu stranicu sa lokalnim simbolima. To bi bila vrsta poraza svrhe vanjske knjižnice, zar ne mislite?

Neću li izgubiti sve poništenja simbola za moj simpatični gumb gumba?
Nope! Skica tretira vanjske simbole baš kao i lokalne simbole, tako da će svaki poništavanje koji su dostupni u vašoj glavnoj datoteci biti dostupan i u vašoj lokalnoj datoteci. To znači da ako vaša matična datoteka sadrži pet različitih simbola u boji s kojima se može mijenjati boja simbola gumba, tih istih pet boja bit će dostupno u vašoj lokalnoj datoteci. KAKO JE TO COOL?!

Hoću li izgubiti lokalne poništavanja ako sinkroniziram promjene simbola iz knjižnice?
Sve dok glavni simbol zadrži iste atribute i postavljene slojeve, treba sačuvati sve poništavanja. Poništavanja ćete izgubiti samo ako izmijenite bilo koji ugniježđeni simbol u glavnom simbolu (to se ne razlikuje od načina na koji simboli danas rade).
Radi li sa stilovima teksta i slojevima slojeva?
Ne još, ali nalazi se u Nacrtu mape puta.
Ako knjižnici dodam simbole, hoće li korisnici te knjižnice morati ažurirati svoje datoteke?
Nope! Ako dodate nove simbole, oni će se prikazati na padajućem izborniku "Dodaj simbol iz biblioteke". To je bilo lako!
Ne želim da se Dave igra s matičnom bibliotekom. Postoji li način upravljanja dozvolama korisnika?
Nativno, ne baš sada. Ipak to možete ostvariti putem dozvola za mapu Dropbox ili Google Drive.
Koliko knjižnica mogu imati?
Ne znam ... koliko je zvijezda na nebu?

Mogu li referencirati knjižnicu u knjižnici [u biblioteci]?
Da. Ažuriranja će se kasnije nadograditi, tako da ćete ih morati sinkronizirati pojedinačno (ne zaboravite).

Je li to najbolje od rezanog kruha?
To je maslac. Err, bolje.

Neke inspiracije knjižnice

Knjižnice su fantastične za dijeljenje korisničkih sučelja preko dizajnerskog tima, ali nemojmo se tu zaustaviti. Evo kako će Knjižnice skica preoblikovati način na koji vječno dizajnirate:

  1. Središnja biblioteka komponenata: upravljajte svim svojim gumbima, poljima, ulazima itd. Sve u jednoj središnjoj knjižnici. Moj dizajnerski tim koristi UX Power Tools i savršeno funkcionira sa Sketch Libraries.
  2. Biblioteka ikona: Upravljajte svim svojim ikonama u biblioteci. Svaki put kada se doda nova ikona, ona će odmah biti dostupna svim dizajnerima.
  3. Biblioteka ilustracija: Upravljajte svim marketingom i ilustracijama proizvoda u knjižnici. Dizajneri proizvoda i web dizajneri mogu uputiti ilustracije iz vaše datoteke. Nije važno ako niste radili sa svojim ilustracijama. Oni će biti obaviješteni svaki put kada ažurirate.
  4. Biblioteka imovine marke: Upravljajte svom imovinom robne marke u knjižnici. Ako se svi dizajneri pozivaju na biblioteku jedne marke, logotipi i povezana svojstva uvijek će se sinkronizirati.
  5. Biblioteka boja: Upravljajte svim bojama ili UI bojama u biblioteci. Koristite ugniježđene simbole boja na gumbima i ikonama da biste omogućili preglasavanje njihove boje? Referentne boje iz ove biblioteke boja u drugim bibliotekama i bilo bi umno jednostavno ažurirati boje na više dokumenata.
  6. Biblioteka grafikona: Upravljanje grafikonima, grafikonima i vizualizacijama u knjižnici. Obično su prilično privrženi dizajni, tako da će smještaj u njihovu knjižnicu održavati UI datoteke čistim i uspješnim.
  7. Pojedinačna knjižnica komponenata: Upravljanje pojedinačnim komponentama korisničkog sučelja u knjižnici. Znate kako LESS, Sass i drugi CSS predprocesori obično modulariziraju stilove radi lakšeg upravljanja? Podijelite svoj sustav dizajna u više biblioteka s unakrsnim referencama za veću organizaciju i lakše umetanje simbola.

Fantastičan poslovni potez po skici

Ova značajka izvorne biblioteke postat će VELIKA za poslovanje Sketcha.

Tko koristi Sketch? Dizajneri proizvoda i web dizajneri (ili kako god želite nazvali ove uloge). To je otprilike to.

Iako velika populacija, ti dizajneri čine samo mali dio dizajnerske zajednice. I svi ostali? Pa, skloni su povoljnijim proizvodima poput ilustracije afiniteta i Adobe Illustrator:

  • Brendiranje proizvoda: Adobe Illustrator. Definira boje, fontove, logotipe itd. Stvara primarne resurse markiranja.
  • Dizajn ikona: Adobe Illustrator, Affinity Designer. Stvara prilagođene ikone za proizvod i marketing.
  • Ilustracija: Adobe Illustrator, Dizajner afiniteta. Stvara prilagođene ilustracije za proizvod i marketing.
  • Data Viz: Excel, Illustrator, D3. Dizajnira grafikone, grafikone i vizualizacije proizvoda.

To je puno ljudi i puno prihoda koji nedostaje Sketchu.

Biblioteke skica olakšat će tim pojedincima da uđu u tijek rada Sketch dizajna. Umjesto da SVG-ove izvozi iz Illustratora i uvozi ih u Sketch, ilustrator može upravljati vlastitom datotekom ilustracija, a zatim dizajner proizvoda može te crteže navesti kao vanjske simbole. Kad god ilustrator mora ažurirati, širit će se izravno u UI datoteku. Svaka se imovina sada može dijeliti. Sad i zauvijek. Bit će tako sjajno i ne mogu čekati dok ne bude javno objavljeno!

Ostale cool stvari

Ovo su samo neke neorganizirane misli i ideje, ali mislim da ćete pronaći inspiraciju u jednom ili u svima njima.

  • Knjižnice se mogu pozivati ​​na druge knjižnice. Uh. Leonardo DiCaprio imao bi vrhunac s ovom razinom početnosti.
  • Rukovoditelji proizvoda sada mogu vršiti prljave nacrte s pravim simbolima i komponentama, a da ne brinete o tome je li nešto zajebavalo u biblioteci osnovne komponente.
  • Za upotrebu novih simbola nije potrebna sinkronizacija. Oni se samo pojavljuju na popisu simbola vanjske knjižnice. Ovo neće ometati radni tijek korisnika.
  • Simbole podataka InVision Craft možete definirati u vanjskoj biblioteci, a kad ih korisnik upotrijebi s Craft Duplicate, automatski će ispuniti podatke tipa.
  • Možete ugurati vanjske simbole u lokalne.
  • Možete imati dvije odvojene biblioteke s odgovarajućim simbolima i komponentama. Jedan za žičane okvire. Jedan za visoku vjernost. Možete prelaziti između KNJIŽNICA umjesto samo između simbola.
  • Knjižnice mogu biti vaš osobni generator sadržaja. Napravite biblioteku koja sadrži samo stavke popisa. Ili samo avatare. Ili samo ljestvice. Dizajnerski radovi sada se mogu raspodijeliti i dijeliti preko dizajnerskog tima. Evan može napraviti karte. Jon može učiniti korisničko sučelje. Andy može raditi s brendiranjem. Ilustrator može raditi svoj posao i unositi promjene bez ometanja UI dizajnera. Sve datoteke mogu međusobno razgovarati.
  • Datoteke više nisu pretrpane stotinama simbola koji se ne koriste ili koriste se nedovoljno.
  • Možete napraviti knjižnicu simbola umjetničke ploče (sveti š * t). Ovo je poput naljepnice Nebo.

Sažetak

Nepotrebno je reći da je ovo ogromna nova značajka koja će vrlo pozitivno utjecati na dizajnerske timove svih veličina.

Ne može biti jednostavnije za upotrebu, zato se igrajte s beta verzijom da biste počeli učiti kako to funkcionira. Profesor će vam biti za oko 3 minute.

Dok čekate javno izdanje Sketch-a 47 (pretpostavljam da će na ovom jednom raditi najmanje nekoliko tjedana beta testiranja), idite sebi nabaviti kopiju UX-ovih dizajnerskih sustava. Izvrsno surađuju s Knjižnicama, a vaš će dizajnerski tim postići brzinu i dosljednost za koje niste ni znali što je moguće.

Kad ne pišem o vanjskim bibliotekama, radim na alatima za dizajn Sketch-a u UX Power Tools kako bih vas napravio bolji i učinkovitiji dizajner.

Slijedite UX Power Tools na Twitteru
Slijedite me na Twitteru