Brug af Sketch Biblioteker til at opbygge et bedre UI-designsystem - Del 2

Byg et fleksibelt system med avatarer med partikelegenskaber (primitiver) og Sketch Symbol Overrides

Hvor den første del giver dig en introduktion til at opbygge 'primitive' biblioteker, der skal bruges i et UI-designsystem, fokuserer denne artikel på at bruge symbolerne, der er gemt i disse biblioteker, til at opbygge en meget fleksibel Atom-niveaukomponent.

For dem, der er nye ved disse begreber, bruges udtrykket primitiver til at beskrive subatomære egenskaber; det laveste niveau "partikler", hvorfra alt andet i et system er sammensat. Disse ideer undersøges dybtgående i Dan Edens arbejde med Subatomic Design Systems.

"I stedet for at skabe et begrænset og stort sæt UI-elementer, definerer du systemet i forhold til dets partikelegenskaber og begrænser således de tilgængelige stilarter, men åbner potentielt ubegrænsede kreativitetsmuligheder for de faktiske UI-brikker" —Daniel Eden, Designer @ Facebook .
Subatomisk design visualiseret

Vi kan bruge begrebet 'partikler' til bedre at forstå de biblioteker, der er oprettet i den første artikel. Da processen involverer at identificere eller udtrække kerneegenskaber fra vores arbejde og opbevare dem i biblioteker til genbrug.

Men hvorfor gør dette? Vores intention er at henvise til disse partikler, når du bygger stykker af UI. Da vores komponenter vil dele egenskaber, forbliver de konsistente, men alligevel fleksible nok til at give mulighed for kreativitet i deres konstruktion.

De bestemte dele af UI, vi fokuserer på her, er almindeligt kendt som Atomer. Atomer er de mindste identificerbare komponenter i et system, hentet fra Brad Frosts Atomic Design, som du sandsynligvis vil være bekendt med.

Da Atomic Design er vidt forstået, kan vi muligvis bruge det som den grundlæggende guide til vores komponentstrukturer, hvor vi låner begrebet ‘partikler’ fra Subatomic Design for at hjælpe med at forklare egenskaber, der komponerer et Atom.

En fortolkning af, hvordan Atomic Design og Subatomic Design-fusion kan se ud

Diagrammet ovenfor illustrerer, hvor vi er på en skala af UI-kompleksitet. På dette tidspunkt er vi primært optaget af subatomære egenskaber, og hvordan vi kan bruge dem til at opbygge atomer.

Ved at opbevare disse egenskaber (partikler pr. Subatomisk design) som en samling Symboler og symboloverskridelser i skissebiblioteker, kan vi opbygge et yderst fleksibelt system med UI-komponenter på lavt niveau (Atomer pr. Atom design). Og med disse komponenter hurtige prototype komplekse strukturer med minimal kognitiv belastning.

Inden vi går ind på de praktiske ting, der er forude, er her et par grunde til, at du måske overvejer at nedlægge fremgangsmåden "enkelt fil UI Kit" til fordel for at opdele dit UI-system i flere filer. Og hvordan Sketch Biblioteker kan føre din UI-designsystemproces til det næste niveau.

Hvordan biblioteker forbedrer vores designsystemer

Grundlæggende hjælper biblioteker med at reducere kompleksiteten og inkonsekvensen i vores arbejde og øge bærbarheden og genbrugen af ​​UI-aktiver.

Med andre ord hjælper biblioteker os med at skabe nyttigt arbejde, der tjener vores behov på lang sigt. Som designsystemer tænker Nathan Curtis det:

”Fokus på levering af stilguider som klimaks er den forkerte historie at fortælle. Et system er ikke et projekt med en ende, det er oprindelseshistorien til et levende og udviklende produkt, der vil tjene andre produkter. ”- Nathan Curtis

Fordele ved at bruge Biblioteker til at oprette systemer, der holder:

  • Organiserede, vedligeholdelige projekter: Flere filer, færre bevægelige dele pr. Fil. Synkroniser ændringer fra en enkelt kilde til sandhed.
  • Reduceret designgæld og redundans: Ikke mere ødelagte symboler og uoverensstemmelser, da du skal bygge komps ved hjælp af delte egenskaber, der er gemt i 'primitive' biblioteker.
  • Skalerbare, fleksible systemer: Foretag ændringer, synkroniser opdateringer og udvikl dit system med relativ lethed. Symboloverskridelse giver mulighed for færre symboler og fleksible komponenter.
  • Bærbare designaktiver: Biblioteker er uafhængige filer og kan derfor bruges på tværs af flere Sketch-filer og genbruges i andre projekter.

