Designsystemer, klargøring: Software, tjenester og plugins

Gør os klar til at oprette et gratis designsystem kaldet Dezin.

Om denne serie

Hvad er det?

Jeg har oprettet og anvendt designsystemer i over 5 år, og du kan læse om den rejse her:

Det er tid til at tage alt, hvad jeg har lært i løbet af denne tid, og oprette Dezin med en serie video-tutorials, der vil hjælpe dig med at mestre Sketch og lære, hvordan du opretter dit eget designsystem undervejs.

En praktisk tilgang

Jeg holder tingene praktiske og vejer ikke dig ned med en masse dokumentation, før der endda findes noget. Principperne og retningslinjerne vil blive informeret og dannet, når vi går.

Om mig

Jeg er en far, og når jeg ikke er på arbejde handler jeg om min kone og datter. Når de sover, arbejder jeg på Dezin og skulle få en tutorial en gang om ugen.

Når du overvejer arten af ​​designsystemer, vil det fortsætte med at vokse og fortsætte med at blive raffineret i løbet af de følgende måneder. Hvis du holder dig med det og forbliver i det lange løb, vil det være meget givende ... så lad os forberede .

Forberedelse

Hvis du Google "Citater om forberedelse", får du et par indirekte resultater, før du finder denne perle:

Giv mig seks timer til at hugge et træ ned, og jeg vil tilbringe de første fire på at skærpe øksen.
- Abraham Lincoln

For at indstille os til succes taler vi om disciplin og den software, plugins og tjenester, du har brug for til denne serie.

Disciplin

Den mest værdifulde ting, du lærer i denne serie, er disciplin. At opbygge et helt designsystem i Sketch, der har hundreder, hvis ikke tusinder af individuelle elementer, er robust, ren, let at bruge og bringer et nyt niveau af effektivitet til din virksomhed eller projekt er en stor udfordring.

Evnen til at følge en arbejdsgang og hvert trin i dens proces vil gøre dit team til en designsymfoni, hvor enhver kan være dirigent.

Der er intentioner bag alt hvad vi skal gøre. Fra arbejdsgang, navnekonventioner, mappe- og lagstruktur til farver, delte stilarter og symboler; Når det hele samles, bliver du en mere effektiv og målrettet designer.

Skitse

Dezin bor i det mest populære designværktøj, Sketch. Hvis du ikke allerede bruger den, skal du gøre dig selv en tjeneste og købe en licens til det. Det har hjulpet med at fornye min kærlighed til design, i lyset af Photoshop tilbage, er det dagligt job at være fotoredigerer og blev min go-to-app til illustration.

Skitse biblioteker

Vi udnytter kraften i Sketch's Libraries-funktion, laver et sæt eksterne biblioteker, du kan daisy-chain til at bruge i et nyt projekt og har alle de tilknyttede biblioteksymboler klar til at gå.

Du kan læse mere om denne tilgang her:

Åbn Sketch, derefter ...

Tilpas din værktøjslinje

Tag de værktøjer og handlinger, du bruger oftere, og placer dem på din værktøjslinje ved at højreklikke eller kontrollere at klikke på din værktøjslinje, vælge Tilpas værktøjslinje og trække emner til den eller fra den. Den, jeg bruger mest, er symbolikonet, det bliver en fantastisk måde at placere symboler og oprette layouts fra ét sted.

Jeg vendte dette

Standardsketsværktøjslinjen.

Ind i dette

Hvor jeg nu kan tilføje et symbol, stylet tekst eller Opret symbol. Placer let et rektangel, ovalt, linje, brug penværktøjet, tilføj tekst, et udsnit eller et tegnebræt og rediger stier med en saks.

Vi vil ikke stole på disse mindre, når vi går gennem denne tutorial-serie og begynder at lære nogle nye tastaturgenveje. Apropos hvoraf…

Tilpas dine tastaturgenveje

Hvis du vil tilsidesætte Sketchs tastaturgenveje med dine egne, skal du følge disse trin:

  1. Åbn appen Systemindstillinger
  2. Vælg tastatur
  3. Vælg genveje
  4. Vælg appgenveje
  5. Klik på + -ikonet
  6. Vælg Sketch.app i rullemenuen, indtast det nøjagtige navn på det menupunkt, du vil oprette til en genvej, og tryk derefter i det sidste felt på de taster, du vil have til genvejen
  7. Vælg Anvend

Du kan nu bruge genveje, der gør dig mere effektiv. Jeg vendte de eksisterende, der bevæger et lag frem eller tilbage og viser dit gitter og guider til dem, jeg havde brugt i Photoshop i mange år.

plugins

Sketch-samfundet har brugt år på at give os mere funktionalitet med plugins. Vi installerer nogle få, der hjælper os med at opnå dem, der er uden for boksen, og spare tid.

Sketch Runner

Kør menukommandoer, hopp til sider og tegnebræt, indsæt og opret symboler og delte stilarter og installer plugins. Når det er installeret, bruger vi det til at installere alle plugins på denne liste.

Auto-layout

Vi bruger Auto Layout af Anima, den originale plugin-løsning til Sketch, der skaber responsive layouts og fastgjorte indlejrede symbolopsætninger, når Sketchs egne størrelsesindstillinger ikke er nok til vores krav.

Renameit

Omdøb flere lag på én gang. Denne er en massiv tidsbesparende.

Stark

Kontroller kontrasten mellem to lag og simuler farveblindhed, fantastisk til tilgængelighed.

Skitse-biblioteker

Importer alle dine typografier og delte stilarter fra et Sketch-bibliotek til den fil, du arbejder på. En god måde at holde sig ajour med dit designsystem og distribuere dets stilarter med team.

Versionering

Vi bruger Abstract til at være vært for master Sketch-filer. Det fungerer som Github for designere. Deres gratis konto er alt hvad du har brug for for at administrere dit eget designsystem.

Dette er et valgfrit trin, men hvis du arbejder med flere designere, vil jeg foreslå, at du bruger det. Det giver dig mulighed for at kvalitetskontrol af nye forpligtelser til designsystemet og holde master-sketch-filen ren for dublerede symboler og delte stilarter.

Tilmeld dig en konto, download desktop-appen og gør dig klar til at oprette dit første projekt, så du er klar til, når jeg er færdig med den næste del af denne serie.

Tillykke!

Du er klar til resten af ​​serien, hvor jeg tilføjer nye dele hver 1-2 uge:

For opdateringer:

Følg mig her på Medium, Twitter og YouTube.