Hjælp designere til at overholde et designsystem med sketch

Hos Walmart Labs i Bentonville opretter vores interne designteam applikationer til associerede virksomheder (Walmarts navn for medarbejdere) i vores butikker, distributioncentre og virksomhedskontorer. Vi designer alt fra bærbare enheder til desktop-systemer, og vores brugers miljøer spænder fra lyst oplyste kontorer til lagre. For at hjælpe vores medarbejdere med at bevæge sig hurtigt på tværs af flere digitale værktøjer oprettede vi et system med delte interaktive og visuelle mønstre baseret på Googles materialedesign. Vores designsystem er bygget i Sketch, og dette indlæg deler erfaringer fra vores erfaring med at styre dette sprog.

Hvor skal man starte

Hvis du er en designer, der har brug for at oprette og administrere et bibliotek for at hjælpe andre med at overholde et designsystem, skal du læse videre. Vi har fundet følgende nyttigt, da vi designer digitale værktøjer, som over 1 million associerede virksomheder bruger i hele USA.

Designkonsistens kan være udfordrende i et virksomhedsmiljø, især med forskellige målgrupper og forskellige anvendelsesforhold. At huske og bruge alle specifikationerne korrekt kan være overvældende og tidskrævende. Designere, endda erfarne, kan muligvis løbende henvise til designspecifikationer. Dette bruger tid i en allerede aggressiv designcyklus.

Svaret? Bringe designsystemet til designerne i deres designværktøj.
Billedkredit: Walmart.

Vores designsystembibliotek - internt kendt som Ignite - er bygget i Sketch. Vi valgte Sketch, så design ikke behøver at bekymre sig om overholdelse af designsystemet, men i stedet kan de fokusere på at designe den ideelle oplevelse. Vores designere arbejder mere nøjagtigt, effektivt og konsekvent med dette værktøj. Det giver også designere mulighed for at oprette genanvendelige mønstre fra biblioteket og arve opdateringer, når biblioteket opdateres.

Et par nøglefunktioner inkluderer:

  • Konfigurerbart symbol for hver komponent i designsystemet
  • Retningslinjer som et indlejret symbol, adressering af polstring og fontbehandling
  • Tilpasningsbar tekst med andre elementer, der reagerer på tekstlængden
  • Mulighed for at tilføje tilpassede farver, skrifttyper og avatarer uden at ændre symbolbiblioteket

Indlejring af designspecifikationerne

Sketch er ikke et designsystem. , men det er et af vores foretrukne værktøjer. Når det administreres korrekt, kan Sketch hjælpe designere med at følge regler og retningslinjer problemfrit. Vi bringer designsystemets specifikationer til designeren ved at indlejre dem i hvert symbol. Designere kan fokusere mere på flowet og mindre på at huske reglerne.

Eksempel på en vandret guide og polstring indlejret i et fanesymbol. Billedkredit: Walmart.

Lodret vejledning

Guider kan vise, hvor man skal ændre størrelsen på symbolerne lodret. I nedenstående eksempel ændres en værktøjslinjens højde for liggende og portrættilstand. Denne teknik er nyttig til at ændre størrelse på komponenthøjden fra normal til tæt layout.

Eksempel på en lodret guide i et værktøjslinjesymbol. Billedkredit: Walmart

Grundlæggende guide til tekst

Tekstbaseline hjælper designere med at ændre højden på et symbol for at matche tekstens højde. Designere ændrer symbolhøjden, indtil basislinjen er på basislinjen for den sidste tekstlinje, ingen måling kræves.

Grundlæggende guider til tekst bruges i vid udstrækning til at hjælpe designere med at ændre størrelse på symboler, så de passer til tekst. Billedkredit: Walmart.

Adaptiv tekst

Vores designere indsætter ægte tekst og information i deres comps, og vores tekst og elementer i symboler reagerer på længden af ​​den nærliggende tekst. Symbolerne bevæger sig, når tekstlængden ændres for at opretholde polstret. Tekstdekorationen og polstring er sat i symbolet, så designere kan fokusere mere på indholdet.

Faner og aktiv indikator svarer på tekstlængden. Billedkredit: Walmart.Tekstfeltets kant og markør bevæger sig, når tekstlængden ændres. Billedkredit: Walmart.