Hvor du måske har kæmpet for at vedligeholde et system i fortiden, hjælper Sketch Biblioteker dig med at opbygge lette systemer, der er lettere at administrere, når dit produkt vokser og udvikler sig.

Opdater farvepalet Bibliotek og få øjeblikkelig adgang til en ny tilsidesættelsesindstilling i andre filer.

Ved at organisere symboler i flere biblioteksfiler, kan vi indlejre en symboler fra en fil i en anden og holde disse filer både lette i kompleksitet og små i størrelse. Med biblioteker bliver vores aktiver bærbare og opdateringer lettere at synkronisere på tværs af hele projekter.

Det betyder ikke flere overflødige designmodeller, der udsendes hand-off af udviklerne, ikke mere kæmper for at holde dine designs opdaterede og generelt en stressfri tid med Sketch.

Så hvordan kan du anvende denne tilgang til UI-designsystemer med biblioteker?

Brug af biblioteker til et UI-designsystem

Bortset fra teori er det temmelig enkelt at opbygge et designsystemer med biblioteker. En oversigt på højt niveau kan se sådan ud:

  1. Frakobl de gentagne egenskaber, der findes i dine designs.
  2. Opbevar egenskaber som symboler i en række biblioteksfiler.
  3. Brug biblioteker til at opbygge identificerbare komponenter.
  4. Brug komponenter til hurtig prototype-designkomponenter

Jeg dækker de første 2 dele ovenfor i den første artikel. Den tredje del er, hvor vi vil fokusere herfra. Lad os fortsætte med det nu.

Basissymboler, der er nødvendige for at fremstille en fleksibel Avatar-komponent med symboloverskridelser

Opbygning af et atom ved hjælp af Sketch Biblioteker

Nu er vi alle velkendte med Atomic Design, vi har en god forståelse af, hvordan vi kan bruge primitive egenskaber eller partikelegenskaber til at opbygge et Atom. Derefter i fremtidige tilfælde Atomer til at opbygge molekyler, molekyler til at opbygge organismer osv.

Da jeg har delt min proces til opbygning af knapper, ser vi på at opbygge en fleksibel Avatar-komponent, en anden Atom på lavt niveau. Senere bruger vi denne Avatar i en kortkomponent. Forvent at læse om det i en fremtidig artikel.

Med nogle designsystemmetoder i tankerne vil vi starte med at identificere de egenskaber, der er nødvendige for at opbygge komponenten.

Trin 1: Gennemgå dit arbejde

Kald det, hvad du kan lide, Brad frost refererer til dette som en grænsefladeinventar, men 'Audit' er pæn og kort, så lad det gå med nu.

En interface-opgørelse er en omfattende samling af de bits og stykker, der udgør din interface. - Brad Frost

Men du vælger at gøre det - uanset om du bruger et regneark, i Evernote, på et stykke papir - bare gør det. At tage et helhedsbillede af hele dit produkt vil hjælpe dig med at identificere mønstre og forhold mellem forskellige UI-komponenter.

I vores tilfælde betyder dette mulige tilfælde af genanvendelighed blandt ejendomme, som vi kan frakoble fra vores design og opbevaring i biblioteker.

Ved revision af mit arbejde med AIN-designsystemet indså jeg, at mange designmønstre i produktet blev lavet af variabler af en håndfuld egenskabstyper: farve, ikon, form, kant, tekst.

Primitive egenskaber (farve, ikon, form, kant, tekst) deles af forskellige komponenter

I teorien betød dette, at jeg kunne bygge størstedelen af ​​enhver komponent (inkluderet avatarer) ved hjælp af variabler af disse 5 primitive egenskaber. Dette var et godt udgangspunkt, når man overvejede, hvad man skulle opbevare i primitive biblioteker.

Tilføjelse af manglende biblioteker

Hvis du læser den første del, ved du, at jeg allerede har bygget Biblioteker til 2 ud af de 5 primitive egenskaber, der blev brugt i mit system: farver og ikoner.

Jeg har siden bygget biblioteker til form og kant, som indeholder alle forekomster af disse egenskaber, der er brugt i mine designs.

Alle forekomster af kant og form, der er gemt i en bibliotekfil for maksimal genbrug og portabilitet

På dette tidspunkt tænker du måske; hvorfor ikke bruge lagstilarter?

