Design Systems hos GitHub

Designsystemer er blevet kernen i den måde, vi designer og bygger på GitHub. Siden 2011 har GitHub-designere dokumenteret UI-mønstre og delt fælles stilarter. I 2012 blev CSS og andre aktiver pakket ind i en Ruby Gem til brug på GitHub-websteder - denne pakke fik navnet Primer. Primer blev fortsat brugt internt i årevis, før hun til sidst havde sin CSS og ledsagende dokumentation åben som Primer CSS. I 2016 blev designsystemteamet dannet med sine første fuldtidsansatte. Dette indlæg deler en kort historie om, hvordan teamet voksede, hvad vi har arbejdet på, og hvad der er næste.

Fra græsrødder

Produktdesignere og webdesignere på GitHub bidrager med produktionskoden og hjælper ofte med at implementere deres egne designs. Nogle designere kommer dybere ind i stakken, men hvert produkt og webdesigner skriver CSS. Dette betyder, at designere er primære brugere af Primer, vores designsystem, og er ofte de første, der bemærker, når der er problemer med stilarter eller huller i dokumentation.

Primer-dokumentationswebsted i 2015.

Da jeg begyndte at arbejde på GitHub i slutningen af ​​2015, bemærkede jeg, at der var mange udokumenterede mønstre, jeg var nødt til at skrive en masse nye CSS for at implementere design, og at der ikke var åbenlyse underliggende systemer, der forbinder alle brikkerne sammen. Jeg vidste, at ting kunne være bedre, og jeg var begejstret for forbedringer - jeg opdagede hurtigt, at jeg ikke var den eneste, der følte på denne måde. Der var flere mennesker, der arbejdede på at forbedre tingene, men arbejdede ikke sammen. Med støtte fra designledere begyndte en gruppe af os at mødes regelmæssigt for at diskutere forbedringer af Primer og prioritere arbejde - dette var begyndelsen på designsystemteamet.

En planlægning og brainstorming med designledere under et team-topmøde i marts 2016. Vi er alle fjerntliggende, så vi får mest muligt ud af personlig tid.

Viser vores værdi

Vi startede med at tackle de største påvirkningsproblemer, der løste nogle af de største smertepunkter for mennesker, der implementerer design.

Vi reducerede behovet for, at folk skulle skrive ny CSS ved at tilføje værktøjer til primitiver som typografi, farve og afstand, og ved at gøre vores komponenter lettere at genbruge flere steder; vi arbejdede med at konsolidere mønstre ved at reducere gentagelse af kode og fjerne unødvendige designvariationer; vi gjorde brug af tidligere underudnyttede Sass-funktioner ved at definere globale variabler for delte systemstilarter; og vi introducerede ensartede og let at internalisere navnekonventioner.

Mens vi forbedrede koden, opdaterede vi vores dokumentation og startede med at øge dækningen for implementering af mønstre, efterfulgt af tilføjelse af understøttende dokumentation såsom kodestilprincipper og tilgængelighedsretningslinjer.

En tidlig version af den nye guide til intern stil i 2016.

At tackle vores største smertepunkter og arbejde med opgaver, der gav designere og udviklere stor værdi på GitHub, hjalp os med at begynde at opbygge anerkendelse og vise værdien af ​​designsystemer. Ved udgangen af ​​2016 havde vi et nyt internt dokumentationssted med meget mere dækning, vi havde forbedret Primer for at gøre det lettere at prototype og implementere design uden at skrive et ton nyt CSS, og vi havde vores første heltids designteamteam medlemmer - mig selv og Jon Rohan.

Voksende smerter

Efterhånden som det nye system blev brugt mere, voksede anmodninger om vores opmærksomhed, og det blev stadig vanskeligere at holde styr på anmodninger. På GitHub vil folk nævne et team på en pull-anmodning eller et problem for at anmode om feedback, eller for at holde teamet i løkken om det kommende arbejde - denne omtale sender en anmeldelse til teamet via GitHub eller via e-mail (afhængigt af brugerindstillingerne), og er tilgængelig som et filter eller søgeparameter. Det kan være svært at holde styr på disse underretninger, når der er en stor mængde trafik (noget produktgruppen prøver at forbedre). Vi manglede ofte vores hold omtaler, som ikke gjorde meget for vores omdømme, og det betød også, at vi manglede muligheder for at markedsføre det nye system. På et team-hack-uge besluttede vi, at dette var et af vores højeste prioriterede spørgsmål, vi skulle løse.

