Hvorfor dit designsystem har brug for sit eget Sketch-plugin

Sketch-plugins er fantastiske. Der er et helt samfund af mennesker, der bygger og deler værktøjer, der forbedrer vores arbejdsgange. Jeg var nysgerrig efter disse plugins og ville se, om jeg selv kunne lave noget. Det viser sig, at de ikke er for skræmmende! Alt hvad du behøver er nogle Javascript-viden, lidt tid og spande med beslutsomhed.

Når jeg tænkte på, hvilken slags plugin jeg kunne lave, gik mit sind straks til Monzo's File Cleaner. De byggede et Sketch-plugin, der håndterede en masse af de manuelle opgaver, der fulgte med at have et stift designsystem. Dette fik mig til at tænke. Hvordan ville en skræddersyet plugin se ud til vores designsystem?

Her er processen, jeg gik igennem for at lave et plugin, der er skræddersyet til vores designteams skræddersyede systemer.

At finde behovet

At følge en begyndervejledning gav mig et godt fundament, og jeg ønskede snart at bygge noget mere komplekst. Noget, der ville løse et reelt behov.

For at finde inspiration så jeg på, hvordan vores team allerede brugte Sketch. Vi har et temmelig omfattende og komplekse symbolbibliotek, der vokser, når vi tilføjer nye funktioner og produkter. Denne form for system har store fordele for os, men jeg kunne også se nogle forbedringsområder:

  • Standard indholdsgenerator plugins passede ikke vores særlige behov. Datoformaterne, vi bruger i vores design, er noget, vi stadig skulle udfylde selv.
  • Vi er stadig nødt til at ændre felter individuelt for symboloverskridelser. Dette kan være tidskrævende, når du skal ændre mange værdier, og det efterlader os tilbøjelige til at lave fejl.
  • Hvert medlem af vores team har deres eget valg af plugins. Der er ikke et eneste værktøj, der tilfredsstiller alle vores individuelle behov. Vi finder alle vores egne måder at løse problemer ved hjælp af plugins, hvilket kan føre til inkonsekvente output.
  • Vi fremstiller pladsholderdata uden at basere dem på et ægte livsscenarie. Dette kan skabe vildledende design; forfalskede data i design har mange negative virkninger.
  • Opdatering af elementer kan kræve specifik baggrundskendskab. Vi modtager undertiden anmodninger om at oprette designs med alternativt indhold til forskellige brugssager og regioner. Det kan tage tid at indhente disse oplysninger i det rigtige format, og vi kan få ting forkert, hvis vores kilder ikke er korrekte.

Bygge en løsning

Med problemerne i tankerne begyndte jeg at tænke over, hvad jeg først kunne skabe. Jeg ønskede at opnå mindst følgende tre ting:

  • Generer indhold til tekstlag, der passer til vores formateringsretningslinjer. Dette inkluderede ting som ID nøgler og dato frimærker.
  • Omdøb lag afhængigt af indholdet for konsistens og ryddighed.
  • Generer pseudo-tilfældigt indhold til symboler. Så vi kunne opdatere symbolværdier automatisk, men gøre indholdet nøjagtigt til det virkelige livsscenarier.

Gør noget research

Selvom jeg har erfaring med Javascript, var det et stykke tid siden jeg havde skrevet noget i denne skala. Jeg brugte tid på at læse kildekoden til andre plugins, som hjalp mig med at forstå, hvordan nogen havde bygget den. Dette er især nyttigt til afhentning af kodestykker, du kan bruge i dit eget plugin.

Et særligt nyttigt eksempel for mig var Content Generator. Det var nyttigt for mig at se, hvordan dette plugin refererede til billedaktiver og brugte JSON-filer til at indeholde globale datasæt.

Start med version en

For at starte tingene begynder jeg at se på de to enklere krav, jeg har stillet mig. Manipulering af tekststrenge er ligetil, og vi havde allerede solide retningslinjer for det nødvendige format.

Den første version af det plugin, jeg lavede, ville kun generere tilfældige datoer i fremhævede tekstlag, men det var en start. Denne lille og enkle funktion løste et kendt problem, som allerede gjorde denne øvelse værd for mig.

Den næste fase var at finde ud af, hvordan man overfører information mellem elementer i Sketch. Efter mange timers brug af trawl gennem Sketch API-dokumentationen fik jeg endelig fat på tingene.

Dette er en hurtig måde at opdatere tekstlagnavne på. Funktionen af ​​dette kunne også udvides til at omfatte ting som symboler og figurer. Jeg har tilføjet et uddrag til min endelige løsning. Det er ikke perfekt, men det skal hjælpe med at vise, hvordan denne ting fungerer under hætten.

iterere

Da jeg har lært mere om Sketch-plugins, har jeg været i stand til at fremstille mere komplekse funktioner. Jeg brugte nogen tid på at se på, hvordan vi kan hente detaljer fra en ekstern fil. Dette vil gøre det meget let at foretage ændringer i fremtiden uden at skulle berøre funktionerne i koden.

Filen til højre er samlingen af ​​indhold, som jeg vil tilføje tilfældigt i mine symboler. I øjeblikket er dette statusmeddelelser for to forskellige typer symboler, handlinger til knapper og taster til ikoner i vores symbolsbibliotek.

Filen til venstre er den funktion, der sætter dette indhold i alle valgte og kompatible symboler. Vi kan fortælle, hvilken slags symbol der er fremhævet, og vi kan ændre symboloverskridelserne i overensstemmelse hermed.

Dette værktøj har allerede mange muligheder. Kombineret med datogenerationsfunktionaliteten fra tidligere, kan vi udfylde vores symboler med realistisk indhold. Fremtidige versioner kunne sikre, at indholdet er på linje med hinanden. For eksempel kunne vi matche ikonerne med deres indholdstekst eller undgå duplikatknapper på det samme liste.

Del og få feedback

Vores designteam gennemgår i øjeblikket en fase med vækst og forandring. Vi laver nye processer og finjusterer nuværende. Et Sketch-plugin kan være et andet aktiv, som vi alle deler og arbejder på sammen som en del af vores designværktøjssæt.

Uanset hvilket plugin du laver kan blive en mulighed for alle i dit team at upskill. Et designsystem er noget, som alle i teamet skal føle et eller andet ansvar for. Det hører til os alle.

Måling af påvirkning

Disse første par iterationer markerer starten på en rejse. Dette plugin er så nyt og ungt, men vi ser allerede fordele ved at have en skræddersyet til vores teams behov.

  • Vi sparer tid, når vi genererer indhold, og vi kan være sikre på, at det er korrekt.
  • Alle data, der genereres ved hjælp af et plugin, vil være nøjagtige og realistiske. Alle kan opdatere databasen over indhold, der bruges til generering med eventuelle nye brugssager.
  • Jeg byggede aktivbiblioteket, som plugin bruger på en måde, der gør det let at kunne udvides. Det er også bygget, så hvis vi opretter et nyt biblioteksymbol, er der muligheden for dem at trække aktiver fra det samme aktivbibliotek.

Når vi har behov for at automatisere noget andet, er der altid potentialet til at indbygge det i vores eget Sketch-plugin. At have dette niveau af fleksibilitet giver os mulighed for at lave værktøjer, der passer perfekt til vores behov.

Kodning er ikke en obligatorisk færdighed som designer, men for mig har det været uvurderligt, når man laver værktøjer og aktiver, der er nyttige for andre.

Følg vores publikation for at læse flere historier fra vores designteam. Hvis du har spørgsmål, kan du også kontakte mig på LinkedIn!