Version 47 af Sketch så den længe ventede introduktion af biblioteker, som giver dig mulighed for at synkronisere dine symboler globalt på tværs af alle dine Sketch-filer. Designsystemer kan især drage fordel af en funktion som denne - at være i stand til at få en tilgængelig måde at indbringe designsystemaktiver på, mens de sikrer, at de forbliver ajour for alle, er en designer's drøm. Efter at have prøvet alt fra InVisions håndværk til at oprette vores eget Sketch Plugin, var vi glade for endelig at have dette i Sketch som en indbygget funktion. Her er nogle af de beslutninger, vi ankom til, og lektioner, vi lærte, da vi satte vores designsystem i et bibliotek.

Mål for vores bibliotek

For at forstå nogle af de tanker, der gik ind i vores beslutninger, her er en kort oversigt over, hvad målene med vores bibliotek var:

  1. En one-stop shop for vores designere. Bare en fil, de kunne trække i, og har den seneste, som vores designsystem har at tilbyde.
  2. Så tæt på en 1: 1-kamp som muligt med vores kodede komponenter, uanset platform, både visuelt og strukturelt.
  3. Let at vedligeholde. Komponentopdateringer eller tilføjelser skal være enkle, så designere får det seneste uden meget ventetid.

Indlejret vs. single

I denne fremragende Sketch Together-video snakker Pablo Stanley om, hvordan man hekker biblioteker. Hvis du gør det, kan du opdele ting som farver og komponenter i forskellige Sketch-filer og derefter henvisesymboler på tværs af disse filer. Hvis du foretager en opdatering til et symbol i en af ​​filerne, udbredes den stadig til de andre filer, der refererer til dette symbol.

Den anden mulighed er at lægge alt i én fil. Du får ikke den rene adskillelse, som at have separate Sketch-filer giver dig, men til vores formål endte det faktisk med at fungere bedre, fordi:

  • Vedligeholdelse er lettere, da vi kun har brug for at have en fil åben, når vi opdaterer biblioteket (mål nr. 3).
  • Det kræver, at vores designere tilføjer kun et bibliotek (mål nr. 1).

Brug af sider til organisering

At dumpe alle vores farver, ikoner, komponenter og så videre i en fil er ikke den første ting, der kommer ind i tankerne, når man tænker “let at vedligeholde”. Heldigvis kan du opdele dit bibliotek i sider inden for Sketch. Her er en oversigt over, hvordan vi gjorde vores:

At holde ting adskilt med Pages gør endda et stort bibliotek let at vedligeholde.

Vigtige dele af vores designsystem (farve, type, ikoner) er øverst, og derefter har vi simpelthen anført vores komponenter alfabetisk. I bunden er der to yderligere sider. Testsiden, hvis du ikke havde gætt det, er en side, hvor vi hurtigt kan teste eventuelle nye symboler, vi tilføjer. Bibliotekets forhåndsvisning bruger Sketch Hunt's freebie til at give vores bibliotek et brugerdefineret eksempelbillede, når du går til at tilføje biblioteket i Sketches præferencer (dette understøttes nu som standard i Sketch fra og med v48).

Navnsymboler

Elementer i menuen Symboler kan grupperes efter, hvordan du navngiver symboler. At adskille ting med a / sætter dem i en ny menugruppe. Ved hjælp af den organisation, vi skitserede ovenfor, og ved, hvordan tingene grupperes på komponentsiden, gik vi med det, der føltes mest logisk; for noget som knapper, der ser sådan ud:

Hvilken skaber en menu, der ser sådan ud (redigeret en smule for at gøre det lettere at se):

Tilføjelse af farve

I øjeblikket har Sketch ikke en måde at dele farver med funktionen Biblioteker. Sikker på, der er plugins, der giver dig mulighed for at oprette delelige paletter, men det stred imod vores mål om en one-stop-shop og let vedligeholdelighed. I stedet skabte vi vores farver ved hjælp af bare gamle gamle rektangler.

Vi bruger vores farvesymboler som den vigtigste byggesten til vores andre komponenter.

Selvom det ikke er ideelt, er det ikke for meget besvær for vores designere, da et flertal af deres farvebehov skal håndteres på hver enkelt komponents symboloverskridelser. Plus, det giver os mulighed for at bruge de farvede rektangler til at opbygge disse faktiske komponenter (forklaret nedenfor). Hvis vi foretager en opdatering til farven, opdaterer den alle komponenter, der bruger det farvesymbol.