Vi besluttede at etablere flere nye processer:

  1. Kommuniker opdateringer mere vidtgående gennem teamindlæg: Vi har et internt værktøj kaldet "Team", som GitHub-personale typisk bruger til at annoncere vigtige interne opdateringer, nye funktionsskibe og nye ansættelser. Vi begyndte at bruge teamindlæg til at fortælle folk om nye Primer- og stilguideopdateringer, for at give folk et heads up, da vi sendte store kodeændringer og dele mere information bag vores beslutninger.
  2. Gør status for stilarter mere indlysende: med refaktoren for mange af vores stilarter skiftede ting konstant, vi var nødt til at kommunikere så klart, at folk vidste, hvad der var sikkert at bruge. For at gøre status klar, tilføjede vi en Changelog, der bliver opdateret med hver udgivelse, og vi føjede statusetiketter til en modulens dokumentationsside. Ligesom statusetiketterne i Lightning Design System er vores: stabil, ny udgivelse, i gennemgang, eksperimentel og udgået.
  3. Introducer on-call duty rotation: De fleste hold på GitHub har en on-call duty rotation, som vi kalder First Responder. Den, der er på vagt, er ansvarlig for at triage problemer og svare på anmodninger om hjælp eller kode gennemgang. At have en person på vagt betyder, at resten af ​​teamet kan forblive fokuseret på dybt arbejde.
Et praktisk Hubot-script i Slack lader os udskrive en liste over emner, der har brug for opmærksomhed fra First Responder.

Skalerer vores påvirkning

Da Primer blev brugt mere på tværs af GitHub.com og andre GitHub-websteder, var vi nødt til at skalere vores egne processer, så vi kunne være mere effektive med vores tid og sikre, at folk kunne bruge Primer med selvtillid.

Forbedring af vores workflow til frigivelse

Et af de største smertepunkter for vores team var at offentliggøre nye udgivelser af Primer. Hvert modul (en komponent eller et sæt relaterede stilarter) blev hostet i sit eget depot på GitHub og blev offentliggjort som sin egen pakke på npm. Dette gjorde det vanskeligt at foretage systemdækkende opdateringer på tværs af alle moduler, såsom opdatering af typografivariabler. Vi kæmpede med ødelagte builds, som fik os og andre hold til at bruge Primer masser af problemer. Ofte vil folk glemme at ramme en pakkeversion eller glemme at opdatere afhængighed eller ikke forstå den fulde virkning af ændringer, de foretog på de websteder, der brugte Primer. Vi havde brug for en mere robust publiceringsarbejdsgang og bedre kontrol af de ændringer, vi foretog.

Vores løsning var at flytte alle vores modullagre i en monorepo og bruge Lerna til at hjælpe os med at administrere versionopdateringer og offentliggøre nye udgivelser. Efter de indledende opdateringer itereres vi på vores publicerings-scripts ved hjælp af Travis CI til automatisk at offentliggøre alfa-versioner på pull-anmodninger - dette betyder, at hver gang nogen åbner en pull-anmodning eller skubber op ændringer, kan de teste deres ændringer ved at installere alpha-frigivelsen i deres projekt. Dette er nyttigt til at teste ændringer i GitHub.com, før du sender den nye udgivelse.

Ved hjælp af Travis CI offentliggøres nye alfaversioner til npm, når nogen fremsætter en ny pull-anmodning eller skubber ændringer op.

At få robotter til at gøre arbejdet

Vi bemærkede med tiden, at der var fælles mønstre med den feedback, vi gav ved kodevurdering - vi gentog den samme feedback for ting som at bruge variabler eller værktøjer i stedet for at skrive ny CSS. Vi skrev et script til en bot, der automatisk kommenterer pull-anmodninger til os, denne kommentar fortæller pull-anmodningsforfatteren, hvordan man løser deres ændringer og giver et link til dokumentation i stilguiden. Dette sparer os tid med kodegennemgang og hjælper flere mennesker med at lære om vores designsystem.

Servbot kommenterer en pull-anmodning.

Vi fortsætter med at se efter gentagne processer, og hvordan vi kan forbedre og automatisere dem. I år opdaterede vi vores Octicons-udgave af workflow og brugte GitHub's open-sourced bot, Probot, med Figma API og Travis CI til at automatisere dele af arbejdsgangen. Du kan læse mere om dette på GitHub-bloggen.

Arbejdstid

Ud over First Responder begyndte vi at arbejde kontortid 3 dage om ugen for at give folk en regelmæssig tid til at stille os spørgsmål personligt. Dette bruges til parring på kode, snak gennem produktopdateringer, der har brug for vores support, og svar på generelle spørgsmål.

Vi foretager åbningstider via Slack, så det er synligt for alle i kanalen. Hvis vi glemmer, minder slackbot os om!

Skalerer holdet

