Skitsevejledninger

Sketch-biblioteker: Hvordan de fungerer, og de skøre ting, du kan gøre med dem

Denne nye funktion er endnu bedre end indlejrede symboler. Jeg lover.

Før du gør noget, skal du sørge for at være opdateret til Sketch 47.

Noget hurtig baggrund

Hvis der er en sætning, der har plaget designverdenen mere end nogen anden i det forløbne år, er det denne: "ENKEL SOURCE OF TRUTH".

Nej, dette er ikke en rigtig tatovering. Ja, jeg matcher altid mine t-shirts til mit tæppe.

Nej, det er ikke en singleannonce for en formue ("27, mand. Single, Source of Truth. Loves the Beach."). Det er denne idé om at bevare et centralt dokument eller bibliotek som en ende-alt-være-alt-jeg-sværger-dette-er-den-sidste-version af designet og alle dets relaterede stykker.

Det er ikke en ny idé. Udviklere har altid kæmpet mod hinanden (og Git ) for at holde kodebasen synkroniseret mellem store udviklingshold.

Og det er faktisk heller ikke nyt at designe.

Men den sproglige megafon for sandheden er blevet højere i løbet af de sidste par år, da flere og flere virksomheder investerer i design og distribuerer arbejde på tværs af teams på 5, 10 og 100+ espresso-sipping, saftigt havebrug, jogger-panted, farve kendere.

Sådan fungerer ting i dag

Der er mange forskellige plugins, apps og tjenester, der kan hjælpe dig med at bevare din gyldne kilde til sandhed, men det er et farligt spil, når dit produkt afhænger af en andens. Hver gang Sketch-opdateringer går i stykker, brydes disse løsninger, og alle mumler på Twitter i 24 timer, indtil en patch er skubbet i produktion.

Det fungerer, men det er ødelagt. Lige under ensidig grænsekontrol og overstyring af farveoverskridelser for symboler (ahem, Sketch) ligger en overvældende populær anmodning om funktion til designteam: Delte designbiblioteker.

Funktioner, jeg ville opgive mine AirPods ™ til:
1. Indbygget ensidig grænsekontrol
2. Delt designbiblioteker
3. Farveoverskridelser til symboler

Forbered dig på nogle gode nyheder.

Alt dette baghistorie er bare opbygget til dette: Sketch har netop frigivet en indbygget løsning, der vil gøre deling lettere end at gøre avokado toast

Vi introducerer ... Skitse biblioteker!

Gør dig klar til at få dine joggebukser blæst lige til helvede.

Hvad er biblioteker?

Biblioteker er skitse-dokumenter, der kan bruges globalt.

Hvordan fungerer de?

  1. Åbn dine Sketch-præferencer, og gå til fanen "Biblioteker".
  2. Klik på "Tilføj bibliotek ..." og vælg en skissefil.
  3. Færdig!

Du kan nu bruge ethvert symbol fra denne Sketch-fil i ethvert dokument:

Når du tilføjer et eksternt symbol, ser de sådan ud på din lagliste:

Hver gang du gemmer ændringer i et symbol i hovedbiblioteket, får du besked om ændringerne og bliver bedt om at synkronisere ethvert dokument, der bruger symboler fra det bibliotek:

Det er let at gå glip af, men jeg har ikke noget imod, at det er ude af vejen. Jeg ønsker ikke at blive generet hvert 5. sekund, hvis nogen arbejder på masterfilen. Hvis du klikker på denne knap, får du muligheden for selektivt at synkronisere alle / alle opdateringer, der er foretaget i masterbiblioteket, og vise dig, hvad der er forskelligt mellem din kopi og masterkopien. Dette paradigme skal være kendt for designere med udviklingserfaring:

Hvis du vil redigere det eksterne symbol, skal du blot dobbeltklikke på det. Sketch spørger dig, hvordan du vil redigere det:

  • Fjern forbindelse fra biblioteket: Tænk på det som et andet niveau af “løsne fra symbolet”. I dette tilfælde løsner den først fra det eksterne bibliotek og opretter et lokalt symbol. På dette tidspunkt er det stadig et symbol, men symboltavlen findes nu faktisk i din lokale fil.
  • Åbn i originaldokument: Dette åbner masterbiblioteket og springer dig direkte til tegnebrættet for det symbol, du klikkede på.

Yep. Det er det.

Mine kære venner ... det er virkelig så let.

Prøv det selv