Vores farver på hovedniveau (f.eks. Mærke, værktøjer, baggrundsfarver) findes på siden Farver og grupperes i overensstemmelse hermed. Farver, der er specifikke for en komponent, går på denne komponents side for at bevare den lette vedligeholdelse. Vi kan stadig oprette rektangel-symboler, der om nødvendigt refererer til farver på hovedniveau, hvilket gør opdateringer senere meget hurtigere.

Disse hjælpefarver kan efter behov bringes ind på en hvilken som helst anden komponentside - knapper, toasts, ikoner osv.

Den sidste smule husrengøring, vi var nødt til at gøre, var at sørge for, at når du åbnede en farveoverskridelse, blev du ikke sprængt med en enorm liste over farver. For at afhjælpe dette har vi simpelthen dimensioneret disse farverektangler i trin på 10, da gruppering af symboloverskridelser er baseret på størrelse. For eksempel er mærkefarver 20px x 20px, nyttefarver 30px x 30px osv. Når en designer nu ønsker at skifte til en anden ikonfarve, ser de kun ikonfarverne og ikke alle andre farver i biblioteket.

Tilføjelse af ikoner

Ikoner blev håndteret på lignende måde som farver, idet vi logisk grupperede dem efter deres brug (navigation, sport, filtyper osv.). For at give designere mulighed for at skifte mellem de forskellige farver, vi har til ikoner, tilføjede vi simpelthen disse farver som masker.

Hvert ikon indeholder et farvemærke fra vores liste over ikonfarver.

Husk, at størrelsen af ​​tingene på samme måde får dem til at vises i menuen for tilsidesættelse. Med det i tankerne har vi dimensioneret vores ikonfarver ens, så når en designer skifter en farve, ser de kun de tilgængelige farver til ikoner.

En udfordring, vi havde, var at håndtere de tre forskellige størrelser, som vores ikoner kommer i. For at komme omkring dette oprettede vi simpelthen tre symboler hver i deres rigtige størrelse med et standardikon (vores logo). Da vi bruger et symbol, kan en designer nu bare vælge et andet ikon fra overstyringspanelet - husk at du kan ændre størrelsen på et indsat symbol til dit hjerte indhold uden at påvirke det, du ser i panelet Tilsidesættelse. Med en masse ikoner kan det blive en smuk listig liste, især sammenlignet med den pænt kategoriserede måde at gøre ikoner på ovenfor. Vi har ikke mange tilfælde, hvor der er brug for et ikon i andet end størrelsesmedie, så denne løsning, eh, fungerer for os.

Det samme symbol, lige ændret størrelse.

Tilføjelse af Type

Dette er et andet område, hvor biblioteker-funktionen ikke helt opfylder vores behov. Redigering af tekst i panelet Tilsidesættelse kan være en smule smerte i betragtning af hvor lille tekstfeltet er. Lav bare dine oprindelige Meget lignende farver, der er Sketch-plugins, der kan håndtere at indtaste Type i dine Sketch-dokumenter som tekststilarter, men de går imod vores let at vedligeholde og one-stop-shop-mål.

Vi besluttede i sidste ende at oprette symboler alligevel. Designere kan enten bruge tekstboksen i panelet Tilsidesættelse eller bare fjerne det fra symbol og redigere teksten, som de normalt ville gøre. Og fra Sketch v48 kan du forstørre tekstboksen i panelet Tilsidesættelse ved at øge mængden af ​​tekst i symbolet som standard.

Mængden af ​​tekst i symbolet bestemmer, hvor stor en tekstboks du får i panelet for tilsidesættelse.

Der er en sidste ting, vi er nødt til at adressere med tekst og det er farver. Med vores tekst er den allerede indstillet i komponenten korrekt. Men hvad med et andet miljø, tema eller ting som fejltilstande? Til dette er vi igen afhængige af størrelsen af ​​symbolet for at bestemme, hvad der vises i overstyringerne. For noget som et formularmærke, skal vi bare sikre dig, at de bestemte tekstsymboler er alle i samme størrelse.

Forskellige farvede etiketter i samme størrelse gør det nemt for vores designere at vælge blandt de tilladte farver til noget som formularetiketter.

Tilføjelse af komponenter

