Bygge designsystemet ditt i Figma

Eller enda verre: et lerret som flommer over av elementer fra et rotete designsystem fra tiender av ulike designfiler. Å bygge et solid designsystem tar tid. Det krever tid og ofte mye finjustering. Så hvor begynner du egentlig?

Først bør du definere et fleksibelt fargesystem med et utvidet galleri av UI- og interaktive farger

Alle designsystemer bør ha sine farger; i sentrum av disse bør du definere og bevare merkevarefargene dine. Å integrere merkevarens fargepalett i UI er alltid en god idé, da disse støtter grunnleggende gjenkjennelse av digitale formater.

I tråd med det grunnleggende prinsippet for god UX-design bør brukerne kunne dekode betydningen av UI-objekter bare ved å se på dem. Du må skille mellom statiske og interaktive objekter, samt ulike standardtilstander, og for å gjøre dette trenger du sannsynligvis tilleggsfarger. Prøv å være tilbakeholden når du introduserer nye farger for UI; merkevaren din bør fremstå på samme måte i UI som i andre ikke-digitale formater.

Bruk merkevarens farger for funksjonelle og dekorative elementer på nettsider og apper. De kan også strukturere og gi karakter til designet gjennom hele, for eksempel topp- og bunntekster, menyer osv.

Definere denotative farger

Denotative farger er farger som betyr noe. Du trenger farger for positive (suksess) og negative (feil og advarsel) tilstander. Du klarer kanskje med merkevarens farger for positive opplevelser — brukerne vil assosiere merkevarefargen med et positivt utfall. For advarsler og feil anbefaler jeg imidlertid å gå med nye, definerte farger som du sjelden ser brukt i merkevaren ellers, for å gi dem nødvendig vekt og holde de tilhørende følelsene av problemer utenfor merkevarens lekeplass.

For ekstra fremtidssikring, lag denotative farger med kontraster som fungerer godt i lys og mørk modus.

Definere toner og nyanser (interaktivt fargebibliotek)

Når du har lagt til base- og denotative farger, utvid disse med varierende toner (lysere varianter) og nyanser (mørkere varianter) for interaktive elementer. Nyanser og fargetoner kan bidra til å formidle ulike tilstander for UI-elementer — for eksempel en trykket tilstand, hover-tilstand eller deaktivert tilstand.

Du kan lage varierende toner og nyanser fra basisfargen ved å justere lysstyrke og metning via HSL/HSB-alternativet i fargepaletten i Figma. Denne prosessen er tidkrevende, men resulterer vanligvis i bedre farger enn generative.

Bruk de samme fargene for tilstandene til lenker og knapper for å hjelpe brukerne med å gjenkjenne lignende interaktive elementer.

Definere svart, grå og hvitt

Å definere basis-svart-og-hvitt og varierende grånyanser er et absolutt must. Du trenger vanligvis slike farger til bakgrunner for artikler og tekst, og grånyansene for å lage et vektingshierarki og vise noe som er deaktivert eller utdatert.

Jeg anbefaler å sette både svart og hvitt med varierende grader av opasitet. Disse variantene er perfekte for å plassere et ikon over et bilde, kontrollere hvor mye fargen eller bildet skinner gjennom, og for filtre som kan plassere tekst over bilder.

En siste tips før vi går videre: hold deg til en enkel navnekonvensjon, som:

• Merkevare-/primærfarger
• UI-farger
• Toner og nyanser
  • Mappe for toner av hver farge
• Opasitetsfiltre

Lag et fleksibelt typografisystem for skrivebord, nettbrett og mobilenheter

Hvordan du setter opp, skalerer og lar typografisystemet ditt oppføre seg kan gjøre eller ødelegge hele det digitale designet ditt. Du må velge en god font for nettstedet og de riktige størrelsene. Det bør være nok kontrast til å hjelpe brukerne med å fokusere på nøkkelbudskapene og nok fleksibilitet til å vise alt fra bærbar datamaskin til smarttelefon — kanskje til og med smartklokke en dag.

Denne fleksibiliteten krever enten et veldig stort eller veldig smart hierarki. Det jeg har satt opp for denne artikkelen er ekspansivt og forhpentligvis smart. Jeg er sikker på at du har egne tanker om forbedringer, og det er helt greit. Som sagt finnes det ingen løsning som passer alle.

Måten jeg har organisert dette systemet på er gjennom seks mer overordnede kategorier:

• Displaystiler
• Overskrifter
• Ingress
• Brodøtekst
• Informasjon
• Knapp

Sette opp fontstorrelser for skrivebordet