Ny for Sketch 51 (i øjeblikket i Beta): Både tekststilarter og lagstilarter defineret i biblioteker vil være tilgængelige i alle dokumenter, ligesom symboler er. Dette er en enorm opdatering og vil hjælpe os med at løse uoverensstemmelser på tværs af stilarter, som vi i øjeblikket er nødt til at genskabe for hvert bibliotek.

Lagstile opretholder dog stadig ikke form, hvilket betyder, at vi ikke har nogen måde at kontrollere kantradius, når vi bruger lagstilarter.

Af denne grund valgte jeg at grøfte Layer Styles helt, i stedet for at oprette symboler til alle forekomster af form og gemme dem i Biblioteker, der kan bruges i hele systemet.

Ved at gøre dette kunne jeg reducere antallet af unikke symboler oprettet på et komponentniveau og reducere kompleksiteten af ​​hver komponent.

Håndtering af tekst på et komponentniveau

Typografi i Sketch er som du ikke ved, et let dyr at temme. Af denne grund besluttede jeg mig for at oprette et tekstbibliotek. I stedet håndterer jeg alle forekomster af tekst på en "pr. Komponent" -basis, hvilket betyder, at den krævede tekst lever i samme fil som selve komponenten.

Dette er ikke noget, hvis du indstiller din tekst ved hjælp af en modulær skala eller opretter delte tekststilarter med tekststilarter-plugin for at undgå inkonsekvens. Men husk, at du ikke har brug for pluginet, der kommer Sketch 51.

4 primitive Libaries brugt som partikelegenskaber for alle komponenter i UI-designsystemet

Nu har jeg 4 primitive biblioteker, som jeg kan bruge til at bygge komponenter. Da størstedelen af ​​komponenterne refererer til disse biblioteker, bliver komponentfiler mindre, mindre komplekse og lettere at administrere. Komponenter vil kun indeholde meget få unikke symboler, der er hjemmehørende i deres fil.

Færre unikke dele betyder, at komponenterne forbliver ultralette. Ved hjælp af symboler butik i mine biblioteker kan jeg nu bruge Overrides til at bygge meget fleksible komponenter.

Lad os forlade disse 4 biblioteksfiler i øjeblikket. Vi vender tilbage til dem senere, når det er tid til at konstruere komponenten.

Trin 2: Identificer komponentvariabler

Inden du bygger din komponent, skal du sigte mod at identificere kravene til den bestemte komponent. Med andre ord, hvad er de unikke attributter, der indeholder komponenten?

For AIN Design System var det fornuftigt at opbygge 2 stilarter af Avatar for at skelne mellem de 2 forskellige brugertyper i produktet:

  • Mennesker - i form af et profilbillede.
  • Projekter - i form af et firmalogo.

For at gøre disse 2 brugertyper mærkbart forskellige, blev der taget en designbeslutning om at bruge 2 visuelt forskellige stilarter: rund for brugere og firkant for virksomheder.

Egenskaber, der er gemt i symboler organiseret i 4 primitive biblioteksfiler

Den næste variabel, der skal overvejes, var, om en bruger uploade et billede eller ej. Dette betød, at vi skulle oprette 2 komponenttilstande, en med et billede og en uden et billede, til både runde og firkantede stilarter.

Vi besluttede at vende tilbage til brugernes initialer i tilfælde, hvor et billede ikke er uploadet. Dette betød, at tekst også skulle overvejes for begge stilarter.

2 Komponentformater: kun med initialer og med billede

Den sidste variabel at overveje var størrelsen på Avatar. Dette var vanskeligt at komme nøjagtigt inden vi vidste alle de potentielle anvendelsessager. Det krævede en fin finjustering, efter at vi begyndte at bruge systemet, men størrelsesskalaen forblev tro mod 8pt gitteret, som vi brugte til alle komponenter og afstand i det endelige system. Hvis du er ny på 8pt-rutenettet, betyder det, at alle afstandsenheder er multipla af 8, hvilket hjælper med at sikre en ensartet rytme i dit arbejde.

Komponentstørrelser baseret på 8pt gitter for ensartet rytme mellem alle komponenter og sidelayout

Ok, det er meget at huske! Lad os nedbryde disse komponentkrav, så de er mere håndterbare, og vi har en klar retning at tage.

Opdeling af kravene

