Genskaber et levende designsystem i sketch

Vores uendelige rejse for at forbedre arbejdsgang og samarbejde

carwow har for nylig oplevet hurtig vækst. Når vi bygger og udvikler vores produkt, har vi fundet det er vigtigt at finde måder at kommunikere til alle med hensyn til design.

Helt fra starten oprettede teamet et live online styleguide, det giver vores udviklingshold mulighed for at bevæge sig hurtigere. Problemer opstod, da carwows designteam ikke havde noget lignende oprettet i Sketch, vores valgte designværktøj. Som et team fandt vi, at designere spildt en god tid ved at producere design ved at kopiere og indsætte elementer fra andre filer. For at hjælpe med at etablere en hurtigere arbejdsgang og bringe designkonsistensen til produktet, omfavnede vi Sketchs kraft ved at skabe komponenter som symboler.

Begyndelsen

Første skridt var at etablere en handlingsplan for at tackle problemet. Vores svar var at oprette en Sketch-fil, der består af komponenter, der spejler det levende styleguide.

Rammerne fokuserede først på primitive elementer som grundlæggende typografi, farve og layout. Bevægelse over på mere komplekse komponenter, når vi først havde konverteret og skabt hele den levende styleguide til genanvendelige skissesymboler. Let-peasy ikke?

Det var ikke en nem opgave.

Vi indså hurtigt, at for nogle komponenter, såsom knapper eller indgange, måtte vi faktisk skabe en masse forskellige symboler til alle de potentielle variationer!

Nogle af symbolerne oprettet til inputvariationerne

Når det gælder navngivningskonventioner, organiserer Sketch automatisk symboler i mapper, når du anbringer et skråstreg / foran et navn. Dette er virkelig nyttigt, da det skaber et pænt hierarki og fungerer godt med Sketch Runner-plugin. Det giver dig mulighed for hurtigt at finde det, du leder efter. For eksempel er det sådan, hvordan knapkomponenten er organiseret, knap / størrelse / stil.

Vi fulgte det samme designmønster for hver af komponenterne for at gøre alt forståeligt og vedligeholdeligt.

Replikering af udviklernes arbejdsgang

Når vi havde rammerne på plads til styleguiden og konverterede komponenter til symboler, var det næste skridt at gøre det delbart med teamet. Vi var nødt til at finde ud af, hvordan vi kunne gøre overdragelsen så enkel som muligt uden at skabe konflikter.

Som designere har vi alle lidt under dette nummer i fortiden:

Til overdragelse hentede vi inspiration fra, hvad udviklere allerede gør ved hjælp af GIT. Designteamet kunne godt lide, at du kunne arbejde i harmoni uden at omskrive tidligere filer, forgrene og arbejde på filer på samme tid og flette ændringer til en masterfil for en kilde til sandhed.

Brug af GIT

For at dele styleguiden på tværs af designteamet oprettede vi en repo til vores styleguide ved at oprette en symlinket Sketch-skabelon-fil i en repo-mappe, vi var derefter frie til at begynde at begå designændringer.

Ved hjælp af GIT-kraften kunne designteamet se en forpligtelse hver gang en designer foretog en ændring og let synkronisere med masteren for at trække ændringer fra det ajourførte styleguide.

At arbejde på denne måde betød at have synliggørelse af, hvilke ændringer der skete, og hvornår, hvem der lavede dem og mest af alt var vigtigt at reducere konflikter til stort set nul.

Ja, jeg forpligter mig til emojier!

Vi fandt en ulempe, GIT er designet til at arbejde med kode, ikke grafik. Koden gemmes som enkle tekstfiler, mens grafikfiler er komplekse og gemmes i et binært filformat, hvilket betyder, at kun en PR (pull-anmodning) kunne laves ad gangen

Og det var da vi hørte om et nyt fantastisk værktøj: Abstrakt.

Første indtryk af Abstract

Abstrakt kan betragtes som GIT for designere, det er et kraftfuldt værktøj, der muliggør versionskontrol, ændringssporing og den bedste funktion for en designer: at være i stand til visuelt at sammenligne ændringer i en Sketch-fil. Alt dette uden at skulle åbne Terminal og bruge kommandolinjen (som jeg faktisk savner ). Abstrakt er også det bedste sted at indsamle og gemme feedback, da det indeholder det fyldigere billede.

Brug af Slack magt!

Kommunikation er nøglen, vi har også oprettet en Slack-integration, der hjælper med at holde teamet i løkken, ved nøjagtigt, hvad folk arbejder på, takket være forklarende meddelelser, der følger med hver commit (RIP-standups).

Endelige tanker

carwow er begejstret for vores rejse, og vi vil snart følge op på, hvordan Abstract hjælper os med at nå vores mål. Det er også interessant at bemærke, at vi på en positiv side endelig oplever mindre forskelle mellem hvordan designere og udviklere fungerer. Jeg håber, at begge discipliner i den nærmeste fremtid bliver tættere på hinanden.

Særlig tak til Ragnar, der hjalp os meget ved først at gøre oprettelsen af ​​styleguiden mulig, for det andet ved at hjælpe os med at bevare det med hans enorme OCD-færdigheder og i sidste ende for at hjælpe os med den generelle arbejdsgang ヽ (* ・ ω ・) ノ

Hvis du nød denne artikel, skal du vise mig lidt kærlighed ved at klappe

Følg mine afslappede tanker på Twitter
Se min samling af pixels på Dribbble