For øvrige stiler er det ofte lurt å definere brødteksten. Den beste praksisen for brødtekst på skrivebordet er vanligvis rundt 16–21 piksler, avhengig av hva som gir en behagelig leseopplevelse. Husk at hvis du vil ha en mindre informasjonstekst for faktabokser, smfåfakta, tagger osv., bør du efterlate litt rom for å definere disse mindre enn brødteksten uten å gå til uleselige størrelser.

Å gå videre til ingresser, underoverskrifter og overskrifter kan gjøres matematisk i like inkrementer. Det kan være en økning i et bestemt antall piksler eller rem, eller ved hjelp av en ratio som 1.2. Dette gjør det enkelt å fylle ut størrelsene for resten av hierarkiet basert på den valgte brødteksten. Selv etter alle disse justeringene kan det hende du ser på skjermen og tenker: «Dette bør være litt større/mindre». Følg din intuisjon og juster utover de matematiske tallene. Ingen vil sjekke inkrementene dine, så lenge de ser rene og lesbare ut.

Inputfelter og knapper bør samsvare tett med brødteksten din.

Displaystiler er tekst brukt strengt for emosjonelle meldinger og herotekst. Disse hierarkiene kan være de mest interessante å leke med utover reglene og konvensjonene. Lek med størrelsene til du finner noe som fungerer for fonten din. Disse kan også være ytterligere frakoblet fra det inkrementelle eller modulare skaleringssystemet du bruker for de andre typestilene.

I tillegg setter jeg vanligvis opp alt fra ingress og nedover med to mindre størrelser (medium og small), som er standardstørrelserene for nettbrett og mobiltelefoner.

Sette opp fontstorrelser for mobil og nettbrett

Brødteksten bør vanligvis være minst 16 piksler på mobil. Du kan likevel argumentere for å gå enda mindre (for eksempel hvis en skrifttype har store tegn). Utover 14 piksler vil teksten imidlertid nesten alltid bli vanskelig å lese. Etter å ha definert brødteksten, fyll ut de inkrementelle verdiene og gjenta for nettbrett. Sørg for at typografistilene føles de samme for øyet som det innledende hierarkiet. Legg til din foretrukne skraleringsmetode for ekstra responsivitet.

Bruk pluginen Batch Styler for Figma for raskt å endre møltiple stiler samtidig.

Denne filen bør være et relativt minimalt system der reglene for logobruk vises tydelig i komponentene som er opprettet. Det bør vanligvis være minst:

Primærlogoer:

• Logo i primærfarge
• Logo for mørk modus

Logosymboler:

• Logosymbol for bruk der full logo er for lang/stor
• Logosymbol for mørk modus

I tillegg bør du legge til alle andre varianter du bruker gjennom UI/UX. Du bør imidlertid holde logosystemet så lite og tett som mulig.

Det bør være som om logo-komponentbiblioteket ditt er klar over sin egen schønhet og storheten, og ikke føler behov for å rope det ut.

Så når logoen endres (og la oss være ærlige, det vil den sannsynligvis på et tidspunkt), muliggjør dette en selskapsomfattende utrulling bare ved å endre disse hoved-komponentene.

Lag ditt globale gridsystem

Hva ville nettet vært uten gridsystemer? Jeg lar deg forestille deg det grusomme scenariet. (Jeg sier ikke at dette aldri bør utfordres, men jeg elsker et ryddig og fleksibelt grid.) Gridsystemer med merkevarepræg tilfrer den siste konsistensen og personligheten den digitale løsningen din trenger. Dette kan være ett grid for alle digitale formater, ett optimalisert for skrivebord, ett for nettbrett og ett for mobil.

Implementer ditt valgte ikonbibliotek, eller gjør merkevarens ikoner til et globalt komponentbibliotek

Dine favorittikonbiblioteker har vanligvis Figma-filer tilgjengelig for nedlasting.

Undertittelen sier alt. Figma-filene finnes som offisielle Figma-kits fra ikonopphaverne eller filer opprettet av designerkommunitet. Disse gjør det enkelt å distribuere ikoner globalt gjennom FigJam- og Figma-designfiler. Når det gjelder valg av ikonsett, velg det som samsvarer eller kontrasterer med andre identitetselementer på en måte du liker.

Skyv systemet videre

Med de grunnleggende elementene på plass bør det være enklere å lage konsistente UI/UX-komponenter. Bare husk å implementere de beste i et system for gjenbruk. Hvis bygget på et solid grunnlag (noe du nå bør ha), vil dette stædig voksende biblioteket bli bedre og bedre med tid, og styrke det innledende arbeidet ytterligere.

Aldri å måtte åpne en fil for igjen å sette opp grids, fontstorrelser, fargestiler eller ikoner er en spesiell glede for UI/UX-designere, kunder og alle du setter det opp for.

Har du spørsmål eller ønsker du å diskutere å etablere et solid system for din organisasjon?