Her er et gratis skitsebibliotek med brugeravatarer, jeg har sammensat, så du kan bruge dem som eksterne symboler. Dette er nyttigt, hvis du altid ønsker at bruge den samme gruppe af mennesker i dine modeller, i stedet for at stole på indholdsgeneratorens tilfældighed.

FAQ

Blæser ikke eksterne symboler siden Symboler i min lokale fil?
Nix! Eksterne symboler føjes IKKE til din lokale symbolside. Det ville slags besejre formålet med et eksternt bibliotek, tror du ikke?

Mister jeg ikke alle symboloverskridelser til mit fancy-knopsymbol?
Nix! Sketch behandler eksterne symboler ligesom lokale symboler, så enhver tilsidesættelse, der er tilgængelig i din masterfil, vil også være tilgængelig i din lokale fil. Det betyder, at hvis din hovedfil har fem forskellige farvesymboler, der kan bruges til at bytte farve på et knopsymbol, vil de samme fem farver være tilgængelige i din lokale fil. HVORDAN COOL ER DET ?!

Mister jeg lokale tilsidesættelser, hvis jeg synkroniserer symbolændringer fra biblioteket?
Så længe mastersymbolet bevarer de samme attributter og lagsæt, skal alle dine tilsidesættelser bevares. Du mister kun tilsidesættelser, hvis du foretager ændringer til nogen indlejrede symboler i hovedsymbolet (dette er ikke anderledes end den måde, symbolerne fungerer i dag).
Arbejder det med tekstformater og lagformater?
Ikke endnu, men det er i Sketches køreplan.
Hvis jeg tilføjer symboler til et bibliotek, skal brugere af det bibliotek opdatere deres fil (er)?
Nix! Hvis du tilføjer nye symboler, vises disse bare i rullemenuen "Tilføj symbol fra biblioteket". Det var let!
Jeg vil ikke have Dave til at rodet med forældrebiblioteket. Er der en måde at administrere brugerrettigheder på?
Født, ikke lige nu. Du kan dog gøre dette gennem Dropbox- eller Google Drive-mappetilladelser.
Hvor mange biblioteker kan jeg have?
Jeg ved ikke… hvor mange stjerner er der på himlen?

Kan jeg henvise til et bibliotek i et bibliotek [i et bibliotek]?
Yep. Opdateringer kaskader imidlertid gennem hver enkelt, så du bliver nødt til at synkronisere dem alle individuelt (glem ikke).

Er dette den bedste ting siden skivet brød?
Det er smør. Fejl, bedre.

Nogle biblioteksinspiration

Biblioteker er fantastiske til at dele UI-komponenter på tværs af et designteam, men lad os ikke stoppe der. Således vil Sketch Biblioteker omforme den måde, du designer for evigt:

  1. Central Component Library: Administrer alle dine knapper, felter, input osv. Alt sammen i et centralt bibliotek. Mit designteam bruger UX Power Tools, og det fungerer perfekt med Sketch Libraries.
  2. Ikonbibliotek: Administrer alle dine ikoner i et bibliotek. Hver gang et nyt ikon tilføjes, vil det straks være tilgængeligt for alle designere.
  3. Illustrationsbibliotek: Administrer alle dine marketing- og produktillustrationer i et bibliotek. Produktdesignere og webdesignere kan henvise til illustrationer fra din fil. Det betyder ikke noget, hvis du ikke er færdig med dine illustrationer. De får besked, hver gang du foretager opdateringer.
  4. Brand Asset Library: Administrer alle dine brandaktiver i et bibliotek. Hvis alle designere henviser til et enkelt mærkesbibliotek, forbliver logoer og relaterede aktiver altid synkroniseret.
  5. Farvebibliotek: Administrer alle mærke- eller UI-farver i et bibliotek. Brug af indlejrede farvesymboler i knapper og ikoner for at give dig mulighed for at tilsidesætte deres farve? Henvisningsfarver fra dette farvebibliotek i andre biblioteker, og det vil være let at bedøve farver på tværs af flere dokumenter.
  6. Diagrammer-bibliotek: Administrer diagrammer, grafer og visualiseringer i et bibliotek. Disse har en tendens til at være temmelig oksekødede designs, så at huset i deres eget bibliotek vil holde UI-filer rene og performante.
  7. Individuelt komponentbibliotek: Administrer individuelle brugergrænseflade-komponenter i et bibliotek. Du ved, hvordan LESS, Sass og andre CSS-forprocessorer normalt modulariserer stilarter for lettere administration? Opdel dit designsystem i flere biblioteker, der henvises til hinanden for at få mere organisering og lettere indføring af symboler.