Farve som symbol

Walmart har flere afdelinger og datterselskaber, hver med deres egen farvepalle. Tidligere ville det være meget kedeligt at opdatere alle farverne på et design til et andet område i virksomheden. Vi bliver nødt til at kopiere filen og skulle have to kopier til enhver opdatering.

Hver farve i vores palle er et symbol, inklusive den primære og sekundære farve og indlejres hvor som helst der er behov for farve. Dette har reduceret behovet for at fjerne symboler kraftigt og giver farvefleksibilitet.

Designere kan ændre et symbols farve og opacitet fra menuen for tilsidesættelse. Billedkredit: Walmart.

Opdater øjeblikkeligt farven på alle symboler

Designere kan udforske farver i hele appen ved at ændre bibliotekets farveindstillinger. Siden med farvetilpasning giver dem mulighed for at se resultater i realtid, da de ændrer den primære, sekundære og handlingsmæssige tekstfarve, ingen plugins kræves. Symboler, der bruger symbolfarver, opdateres øjeblikkeligt. Tekstfarver, der kan håndteres, styres gennem Sketchs tekststil. Dette gør det muligt at opdatere tekstfarve, mens symbolerne kan få adaptiv tekst.

Bibliotekets farvetema ændres ved at ændre de primære og sekundære farvesymboler. Billedkredit: Walmart.

Opdateringer er også forenklet. Designere bliver bedt om at opdatere biblioteket, når de åbner en fil, der bruger biblioteket. Når de accepteres, anvendes de nye farver.

Denne teknik giver også designere mulighed for at oprette, gemme og anvende tilpassede biblioteker med farvetemaer til ethvert andet projekt. Det reducerer også antallet af symboler, der skal oprettes og vedligeholdes i symbolbiblioteket.

Konfigurerbare symboler

Menuen for tilsidesættelse gør det muligt at konfigurere symboler i enhver tilstand eller variation beskrevet i designsystemet. Designere kan yderligere tilpasse dem ved at vælge relevante billeder, ikoner og farver.

Et 1-linjesymbol er konfigureret til at vise en avatar og valgt afkrydsningsfelt. Billedkredit: Walmart.

Vi reducerer unødvendige tilsidesættelsesmenuer ved at udføre lidt ekstra arbejde i biblioteket. For eksempel viser symboler med mørk baggrund kun den hvide version af ikoner.

Ingen grund til at vælge ikonfarve i nogle symboler. Hvide farvede ikoner findes til mørk baggrund og sortfarvede ikoner til lys baggrund. Billedkredit: Walmart.

Skabelon til klistermærke

Brug af bibliotekssymbolerne giver klistermærket ark almindelige mønstre og en mixinside for at få tilpassede farver, ikoner og avatarer til at vises i relevante bibliotekssymboler. Det indeholder også en oversigtsside, der indeholder noter, kommentarer og de primære og sekundære farver, der er brugt i designet

Mixins: tilføj tilpasset farve, ikoner og avatarer

Gennem vores iterationer fandt vi designere, der var nødvendige for at tilføje tilpassede ikoner, farver og avatarer. At fjerne et symbol forhindrede det i at modtage fremtidige opdateringer, og Select Image fungerer kun for en enkelt forekomst af symbolet.

Uden at ændre Ignite-biblioteket kan designere tilføje tilpassede ikoner, farver og billeder vises i Ignite-symboler. Sketch bruger symboldimensioner til at populere tilsidesætter menuer. Kunstplader med passende dimensioner findes i klistermærket.

Når kunstpladerne i klistermærket er konverteret til symboler, vises de i alle relevante tilsidesættelsesmenuer. Billedkredit: Walmart.

For at tilføje et nyt ikon konverterer designerne det medfølgende ikon-kunstplade til et symbol. Symbolet vises nu i enhver menu til tilsidesættelse med de eksisterende ikoner, der leveres med antændelse.

Eksempler på symbolkonfiguration

Et enkelt symbol kan konfigureres på flere måder. Klistermærket viser de forskellige konfigurationer for de mest almindelige symboler.

Denne side i klistermærket indeholder kun 3 symboler, men viser de forskellige konfigurationer, der er mulige. Billedkredit: Walmart.

Klistermærkeark som en skabelon