At kunne vise værdien af ​​designsystemer har gjort det muligt for mig at vokse teamet. Som holdets manager har jeg været i stand til at gøre noget ved nyt personale ved at vise den positive indflydelse, vi har gjort, såsom hvordan hold har været i stand til at sende nye funktioner mere effektivt, eller at udviklere er i stand til at komme længere med front-design uden at skulle vente på designhjælp. I stedet for at tale om, hvad vi ikke kan gøre, når vi beder om ansættelse, fokuserer jeg på at vise alt det store arbejde, vi allerede laver, og derefter male et billede af, hvad vi ellers kunne gøre med flere mennesker.

I 2017 ansat vi en ny systemdesigner, Shawn. Shawn kom til os fra de amerikanske webstandarder. Han har tidligere erfaring med designrelaterede roller og designsystemer, og han er i stand til at tage udviklingsbeslutninger under hensyntagen til design.

I år (2018) ansat vi vores første fuldtidsingeniør, Emily. Tidligere arbejdede hun på front-end hos Buffer og bidrog til deres komponentbibliotek. Emily har erfaring med React.js og tilgængelighed, som er vigtig for vores team og aktuelle projekter.

Over tid er vi ansat til forskellige typer færdigheder til at afbalancere vores team. Hvis du er interesseret i at blive medlem af teamet, ansætter vi!

Uanset om vi ansætter designere eller ingeniører, ser vi normalt efter mennesker med nogle generelle færdigheder. Vi vil have udviklere end have designfølsomhed, så de kan træffe gode beslutninger om, hvordan systemer fungerer, når de implementerer design, og vi ønsker designere, der har en vis kodefærdighed og kan være empatiske med og designe til udvikleroplevelsen. Dette er vigtigt for os, fordi designsystemer er hvor design og teknik mødes. De skal levere et samlet designsprog og arbejde for både designere og ingeniører.

Skalerer mig selv

Som holdets leder og manager var jeg også nødt til at skalere min indflydelse. Jeg administrerer flere mennesker, end jeg gjorde for et år siden, og jeg vil administrere flere mennesker og teams i slutningen af ​​2018, når jeg begynder at bygge designprojekter. Det betyder, at jeg ikke kan udføre individuelle bidragydere meget ofte mere. Tidligere i år fandt jeg, at jeg begyndte at blive en flaskehals og har derfor arbejdet på at være mere en redaktør end en forfatter til designsystemarbejde.

Tidligere har jeg bidraget til mere af det visuelle designarbejde for Primer og har været den vigtigste beslutningstager om design af sin API. Jeg lærer at lade andre medlemmer af teamet tage føringen med disse beslutninger, og hvor der er huller, lærer jeg at lære disse færdigheder til andre.

Skalerer, hvordan vi bygger

Et af vores populære møder (ja møder kan være sjovt!) Er vores ugentlige komponent-API-gennemgang. Hver person, der har arbejdet med nye komponenter, går gennem deres kode, demonstrerer, hvordan den offentlige API ville se ud, som folk skal bruge, og snak gennem genstande, de har brug for feedback på. Dette møde hjælper os med at arbejde hen imod det samme sæt kodeprincipper, så uanset hvem der bygger en komponent, vil det blive bygget på samme måde. Dette hjælper os med at skabe en sammenhængende API for folk, der bruger designsystemet.

Undertiden er holdmøder endnu sjovere, når katte og dansekolleger melder sig!

Hvad er det næste

Hvert år sætter vi mål, følgende liste dækker ikke alt, men her er de vigtigste projekter, vi fokuserer på i 2018:

Modernisering af vores front-stack

GitHub.com er en Ruby on Rails-app, og kilden til sandhed for vores design-system indtil videre har været Sass. Det betyder, at folk skal tage en masse designbeslutninger, når de bygger UI og skriver en masse markup.

I stedet for at adskille bekymringer efter sprog (som HTML, CSS og JavaScript), arbejder vi på en model for at adskille bekymringer på komponentniveau. For at opnå dette er vores største projekt i år at opbygge et komponentbibliotek med React.js. Vi er i beta i øjeblikket, men vi åbner source-projektet, så snart vi opretter en stabil v1-udgivelse. Flere hold på GitHub bruger allerede React; vi vil fokusere på at få disse applikationer til at forbruge vores komponentbibliotek samt finde ud af, hvordan vi arbejder med komponenter i GitHub.com Rails-applikationen. Dette arbejde udføres i samarbejde med vores fantastiske App Systems-team, der allerede har tilføjet tilpassede elementer for at gøre det lettere at implementere almindelig JavaScript-opførsel.

Sandkassen fra vores primer-react-komponentbibliotek.

Oprettelse af et pulserende hub til samarbejde

Vi ønsker at se endnu flere bidrag og samarbejde mellem designsystemer og andre teams; vi ønsker at gøre det lettere at arbejde med Primer og lettere at lære at bruge Primer. For at opnå dette bruger vi mere tid på designværktøjer, tutorials, udviklingsværktøjer og forenkling af bidrag til arbejdsgange.

