Hvordan vi byggede et Atomic design-system med Sketch-biblioteker @Capital Float

Erfaringer ved installation af et modulopbygget systemsystem i et FinTech-firma.

Når vi var i startup med et par designere, arbejdede vi med forskellige produkter og måtte aldrig krydse hinandens vej! Men snart begyndte vores produkter at se anderledes ud! Det være sig interne dashboards eller klientmobilapplikationer, de fleste af vores design var rammeafhængige for at matche vores hurtige produktudvikling.

Vi indså snart behovet for at forene vores produkter. Den eneste måde at gøre det på var at definere en visuel retningslinje. Men hvordan og hvor skal man begynde?

Få brainstorming-møder, og en måned senere definerede vi vores første stilguide.

Vores første stilguide

Vi brugte Sketch-skabelon som vores kedelplade, vi har ikke oprettet symboler endnu! Efter at have brugt denne fil i nogle uger begyndte vi at få problemer. Da vi startede, arbejdede vi med flere funktioner og begyndte at se inkonsekvensen i design, fordi vores design var meget mere end bare farver og typografi. Det var også vanskeligt at forblive synkroniseret via fildeling. Det var spild af tid at administrere så mange filer. Problemer med at formidle design til udviklere var en anden udfordring. Vores mål med at opbygge et designsystem fungerede ikke!

Tid til at udføre og opbygge det rigtige designsystem

Som computeringeniør blev UX-designer, vidste jeg modularitetsstyrken. Men hvordan man gør det til design, jeg havde ingen anelse om, hvor jeg skulle starte! Som en stor Google design-beundrer begyndte jeg reverse engineering og stillede spørgsmålstegn ved deres Materialesignalsystem. Jeg udforskede også Bootstrap og Angular framework for at forstå, hvordan de har definerede komponenter.

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 vi forsøgte at opnå med vores designsystem:

  1. Standardiserede elementer og et samlet designsystem til alle vores produkter, uanset platform.
  2. Oprettelse af en 1: 1-match så vidt muligt med vores kodede komponenter og skissesymboler, både visuelt og strukturelt.
  3. Let at vedligeholde. Komponentopdateringer eller tilføjelser skal være enkle, så designere og udviklere får det seneste uden meget ventetid.

Første ting først

Inden vi hoppede til, hvad alle ting der skal tilføjes, var vi nødt til at definere bestemte regler for at gøre elementer genanvendelige og atomiske i sand forstand. Så vi besluttede at gå efter et indlejret bibliotek i stedet for en enkelt kildefil. Dette gjorde det muligt for os at opdele ting som farver og ikoner 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, spreder den stadig til de andre filer, der refererer til dette symbol. (Fantastisk funktion, Sketch! )

Vi har skitseret visse mønstre / regler for at opretholde "Workplace Hygiene"

  1. Fil- og mappestruktur
  2. Management af sider og Art-boards (Art-board som variant af en skærm, Pages som funktioner)
  3. Gentag ikke dig selv (brug symboler)
Fil- og mappestrukturStyring af sider og tegnebræt

Niveau 0: Kvarker og elektroner

Tilføjelse af et lag under Atom-systemet kan virke et underligt træk, men det gjorde filen lettere at bruge. Også det hjalp os med at balance mellem forudbyggede designelementer og genanvendelighed. Jeg betragter farver og ikoner ikke som atomer, men mere som attributter af elementer som elektroner og kvarker. Farver kan bruges overalt som baggrunde, tekst, rammer osv. Behandling af farver som element gjort ikoner arkiverer mere ensartet. Dette er symboler, men bruges for det meste som overkørsler i symboler på atomniveau.

Download prøvefil: https://goo.gl/9WdLYR
Vi definerede formelsymbol for at generere variation af en farve og genbruge den til at generere palet. Så vi skal bare bekymre os om basisfarver. Formler er intet andet end et overlay på en basisfarve og fungerer på samme måde som Shades & Tint.

Niveau 1: Atomer

Atomer repræsenterer entydige elementer i UI-design, der bærer unik funktionalitet. Når vi definerer atomer, overvejer vi også, hvordan disse elementer opfører sig i HTML.