Avatarer skal have tilsidesættelsesstater for:

  • Runde: (99px radius) til brugeravatarer
  • Kvadrat: (4px radius) til firmalogoer-avatarer
  • Med et billede: til når en bruger uploader et
  • Med initialer og en farvebaggrund: til når en bruger ikke uploader et billede
  • 5 størrelser: xl, l, m, s og xs

Trin 3: Identificer tilfælde af genanvendelighed

Nu ved vi kravene til komponenten, lad os vende tilbage til de 4 primitive biblioteker. Hvilke af disse eksisterende biblioteker kan vi bruge til at opbygge vores Avatar-komponent?

Som identificeret i min revision består avatarer i systemet af 5 primitive egenskaber:

Farve, form, kant, tekst og billede

Hvoraf 3 kan gøre brug af de biblioteker, vi lavede:

Farve, form og kant

Tekst og i dette tilfældeBillede er begge specifikke for Avatar-komponenten, hvilket betyder, at disse har næsten ingen genanvendelse andetsteds i mit system. Så det giver mening at håndtere disse specificiteter direkte i Avatar Sketch-filen.

Trin 4: Byg avatarkomponenten

Nu ved vi kravene, det er tid til at oprette en ny Sketch-fil og opbygge vores komponent. I mit tilfælde kaldte jeg filen AIN-avatarer, hvor AIN– er projektets præfiks. Nyttigt til, hvis du beslutter at oprette mere end et system.

Herfra opdaterede jeg min mappestruktur fra et fladt system til organisering af biblioteker efter Atomic Design-principper. Dette trin er ikke afgørende, men det kan hjælpe dig med at tænke over delene til dit system i rækkefølge af kompleksitet.

Få mening i bibliotekets kompleksitet ved at opdatere mappesystemet

Metode ved hjælp af Abstract til versionskontrol

Hvis du bruger Abstract til at holde styr på revisioner og ændringer, er konfigurerede filer lidt anderledes. Du ønsker at oprette din fil fra abstrakt: Tilføj fil> Opret sketch-fil som bibliotek. Dette forhindrer, at du løber ind i problemer, hvor Abstract ikke genkender symboler, du tidligere har lavet.

Oprettelse af nyt bibliotek fra Abstract
Pro tip til abstrakt: Åbn altid filer inde fra abstrakt via knappen 'Rediger i skitse' og ikke fra skitse. Dette vil sikre, at de ændringer, du foretager i dine filer, spores af Abstract.

Opret symboloverskridelser til avatarbilleder

Inde i min nye fil oprettede jeg 5 tegnebræt i min xl-størrelse (120px x 120px), hvilket gav mig 5 tilsidesættelsesindstillinger til brug for brugerprofilbilleder.

Husk formen på mine brugerprofilbilleder, navngav jeg disse Artboards-avatar / image / afrundede / 1 (1 til 5) og oprettede en 120px cirkel til at udfylde hvert Artboard. Derefter forvandlede jeg hver form til en maske: ctrl + klik på laget, og vælg derefter Mask.

Jeg brugte UI Faces Sketch Plugin til automatisk at generere mine 5 billeder. Selvfølgelig behøver du ikke holde sig til 5 billeder her, du kan oprette så mange brugerbilledeoverskridelser, som du har brug for. Når dette er gjort, skal du gøre hvert tegnebræt til et symbol.

Genererer automatisk profilbilleder med UI-ansigter

Herfra skabte jeg 5 flere Artboards, igen i min xl-størrelse til mit 5 firmalogo tilsidesætter. Jeg navngiver disse Artboards-avatar / image / 4px / 1 (1 til 5). Derefter tilføjede jeg et formlag med 4px radius, ændrede farvepåfyldningen og tilføjede en anden logoindstilling for hver. I mit tilfælde brugte jeg logoer fra vores andre produkter, men du kan bruge de logoer eller grafik, du ønsker.

Glem ikke at omdanne dine nye Artboards til symboler, når du er færdig.

Bygningssymbol tilsidesætter for firmalogoer

Store! Nu har jeg i alt 10 nye symboler til brug som Overrides til brugerprofilbilleder og firmalogoer.

Opret hovedsymbol til hver komponentstørrelse

Opbygning af masterkomponenten er det, hvor den virkelige biblioteksmagie sker. Her vil vi bruge vores grænse-, form- og farvebiblioteker fra tidligere. Jeg kalder det en "master" -komponent, da dette er Avatar-komponenten, som vi placerer i design, når vi bygger større komponenter og designkomponenter.

Master Avatar-komponenter i 5 størrelser