Klistermærker kan blive rodede, jo mere de bruges. Ting flyttes rundt, når du kopierer og indsætter dem. Vi giver en nem måde at tilføje klistermærket til Sketchs skabelonmappe. Ligesom at installere apps på en Mac, trækker designere filen til mappen.

Der leveres et installationsprogram til let at gøre klistermærken tilgængelige som en skitskabelon. Billedkredit: Walmart.

Nyt klistermærkeark fra skabelon

Efter installation af klistermærket kan designere få en ny kopi til at starte et projekt ved at vælge klistermærket fra skabelonmenuen.

En frisk kopi af klistermærket kan oprettes fra menuen Skabeloner. Billedkredit: Walmart.

Klistermærket bruger symboler fra biblioteket, men kan opgraderes uafhængigt. Dette gør det muligt at tilføje nye mønstre til klistermærket, uden at vente på den næste udgivelse af biblioteket.

Håndtering og udgivelse af biblioteket

Ignite Sketch-biblioteket behandles som et produkt med en udgivelsescyklus, funktionens efterslæb, versionering og udgivelsesnotater.

Versionsnummerering

Vi forsøger at opdatere biblioteksymboler på en måde, der ikke ødelægger design, når du opgraderer. Versionsnummeret fortæller designerne kapacitetsniveauet med den bibliotekversion, de i øjeblikket bruger.

Billedkredit: Walmart.

Versionsnummeret vises i skitsebibliotekets miniature, hvilket gør det nemt at se, hvilken version der er indlæst. Versionen kan også findes i symbolet navn på udgivelsesnotater.

Biblioteksversionsnummeret findes i skabelonminiatyren i udgivelsesnotatens symbolnavn .. Billedkredit: Walmart.

Fordeling

GitHub er ikke kun til kode. Det kan bruges til at administrere ikke-tekstfiler og giver en enkel og let at oprette en produktside.

GitHub-side bruges til at generere produktsiden. Billedkredit: Walmart.

Designere henter en lynlåst mappe, der indeholder den nyeste version og de tidligere versioner. Hvis designere oplever et problem, kan de hurtigt rulle tilbage til en tidligere version.

Udgivelses noter

Det er vigtigt at informere designere om nye funktioner og fejlrettelser. GitHub Releases bruges til at offentliggøre udgivelsesnotaterne, med biblioteket vedlagt. De seneste udgivelsesnotater findes også i biblioteket og kan fås adgang til dem fra symbolmenuen.

Eksempel på udgivelsesnotater ved hjælp af GitHub-udgivelser. Billedkredit: Walmart.Udgivelsesnotater er tilgængelige i biblioteket som et symbol. Billedkredit: Walmart.

Sporing af fejl og anmodninger om funktion

GitHub-spørgsmål giver en nem måde at indsende fejl og anmodninger om funktion. Hver indsendelse er en diskussionstråd, hvor enhver kan deltage i samtalen. Etiketter, projekter, milepæle og tildelt person kan tilføjes til tackling.

Bugs og funktionsanmodninger kan spores og diskuteres ved hjælp af GitHub-problemer. Billedkredit: Walmart.

En projektside kan oprettes til den næste udgivelse, og alle relevante bug / funktionsindlæg kan tilføjes via tags, hvilket gør det nemt at spore nøjagtigt, hvad der vil være til den næste udgivelse.

Meddelelse

Vi har en dedikeret Slack-kanal, der skal være tilgængelig for designere og annoncere nye udgivelser. For hver udgivelse lægger vi udgivelsesnotaterne og linker til produktsiden.

Nu er det din tur

Gennem kontinuerlig feedback og iteration stræber vi efter at forbedre biblioteket og hjælpe vores designere med at designe mere nøjagtigt, effektivt og konsistent.

Det kan være værd at investere at oprette et Sketch-symbolbibliotek, hvis du finder vanskeligt med konsistensen eller bruger for meget tid på at genskabe de samme komponenter.

Det kan være vanskeligt at finde den rigtige balance mellem et låst og ekstremt fleksibelt symbol. Start små, del ofte med designere, og iterere hurtigt. Hvis biblioteket hjælper designere med at være mere konsistente og bevæge sig hurtigere, behøver du ikke at sælge det. Designere vil kræve det.