Alt, hvad der kan defineres og bruges individuelt, er atomer. For eksempel kort, værktøjstip, skygge, divider, knap, logoer, markører osv.

Mange af disse elementer har forskellige tilstande og variationer, som designer kan vælge fra. Alle disse stater hedder nøjagtigt, hvordan det bruges i udvikling. Atomer bruges sandsynligvis også som tilsidesættelser, medmindre du opretter et brugerdefineret brugergrænseflade.

Niveau 2: Molekyler

Dette er det afsnit, hvor det meste af magien sker! Molekyler hjælper os med at reducere vores gentagne arbejde og giver os mulighed for at skabe konsistens i design. Hvert molekyle er bygget til at tilbyde udskifteligt indhold, f.eks. knaptilstande ændre, fjerne / skjule nogle elementer.

Hele idéen om molekyler er at tænke generisk.
Variationer af en generisk komponent

Molekyle består generelt af flere elementer (tekst, billeder, symboler), men alligevel designet til at være abstrakte og genanvendelige. De har et mellemliggende niveau af kompleksitet, som f.eks. Faner, statuslinje, handlingslinje, liste-rækker, modaler, alarmmeddelelser osv.

Niveau 3: Organismer og sider

På dette øjeblik indeholder dette niveau meget få elementer som sideoverskrifter, borde, Play / App Store-mockups, dataplukkere, tastaturer osv. Årsagen til dette er, at jeg har svært ved at se mening i at levere præ-bygget organismer, da dette niveaudesign ofte afhænger af det projekt, vi arbejder på, og funktioner og indhold, der skal vises.

Naturligvis har alle projekter gentagne organismer på sider, men de er ofte afledt af individuelle behov og krav. Så bedre at bruge symboler her.

Sider eller skabeloner er faktisk output fra en designproces, så vi besluttede ikke at medtage dette niveau i Atomic design system.

Sidste ord

Sketchebiblioteker vil helt sikkert ændre den måde, vi designer i dag. Her er nogle få andre ting, vi lærte, mens vi byggede atomsystem ..

  1. Rækkefølge af lag i dit symbolstof. Da de vises i samme rækkefølge i panelet Override. Du kan også låse nogle lag for at undgå rod.
  2. Brug Sketch runner til at søge og indsætte symboler, da det har en bedre preview end hvad Sketch i øjeblikket har.
  3. Brug Sketch Styles Generator til at generere delte tekst- og lagformater.
  4. Hvis du er fra ikke-programmerende baggrund og vil vide, hvordan udviklere ser designelementer, skal du bruge Sketch measure plug-in til at eksportere dine designs. Det hjælper også med at lette designoverlevering.
Uden tvivl forbedrer skitsen vores designproces, men der er stadig få vigtige manglende funktioner såsom ..
  1. Delt tekst- og lagformater kan faktisk ikke deles uden for din fil!
  2. Det er ondt at eksportere aktiver fra symboler med tilsidesættelse! Tjek denne tråd for mere information.
  3. Versionskontrol til biblioteker. (I modsætning til udviklerens versionskontrol tillader Sketch kun at flytte til den højere / seneste version af en komponent)
  4. Symboler som en maske

Changelog

Overvej venligst kommentaren nedenfor som mit åbne brev!

Jeg vil gerne nævne / påpege her, at ovenstående artikel er beregnet til at vise vores læring og processen med at opnå Atomic Design. Det betyder ikke, at det er min egen skabelse! Dette er et ydmygt forsøg på at implementere Brad Frosts koncept “Atomic Design”.

En stor tak til Alexandre Trimoulet, Brad Frost og Oliver Jahn for at inspirere mig til at komme i gang med Design System.

Ovenstående artikel er dækket af CC0 - Ingen rettigheder forbeholdes. Jeg giver afkald på alle ophavsret og beslægtede rettigheder i videst muligt omfang, som loven tillader.

Hvis du har feedback / spørgsmål til implementering af et designsystem eller vil diskutere andre ting, er du velkommen til at kommentere.