Efter at have oprettet alle de hårde ting, var det faktisk ret simpelt at gøre knapperne, modalerne, skålene osv. For noget som Modals henter vi bare den rigtige baggrundsfarve, tilføjer et typesymbol med en god standardmeddelelse og indtaster til sidst Luk-ikonet. På dette tidspunkt kommer vi meget tæt på at lave symboler som hvordan vi ville gøre med React.

Og det er forsætligt, da vi ønsker, at vores symboler skal være så tæt på en 1: 1-match af vores komponenter som muligt. Til dette formål navngiver vi symbolet præcis, hvordan vi navngiver vores komponentrekvisitter i kode. For at gøre det endnu mere tydeligt for vores designere at dette er komponentrekvisita, holder vi endda navnene med små bogstaver. Alt, der faktisk ikke er en del af komponentens kode (f.eks. Polstring af blokke, som vi vil diskutere nedenfor), vi titler sag. At holde symboloverskridelser, der er navngivet identisk med komponentrekvisitterne, er en fantastisk måde at bygge bro på den designer / udvikler-diskussion, når det er tid til at opbygge grænsefladerne.

Når designere og udviklere taler, skal de bruge det samme sprog. Vores sketchoverskridende navngivning matcher navngivningen i de faktiske kodede komponenter.

Tips & tricks

Her er et par andre ting, vi lærte, da vi bygger ud komponenter, der kan hjælpe dig:

  • Gør tingene lettere for dig, og download plug-in til Sketch Symbol Organizer. Du kan organisere dine symboler alfabetisk og gruppere ting baseret på navnet. Derudover vil det endda placere tingene ud, hvordan du vil. En stor timesaver.
  • Rækkefølgen på dine lag i dine symboler betyder noget. Hvordan de er ordnet i symbolet, er, hvordan de bliver bestilt i panelet Tilsidesættelse.
  • Det er værd at gentage her for millionste gang, at størrelsen på dine lag også betyder noget. Husk: Sådan kan ting som baggrunde, type, ikoner osv. Grupperes.
  • Du har sandsynligvis symboler, som dine designere ikke har brug for, men er vigtige for sammensætningen af ​​dine komponenter. Vi besluttede at oprette et menupunkt _Building Blocks (understregningen holder det forankret til bunden), der fungerer lidt som en skrammeskuffe. Disse elementer forbliver på den respektive komponents side, men navngives med præfixet _Building Blocks for at sikre, at de alle går under det menupunkt.
Præfiksering af genstande, som du ikke ønsker at blive vist, ligesom vi har med
  • Skitse håndteres ikke i øjeblikket indlejret symbol, der ændrer størrelsen meget godt. For at komme omkring dette opretter vi normalt det, vi kalder “afstandsklodser”. Et eksempel på, hvor dette kan være nødvendigt, er knapper; du vælger en knap, giver den mere tekst end standardindholdet, og pludselig er polstret ude af vejen. Til dette har vi et show / skjul afstand blokeringssymbol, der falder i halvtransparente “blokke”. Designeren har nu bare brug for at ændre størrelsen på knappen, indtil blokke stiller op.
Disse blokke kan føjes til en hvilken som helst komponent for at reducere gætterne, når det kommer til størrelse.

Gør det tilgængeligt

Efter at biblioteket var afsluttet, havde vi brug for en måde at sikre, at det altid ville være opdateret for vores designere. Vi bruger Google Drive, så det var det åbenlyse sted at sige det. Vi låste adgangen til selve biblioteksfilen for at sikre, at der ikke skete unødvendige sletninger eller tilføjelser, og skrev derefter en vejledning til Kom godt i gang.

En af vores funktioner i Kom godt i gang-guide er instruktioner om, hvordan du konfigureres med Sketch Runner. Selvom dette strider mod vores mål om at være en one-stop-shop, finder vi fordelene ved at bruge dette plugin går langt ud over bare at bruge det med vores bibliotek - det er et virkelig uvurderligt værktøj.

Med Sketch Runner kan du hurtigt indsætte symboler bare ved at indtaste deres navn, som for mange mennesker er ret hurtigere end at gå gennem menuerne. Vi anbefalede vores designere at slå Fuzzy Search fra under indstillingerne og tilføje “_Building Blocks” til det ignorerede præfiks i indstillingerne.

Her er vores anbefalede indstillinger til Runner.

Siden lanceringen har vi modtaget en masse feedback om, hvor meget tid der er sparet ved at bruge biblioteket. Vi ser frem til at Sketch fortsætter med at gøre forbedringer i fremtiden for at gøre det til et endnu mere imponerende værktøj.