For at fremstille masterkomponenterne lavede jeg 5 flere Artboards i de 5 forskellige størrelser, der blev bestemt ved hjælp af 8pt grid-systemet:

  • xl: 120 px
  • l: 96px
  • m: 80 px
  • s: 64 px
  • xs: 40px

Tilføjelse af tilsidesættelse af symboler fra biblioteker

Nu skal vi indsætte vores formbibliotek. Gør dette for hver af de 5 tegnebrætstørrelser: Indsæt> AIN-figurer> form / radius> afrundet. Dette vil give os mulighed for at ændre Avatar-form fra runde til firkant for firmalogoer.

Tilføjelse af Shape Library til masterkomponent for at give mulighed for formoverskridelser

Da mit farvebibliotek er indlejret i mit formbibliotek, dræber der to fugle med en sten. Vi har nu kontrol over vores Avatar-form og farve i form af Symboloverskridelser.

Sørg for, at formlaget sidder i bunden, og at du har omdøbt lagformen til ren navngivning under dine muligheder for tilsidesættelse.

Lad os gøre det samme for grænsen. Vores grænse vil være praktisk til, når Avatar indeholder et billede, der kolliderer med baggrundsfarven på dens beholder. Indsæt en ramme for hver tegnebrætstørrelse nu: Indsæt> AIN-grænser> kant / radius> afrundet> hvid.

Tilføjelse af kantbibliotek for valgfri grænser

Når du har placeret dit kantbibliotek, og det matcher formen, skal du sørge for, at det nye lag sidder øverst i lagstakken, og du har omdøbt laget til kant. Igen holder dette panelet Tilsidesættelse rent og let at læse.

Tilføjelse af billedet Overstyr symbol til masterkomponent

Lad os nu indsætte de billedoverskridelser, vi oprettede tidligere. Forudsat at du navngav dine tegnebræt sekventielt efter den samme navnekonvention, skal du være i stand til at tilsidesætte dit billede med en af ​​de 5 indstillinger, vi har foretaget tidligere: Indsæt> Symboler> avatar> billede> afrundet> 1

Indsættelse af billede Overstyr fra interne symboler. Dette giver os mulighed for at skifte profilbillede og firmalogo

Sørg for at gøre dette for hver størrelse. Igen skal du omdøbe det nye lag til billede for rene overstyringsnavne. Dit billedlag skal sidde over dit formlag.

Tilføjelse af tekst til brugernes initialer

Den sidste fase er at tilføje den tekst, der bruges til at skrive initialerne til vores bruger- eller firmanavn. Initialer vises kun i komponenten, hvis en bruger ikke uploader et billede til både brugerprofilbilleder og firmalogoer.

Som nævnt kan du oprette tekststilarter baseret på din typografiskala eller bruge plug-in Textstyl.es til at synkronisere dine delte tekstformater * fra en anden skissefil til din Avatar-komponentfil.

* Delt tekstformater bliver en oprindelig Sketch-funktion kaldet 'Library Styles' i Sketch 51.

Ved hjælp af den skala, der blev brugt i hele mit designsystem, valgte jeg 3 skriftstørrelser: 20px, 16px, 14px, der passer til alle 5 komponentstørrelser.

Jeg lavede et nyt tekstlag til hver symbolstørrelse og placerede det under billedlaget. Nu er teksten skjult for visningen, når der vælges et billede.

Tilføjelse af et tekstlag for at give mulighed for tilpassede brugerinitialer

Jeg satte justeringen til auto, centrerede teksten og fikste den til midten. Jeg oprettede ikke tekstformater på grund af den variable linjehøjde og manglende genbrug. Når du er færdig, skal du huske at omdøbe det nye lag til tekst.

Trin 5: Brug af komponentoverskridelser

Du skal nu have en fleksibel Avatar-komponent, bygget ved hjælp af færrest mulig unikke symboler.

For at teste din nye komponent og dens tilsidesættelser, indsæt et hovedsymbol i den størrelse, du vælger: Indsæt> Symbol> Avatar> xlarge

Brug af Avatar-komponent og tilsidesættelse af brugerbilleder

Forudsat at du har valgt symbolet, i inspektionsvinduet til højre vil du se alle mulige tilsidesættelser inklusive dem fra dine eksterne biblioteker.

Overstyrer form og billede for at vise firmalogotypes avatar

For at give mening om alle mine muligheder for tilsidesættelse lavede jeg en side kaldet Avatars, hvor jeg holder en visuel henvisning til alle mulige tilfælde af avatarer, der blev brugt i mit design.