Et fantastisk forretningsbevægelse efter skitse

Denne indbyggede biblioteksfunktion bliver Kæmpe for Sketchs forretning.

Hvem bruger Sketch? Produktdesignere og webdesignere (eller hvad du end vil kalde disse roller). Det handler om det.

Skønt en stor befolkning udgør disse designere kun en lille del af designsamfundet. Og alle andre? Nå, de har en tendens til at foretrække mere illustrationsvenlige produkter som Affinity Designer og Adobe Illustrator:

  • Produktmærke: Adobe Illustrator. Definerer farver, skrifttyper, logoer osv. Opretter primære branding-aktiver.
  • Ikon Design: Adobe Illustrator, Affinity Designer. Opretter tilpassede ikoner til produkt og markedsføring.
  • Illustration: Adobe Illustrator, Affinity Designer. Opretter tilpassede illustrationer til produkt og markedsføring.
  • Data Viz: Excel, Illustrator, D3. Designer diagrammer, grafer og visualiseringer for produktet.

Det er mange mennesker og en masse indtægter, som Sketch går glip af.

Sketch Biblioteker vil gøre det meget lettere (og mere lokkende) for disse personer at komme ind i Sketch design-arbejdsgangen. I stedet for at eksportere SVG'er fra Illustrator og importere dem til Sketch, kan en illustratør administrere deres egen fil med illustrationer, så kan en produktdesigner henvise til disse tegninger som eksterne symboler. Når som helst illustratoren er nødt til at foretage opdateringer, de spreder sig direkte ind i UI-filen. Hvert aktiv kan nu deles. Nu og for altid. Det bliver så strålende, og jeg kan ikke vente til det offentliggøres!

Andet cool stof

Dette er bare nogle uorganiserede tanker og ideer, men jeg tror, ​​du finder inspiration i en eller alle af dem.

  • Biblioteker kan henvise til andre biblioteker. Woah. Leonardo DiCaprio ville have en stor glansdag med dette niveau af Inception.
  • Produktadministratorer kan nu gøre beskidte mockups med ægte symboler og komponenter, uden at du bekymrer dig om, at de skruer noget op i basekomponentbiblioteket.
  • Implementering af nye symboler kræver ikke synkronisering. De vises bare på listen over eksterne biblioteksymboler. Dette vil ikke forstyrre en brugers arbejdsgang.
  • Du kan definere InVision Craft-datasymboler i et eksternt bibliotek, og når en bruger bruger dem med Craft Duplicate, udfylder de automatisk dummy-data.
  • Du kan indlejre eksterne symboler i lokale symboler.
  • Du kan have to separate biblioteker med matchende symboler og komponenter. En til wireframes. En for høj tro. Du kan tilsidesætte mellem BIBLIOTEKER i stedet for bare mellem symboler.
  • Biblioteker kan være din egen personlige indholdsgenerator. Lav et bibliotek, der kun indeholder listeelementer. Eller kun avatarer. Eller kun diagrammer. Designarbejde kan nu distribueres og deles på tværs af et designteam. Evan kan lave diagrammerne. Jon kan gøre UI. Andy kan gøre branding. Illustrator kan gøre deres arbejde og foretage ændringer uden at forstyrre UI-designeren. Alle filer kan tale med hinanden.
  • Filer er ikke længere oppustet med hundreder af symboler, der ikke er brugt eller under.
  • Du kan oprette et bibliotek med tegnebrættesymboler (Holy Sh * t). Dette er som mærkatark Himmel.

Resumé

Det er unødvendigt at sige, at dette er en Kæmpe ny funktion, der vil have en meget positiv indflydelse for designteam i alle størrelser.

Det kunne ikke være lettere at bruge, så gå med legen til at begynde at lære, hvordan det fungerer. Du vil være en professionel om cirka 3 minutter.

Mens du venter på den offentlige udgivelse af Sketch 47 (jeg regner med, at de vil gøre mindst et par ugers betatest på denne), skal du tage dig en kopi af UX Power Tools Design System (er). De fungerer perfekt sammen med Biblioteker, og dit designteam opnår et niveau af hastighed og konsistens, som du ikke engang vidste, hvad der var muligt.

Når jeg ikke skriver om eksterne biblioteker, arbejder jeg på Sketch-designværktøjer hos UX Power Tools for at gøre dig til en bedre og mere effektiv designer.

Følg UX Power Tools på Twitter
Følg mig på Twitter