I år har vi flyttet vores UI-sæt til Figma for designere at oprette mockups og prototyper med. Figma er bygget på webteknologi, hvilket betyder, at vi kan gøre brug af værktøj, vi bruger til andre designsystemers arbejdsgange, og undgå at skulle arbejde omkring software, der er specifik for macOS. Figmas nye Styles-funktion lader os kortlægge systemprimitiver som farver og typografi til komponenter, svarende til hvordan vi gør i kode. Figmas API gør det lettere for os at integrere med andre dele af vores arbejdsgang og automatisere opgaver, såsom at kontrollere komponenter i Figma mod vores komponenter i kode.

Grundfarveformater i Figma

Senere i år henvender vi os til kodeprototype-værktøjer. Mens visuelt designværktøj er fantastisk i bestemte faser i designprocessen, er det undertiden nyttigt at komme lidt tættere på metallet. Mange designere på GitHub arbejder med produktionskode og spike en gren ud for at udforske et nyt design, men dette er ikke altid den bedste tilgang, da det kan betyde at kæmpe med dele af stakken, der er vanskeligere (og distraherende) at arbejde med. Nogle designere bruger vores codepen-skabelon eller -projekt til at prototype i HTML med Primer CSS.

Primer-projekt på Codepen

Vi ved dog, at begge tilgange ikke er ideelle til al brugssager. Designere modellerer ofte sider og strømmer. De skal være i stand til at finpusse og justere design og hurtigt se resultaterne, ligesom vi gør i visuelt designværktøj. Dette kan være hårdt i produktionen, men hvis de i stedet starter med en Codepen-skabelon, er de muligvis nødt til at opbygge en masse eksisterende brugergrænseflade, før de får fokus på den funktion, de arbejder på. I en ideel verden ønsker designere at arbejde med produktionsdata, eller noget der tæt repræsenterer det, og det ville være dejligt, hvis de ikke behøver at starte fra bunden og opbygge alt chrom omkring deres funktion. Vi ved, at dette er en udfordring for mange virksomheder, og jeg håber, at vi kan finde en installation, der fungerer.

Arbejder i det fri

Vi vil gerne være en af ​​de første virksomheder, folk tænker på, når de vil lære mere om designsystemer. Mange virksomheder investerer i designsystemer, og det er et felt i stadig udvikling. Vi vil dele det, vi lærer undervejs, hvis det kan hjælpe andre.

Tidligere i år offentliggjorde vi vores nye stilguide - jeg delte dette efter at have talt under et design-system-arrangement, hvor jeg talte om det pres, folk måtte føle ved at sammenligne deres designsystem med andre selskabers. I stedet for at sammenligne vores designsystemer med andre, bør vi skabe vores egne målinger for succes. Hvad der er rigtigt for andre virksomheder er måske ikke det rigtige for dig. Selvom vores stilguide har en hel del fejl og plads til forbedring, følte jeg, at vi også skulle dele vores, vorter og alt!

Dokumentation fra vores guide til offentlig stil https://styleguide.github.com/primer/

Vi har arbejdet mere i det fri og gjort al vores frigivelsesplanlægning i vores open source-arkiv. Vi vil fortsætte med at dele nye projekter offentligt, som vi mener kan være nyttige for andre, enten til at bruge i deres projekt eller blot som en henvisning til, hvordan man gør noget. Vi planlægger at skrive mere (heraf dette indlæg!) Og tale ved eller deltage i samfundsbegivenheder.

Hvis der er noget, du gerne vil høre mere om fra os, så fortæl os det her eller åbn et problem i Primer-repoen.

Projektbord til planlægning af Primer-udgivelser.

GitHub investerer fortsat i designsystemer. Vi stræber fortsat med at gøre vores bedste arbejde og dele vores succeser og fiaskoer undervejs. Hvis du vil hjælpe med at opbygge designsystemer, som GitHubbers bruger til at opbygge funktioner, som millioner af udviklere bruger hver dag, kan du overveje at blive medlem af vores team.

Tak ❤

Det ville være et meget langt indlæg, hvis jeg havde inkluderet enhver detalje, alt det store arbejde, der skete før jeg tiltrådte, de mange bidragydere, der har hjulpet os undervejs, og alle de mennesker i branchen, som vi har lært af. Men tak!

I det mindste vil jeg give shout-outs til nogle specielle folk, der direkte har været med til at opbygge og understøtte designsystemer på GitHub i de sidste par år: Sophie Shepherd, Mark Otto, Patrick Marsciell, Mu-An Chiou, Caleb Winters, Brandon Rosage, og Max Schoening.