Visuel reference til mulige avatarstater

Du skal nu have en komplet Avatar-komponent gemt i et bibliotek, som kan indlejres i andre Sketch-filer. Vi ser på, hvordan dette fungerer, når vi laver en kortkomponent i den næste artikel.

At tage det videre

Der er flere måder, du kan forbedre din arbejdsgang herfra. Jeg starter med et par væsentlige ting og lader dig løbe med det derfra. Du kan godt have specifikke krav til dit projekt, som jeg ikke har tegnet for.

Brug af Sketch Runner for at forbedre hastighed og effektivitet

Sketch runner er et værdifuldt værktøj, når det gælder at bruge dine symboler og biblioteker. Indsæt dine komponenter med cmd + ', og start derefter med at skrive navnet på dit symbol. Dette bliver den hurtigste måde at opbygge mockups ved hjælp af dine komponenter, når du begynder at huske alle dine forskellige komponentnavne.

Versionering og samarbejde om biblioteker ved hjælp af Abstract

Jeg rørte tidligere ved at bruge Abstract til versionering af dit arbejde.

Når du følger en komponentbaseret arbejdsgang ved hjælp af flere biblioteker, hjælper Abstract dig med at holde dig på toppen af ​​alle dine filer, når dit system vokser, eller hvis du arbejder som en del af et team.

Protip: Føj dine filer til Abstract fra starten. Dette forhindrer dig i at skulle kamme gennem dine filer, der opdaterer symboler, for at Abstract kan spore dem. Jeg var nødt til at gøre dette, og det var ikke meget sjovt!

Deling af biblioteker med dit team via Sketch Cloud (fra Sketch 49+)

Sketch 49 så udgivelsen af ​​Sketch Cloud. Indbygget deling og samarbejde om dine biblioteker med andre designere er nu muligt, så der er ikke behov for Dropbox eller Google Drive. Personligt har jeg arbejdet som solo-design på de designsystemer, jeg har oprettet, så jeg har ikke brugt Sketch Cloud, men ville være interesseret i at høre fra alle, der har det.

Afslutter

I denne artikel har vi set på, hvordan vedtagelse af principper fra både Atomic og Subatomic Design kan hjælpe os med bedre at forstå, hvordan vi bygger meget fleksible komponenter på Atom-niveau ved hjælp af Sketch Libraries og Symbol Overrides.

Ved at bygge komponenter primært ved hjælp af symboler fra biblioteker, kan vi reducere redundans og designe gæld. Mens symboloverskridelser tillader os at opretholde maksimal fleksibilitet i vores komponenter. Opbevaring af vores komponenter i biblioteker holder filer lette, hvilket gør vores system lettere at vedligeholde og mindre besværligt at opdatere.

Disse komponenter vil blive en integreret del af vores komponentbaserede UI-designsystem, da vi bruger dem som byggesten til hurtig prototype af større dele af UI hurtigere og med færre uoverensstemmelser.

I den næste del ser vi på at bruge komponenter på Atom-niveau - Avatarer bygget her sammen med knapper - til at opbygge mere komplekse komponentmønstre, såsom kort. Du kategoriserer muligvis disse større komponenter som molekyler ifølge Atomic Design, men det er naturligvis helt dit opkald.

Hvis du fandt, at denne artikel var nyttig, skal du give den nogle klapper , så andre, der kan drage fordel af at læse den, kan finde det lettere.

Tak for at have læst!

Ressourcer

  • Subatomic Design Systems af Daniel Eden
  • Vedligeholdelse af designsystemer af Brad Frost
  • En omfattende guide til designsystemer af Will Fanguy
  • Sketch Biblioteker: Bygge et bedre system af knapper af Harry Cresswell
  • Sketch Biblioteker: Hvordan de fungerer, og de skøre ting, du kan gøre med dem af Jon Moore.
  • Atomisk design: Opret designsystemer, ikke sider snak af Brad frost
  • Tekstsystem mestring med delte stilarter af Bunin Dmitriy
  • Eksport af tekstformater med Textstyl.es
  • Bibliotek Styles Synkroniser plugin for at synkronisere delte stilarter fra Bibliotek til doc

Jeg er Harry Cresswell. Jeg grundlagde indtl.com og arbejder som UX / UI designer hos Angel Investment Network. Jeg designer type på mine aftener og sender et nyhedsbrev om design og typografi.

Find mig på Twitter, hvis du vil sige hej.