Designsystem är ett suveränt verktyg för att nå ett konsekvent utseende över en eller flera plattformar. Men det som först kan verka som ett litet, oskyldigt system kan snart växa sig till ett otympligt dokument som är svårt att manövrera. Vi delar med oss av våra erfarenheter av att arbeta med stora designsystem och ger några tips på vägen.  

Vi har bra koll på designsystem. Hör av dig om du är nyfiken på hur vi kan hjälpa dig skapa en mer enhetlig och användarvänlig produkt!

Jag har tidigare skrivit om hur man skapar ett designsystem på en mer övergripande nivå. Sedan dess har vi även arbetat med designsystem av den större storleken och nått nya insikter. I denna artikel kommer jag visa hur vi arbetat, och dela med mig av några viktiga lärdomar som du förhoppningsvis har nytta av.  

Vad är ett designsystem?

Så vad är då ett designsystem? Enkelt förklarat är det en samling komponenter utformade efter ett antal designprinciper. Men det är också så mycket mer än så!


I ett designsystem ryms innehåll på flera nivåer - från mer övergripande designprinciper gällande stil och guider för hur texter ska skrivas, till de minsta detaljer som exempelvis hur textfält och knappar ska se ut och bete sig. Det är särskilt fördelaktigt för design som behöver anpassas för flera plattformar samtidigt som de ska kännas enhetliga, men kan vara lika välbehövligt för en mindre webbsida.

I ett designsystem samlas guidelines och komponenter på ett sätt som gör dem lätta att överskåda och smidiga att återanvända. Bild: freebiesbug.com

Det finns många fördelar med designsystem:

  • Single source-of-truth - allt samlat på ett ställe
  • God översikt 
  • Lätt att dela med andra

När du samlar alla designmönster i ett designsystem får ditt team en bra överblick. Det är ett bra underlag för diskussion eftersom det snabbt syns om något saknas. Och behövs ett nytt designmönster är det större chans att ni utgår från det som redan finns dokumenterat. 

Detta är ett steg i helt rätt riktning för konsekvent design!

Designsystem, pattern libraries och style guides - vad är skillnaden?

Begreppen pattern libraries och style guides dyker ofta upp i samband med designsystem. Jag vill reda ut skillnaden innan vi fortsätter:

  • Pattern library - en samling designmönster (textfält, knappar m.m.) som kan användas i ett ekosystem av produkter.
  • Style guide - konkreta exempel på hur design ska implementeras (både visuellt och i text). 

De ska alltså inte förväxlas med designsystemet i sin helhet, utan utgör snarare viktiga delar utav det.

Vad finns i ett designsystem?

Det finns hela bibliotek av designsystem att inspireras av, med olika struktur och upplägg. Några exempel på vad de kan innehålla är: 

  • designprinciper (läs mer om vad det är och hur du tar fram dem här)
  • guidelines för text och tonalitet
  • guidelines för färg och typsnitt
  • ikoner
  • komponenter (som textfält, knappar, menyer m.m.)
  • templates (struktur för olika typer av dialoger t.ex.)
  • visuella exempel på hur komponenter ska användas

Men kom ihåg - det finns inget "one size fits all" för designsystem. Du måste utgå från vad ditt team behöver och anpassa det efter de som kommer använda det. 

Designsystem kan variera i storlek och utförande beroende på verksamhetens behov. IBM's open source designsystem är exempelvis mycket mer komplext än Mailchimps designsystem.

Så bygger du ett designsystem

För att skapa ett designsystem behöver du gå igenom flera steg. Exakt hur det utförs beror på vilken typ av designsystem du bygger och hur mycket tid och resurser som finns. Här är några grundläggande steg: 

  1. Inventera designmönster - Hur ser din produkt ut idag? Ta skärmdumpar på de designmönster som finns och samla efter funktion (knappar för sig, typsnitt för sig osv.). Fundera på vad som fungerar och vad som kan förbättras. Behövs verkligen 12 olika typsnitt, till exempel?
  2. Sätt upp övergripande riktlinjer - Hur ska produkten upplevas? Ta inspiration från produkter du tycker har lyckats bra och fundera över varför de lyckats. Utifrån det kan du sedan skriva egna riktlinjer för färger, tonalitet osv. Ta gärna hjälp av min guide för att ta fram designprinciper!
  3. Ta fram komponenter - När du satt dina riktlinjer är det dags att påbörja det konkreta designarbetet. Ta fram visuella exempel på hur knappar, länkar, ikoner och andra komponenter ska se ut.
  4. Visa exempel - När du placerar komponenterna i sin verkliga kontext är det lättare att förstå hur de ska användas. Gör skisser över hela gränssnitt och placera ut komponenterna. Det gör det även lättare att se om de kommer fungera eller om något behöver tänkas om.

Räkna med att denna process tar tid och att du får iterera några gånger innan det känns rätt. Kom även ihåg att ett designsystem inte är tänkt att vara statiskt, utan kommer förändras och uppdateras i takt med teknikens framfart och målen för din verksamhet.

Ett designsystem är inte statiskt - det ändras i takt med teknikens framfart och verksamhetens mål.

Välj rätt verktyg

Det finns oändligt många verktyg som kan användas för att skapa designsystem. Sketch, Photoshop och Illustrator är kanske vanligast, men de har sakteligen fått flytta på sig för nya tillskott som exempelvis Adobe XD och Figma.

Men oavsett hur strukturerat och snyggt ditt designsystem är, är det helt värdelöst om det inte kan delas på ett smidigt sätt. Det är här molnbaserade tjänster som Zeplin och inVision kommer in. De gör skisserna tillgängliga för fler och innehåller även inspektionsverktyg så att utvecklare kan se färgkoder och mått.

Det finns en rad verktyg och plugins att använda sig av för att bygga och underhålla designsystem.

Vi använde tidigare Sketch tillsammans med inVision, men en stor nackdel var att det inte höll att arbeta flera i. Vi arbetade i olika versioner av filerna och använde plugins för versionshantering, men råkade ändå ut för konflikterande filer. Dessutom var det krångligt att behöva pusha upp material till inVision. Vi behövde ett verktyg som skulle kunna innehålla många komponenter och samtidigt vara smidigt att dela och inspektera. Valet föll på Figma.

Figma - designa i realtid
Figma är ett verktyg som fungerat särskilt bra för oss i detta projekt av flera anledningar:

  • Möjlighet att skapa komponenter och stilsättningar som slår igenom på flera ställen i designsystemet.
  • Lätt att komma åt eftersom det både finns för desktop och webb.
  • Allt i ett - möjlighet att designa, skapa enklare prototyper och inspektera komponenter finns i samma verktyg. 
  • Möjlighet att bjuda in personer och delge olika behörigheter i dokumentet.

Det är en hyfsat simpel övergång för den som tidigare är van vid Sketch eller Adobe XD, och har stora fördelar i sin enkelhet och levande community. Dessutom är det gratis!

Struktur är A och O

Oavsett om designsystemet du bygger är litet eller stort, är det strukturen som avgör om det kommer användas eller inte. Det kan verka oskyldigt att samla ett gäng komponenter och guidelines, men det blir snabbt större än tänkt. Genom att sätta upp en bra struktur från början blir det också lättare att skala från litet system till större.

Innan vi började bygga designsystemet gjorde vi noggrann research. Hur hade andra löst det? Det finns mängder av artiklar att inspireras av. Men kom ihåg att alla projekt är olika - vad som fungerar för någon annan kanske inte fungerar för dig.

Designsystemsrepo.com är ett bibliotek fullt av designsystem att inspireras av.

Utgå från dina användare
Vi fick snart överge vår första version av designsystemet. Inte för att de guidelines och komponenter vi skapat inte höll, utan för att strukturen gjorde det svårt att använda och förstå. För vad spelar det för roll om det är lätt att förstå för en designer, men inte för utvecklarna?

Användarupplevelsen av designsystemet är det som avgör om det kommer att användas eller ej. 

Vi inspirerades först av Atomic design, där komponenter ses som atomer som tillsammans bildar större organismer. Vi tyckte inte benämningarna molekyler och organismer var helt självklara och valde istället att köra med "enkla komponenter" och "avancerade komponenter" för att förenkla. Men hur skulle man förstå vad som var vad? Dessutom ville vi ogärna lägga in de runt 400 ikonerna under någon av sidorna eftersom de riskerade försvinna.

I ett så stort designsystem var det svårt att minnas var komponenterna hörde hemma. Sidorna blev stora och svåra att hitta i.

Ursprunglig struktur till vänster och den nya till höger. Med tydliga namn på vilka komponenter som döljer sig under resp. sida är det lättare för utvecklarna att hitta i designsystemet.

Eftersom vi redan börjat lyfta ut ikonerna på en egen sida valde vi helt enkelt att samla vissa av komponenterna och satte deras namn direkt på sidan. Det underlättar för utvecklarna, som slipper lägga tid på att fundera på var komponenterna finns.

Dela upp i flera dokument

Ett dokument fyllt av designprinciper, stilsättningar och komponenter blir lätt tungt. Vårt är inget undantag. När vi samlat alla hundratals komponenter förstod vi att ett stort antal dialogexempel i samma dokument skulle göra det osmidigt att använda. Därför skapade vi ännu ett dokument för just detta syfte.

För att arbetet ska fortgå så smidigt som möjligt har vi inspirerats av Kanban-metoden, där designförslag flyttas från dokument till dokument. Det ger oss en god översikt över var i processen vi är. Vi i designteamet arbetar isolerat och kan lugnt  arbeta vidare med designen utan att riskera att göra utvecklarna förvirrade - de kan implementera allt de ser i dokumentet de har tillgång till.

En översikt över de dokument vi arbetar med för designsystemet.
På bilden syns dokumenten som är relaterade till projektet. De är uppdelade efter denna struktur:

  • In progress (röd) - Hit har endast vi i designteamet har behörighet. Här arbetar vi ostört med designförslag.
  • In review (gul) - Hit flyttas designförslag som är redo att presenteras och diskuteras med produktägarna. De har behörighet att se och lämna kommentarer.
  • Ready for development (grön) - Efter godkännande av produktägarna flyttas designändringarna hit. Utvecklarna har behörighet att inspektera komponenter för implementering.

Figma-korten visar vanligen en förhandsgranskning över den första sidan i ett dokument (som synes på dokumentet Wireframing i bilden). Det är en god tanke för lite mindre projekt, men eftersom vi arbetar med mycket innehåll ger det inte någon bra översikt för oss designers. Vi har därför skapat etiketter enligt instruktionerna i denna artikel.

Använd både bild och ord
Komponenter i all ära, men ofta behöver design förklaras i mer än bara bild. Vi har inte möjlighet att gå igenom alla ändringar med utvecklarna personligen, och kunden behöver kunna utgå från designsystemet även utan oss i framtiden. Därför har vi skapat skriftliga guidelines i relation till komponenterna. Här har vi gott om utrymme att förklara varför en komponent ser ut som den gör. Återigen, det man förstår kan - och vill - man använda.

Vi har placerat guidelines för respektive designmönster på samma sida.

Hantera versioner och uppdateringar i designsystemet

Med så många personer inblandade och så mycket innehåll - och mer på gång - behövde vi dokumentera ändringar på något sätt.

Versionshistorik i ytterligare ett dokument skulle skapa mer arbete för utvecklingsteamet, vilket vi ville undvika. Därför skapade vi en change log direkt i Figma, där vi dokumenterar ändringar i designsystemet. För att skapa ännu bättre översikt, uppdaterar vi även datum och tid i menyn till vänster.

Vi har experimenterat fram en egen change log för att underrätta teamet om uppdateringar i designsystemet.

Slutligen...

Jag kan inte nog upprepa hur olika designsystem kan se ut och det bästa sättet att ta reda på vad som fungerar för ditt team är att testa, och iterera och iterera igen. Det är ett gediget arbete, men det du får igen gör det mödan värt.

Tänk bara på fördelarna: när alla inblandade får en bra överblick över designen stärks kommunikationen inom verksamheten. Det ger bättre förutsättningar för ett konsekvent utseende på en eller flera plattformar, vilket i sin tur kan ha mycket positiv påverkan på användarupplevelsen. 

Lästips för dig som vill lära mer

Det finns gott om artiklar och böcker om designsystem. Jag vill tipsa om boken Design systems av Alla Kholmatova som går på djupet för hur man skapar och hanterar designsystem.

Även Figma har tagit fram en guide som är värd att slänga ett öga på.Designsystem är ett suveränt verktyg för att nå ett konsekvent utseende över en eller flera plattformar. Men det som först kan verka som ett litet, oskyldigt system kan snart växa sig till ett otympligt dokument som är svårt att manövrera. Vi delar med oss av våra erfarenheter av att arbeta med stora designsystem och ger några tips på vägen.  

Vi har bra koll på designsystem. Hör av dig om du är nyfiken på hur vi kan hjälpa dig skapa en mer enhetlig och användarvänlig produkt!

Jag har tidigare skrivit om hur man skapar ett designsystem på en mer övergripande nivå. Sedan dess har vi även arbetat med designsystem av den större storleken och nått nya insikter. I denna artikel kommer jag visa hur vi arbetat, och dela med mig av några viktiga lärdomar som du förhoppningsvis har nytta av.  

Vad är ett designsystem?

Så vad är då ett designsystem? Enkelt förklarat är det en samling komponenter utformade efter ett antal designprinciper. Men det är också så mycket mer än så!


I ett designsystem ryms innehåll på flera nivåer - från mer övergripande designprinciper gällande stil och guider för hur texter ska skrivas, till de minsta detaljer som exempelvis hur textfält och knappar ska se ut och bete sig. Det är särskilt fördelaktigt för design som behöver anpassas för flera plattformar samtidigt som de ska kännas enhetliga, men kan vara lika välbehövligt för en mindre webbsida.

I ett designsystem samlas guidelines och komponenter på ett sätt som gör dem lätta att överskåda och smidiga att återanvända. Bild: freebiesbug.com

Det finns många fördelar med designsystem:

  • Single source-of-truth - allt samlat på ett ställe
  • God översikt 
  • Lätt att dela med andra

När du samlar alla designmönster i ett designsystem får ditt team en bra överblick. Det är ett bra underlag för diskussion eftersom det snabbt syns om något saknas. Och behövs ett nytt designmönster är det större chans att ni utgår från det som redan finns dokumenterat. 

Detta är ett steg i helt rätt riktning för konsekvent design!

Designsystem, pattern libraries och style guides - vad är skillnaden?

Begreppen pattern libraries och style guides dyker ofta upp i samband med designsystem. Jag vill reda ut skillnaden innan vi fortsätter:

  • Pattern library - en samling designmönster (textfält, knappar m.m.) som kan användas i ett ekosystem av produkter.
  • Style guide - konkreta exempel på hur design ska implementeras (både visuellt och i text). 

De ska alltså inte förväxlas med designsystemet i sin helhet, utan utgör snarare viktiga delar utav det.

Vad finns i ett designsystem?

Det finns hela bibliotek av designsystem att inspireras av, med olika struktur och upplägg. Några exempel på vad de kan innehålla är: 

  • designprinciper (läs mer om vad det är och hur du tar fram dem här)
  • guidelines för text och tonalitet
  • guidelines för färg och typsnitt
  • ikoner
  • komponenter (som textfält, knappar, menyer m.m.)
  • templates (struktur för olika typer av dialoger t.ex.)
  • visuella exempel på hur komponenter ska användas

Men kom ihåg - det finns inget "one size fits all" för designsystem. Du måste utgå från vad ditt team behöver och anpassa det efter de som kommer använda det. 

Designsystem kan variera i storlek och utförande beroende på verksamhetens behov. IBM's open source designsystem är exempelvis mycket mer komplext än Mailchimps designsystem.

Så bygger du ett designsystem

För att skapa ett designsystem behöver du gå igenom flera steg. Exakt hur det utförs beror på vilken typ av designsystem du bygger och hur mycket tid och resurser som finns. Här är några grundläggande steg: 

  1. Inventera designmönster - Hur ser din produkt ut idag? Ta skärmdumpar på de designmönster som finns och samla efter funktion (knappar för sig, typsnitt för sig osv.). Fundera på vad som fungerar och vad som kan förbättras. Behövs verkligen 12 olika typsnitt, till exempel?
  2. Sätt upp övergripande riktlinjer - Hur ska produkten upplevas? Ta inspiration från produkter du tycker har lyckats bra och fundera över varför de lyckats. Utifrån det kan du sedan skriva egna riktlinjer för färger, tonalitet osv. Ta gärna hjälp av min guide för att ta fram designprinciper!
  3. Ta fram komponenter - När du satt dina riktlinjer är det dags att påbörja det konkreta designarbetet. Ta fram visuella exempel på hur knappar, länkar, ikoner och andra komponenter ska se ut.
  4. Visa exempel - När du placerar komponenterna i sin verkliga kontext är det lättare att förstå hur de ska användas. Gör skisser över hela gränssnitt och placera ut komponenterna. Det gör det även lättare att se om de kommer fungera eller om något behöver tänkas om.

Räkna med att denna process tar tid och att du får iterera några gånger innan det känns rätt. Kom även ihåg att ett designsystem inte är tänkt att vara statiskt, utan kommer förändras och uppdateras i takt med teknikens framfart och målen för din verksamhet.

Ett designsystem är inte statiskt - det ändras i takt med teknikens framfart och verksamhetens mål.

Välj rätt verktyg

Det finns oändligt många verktyg som kan användas för att skapa designsystem. Sketch, Photoshop och Illustrator är kanske vanligast, men de har sakteligen fått flytta på sig för nya tillskott som exempelvis Adobe XD och Figma.

Men oavsett hur strukturerat och snyggt ditt designsystem är, är det helt värdelöst om det inte kan delas på ett smidigt sätt. Det är här molnbaserade tjänster som Zeplin och inVision kommer in. De gör skisserna tillgängliga för fler och innehåller även inspektionsverktyg så att utvecklare kan se färgkoder och mått.

Det finns en rad verktyg och plugins att använda sig av för att bygga och underhålla designsystem.

Vi använde tidigare Sketch tillsammans med inVision, men en stor nackdel var att det inte höll att arbeta flera i. Vi arbetade i olika versioner av filerna och använde plugins för versionshantering, men råkade ändå ut för konflikterande filer. Dessutom var det krångligt att behöva pusha upp material till inVision. Vi behövde ett verktyg som skulle kunna innehålla många komponenter och samtidigt vara smidigt att dela och inspektera. Valet föll på Figma.

Figma - designa i realtid
Figma är ett verktyg som fungerat särskilt bra för oss i detta projekt av flera anledningar:

  • Möjlighet att skapa komponenter och stilsättningar som slår igenom på flera ställen i designsystemet.
  • Lätt att komma åt eftersom det både finns för desktop och webb.
  • Allt i ett - möjlighet att designa, skapa enklare prototyper och inspektera komponenter finns i samma verktyg. 
  • Möjlighet att bjuda in personer och delge olika behörigheter i dokumentet.

Det är en hyfsat simpel övergång för den som tidigare är van vid Sketch eller Adobe XD, och har stora fördelar i sin enkelhet och levande community. Dessutom är det gratis!

Struktur är A och O

Oavsett om designsystemet du bygger är litet eller stort, är det strukturen som avgör om det kommer användas eller inte. Det kan verka oskyldigt att samla ett gäng komponenter och guidelines, men det blir snabbt större än tänkt. Genom att sätta upp en bra struktur från början blir det också lättare att skala från litet system till större.

Innan vi började bygga designsystemet gjorde vi noggrann research. Hur hade andra löst det? Det finns mängder av artiklar att inspireras av. Men kom ihåg att alla projekt är olika - vad som fungerar för någon annan kanske inte fungerar för dig.

Designsystemsrepo.com är ett bibliotek fullt av designsystem att inspireras av.

Utgå från dina användare
Vi fick snart överge vår första version av designsystemet. Inte för att de guidelines och komponenter vi skapat inte höll, utan för att strukturen gjorde det svårt att använda och förstå. För vad spelar det för roll om det är lätt att förstå för en designer, men inte för utvecklarna?

Användarupplevelsen av designsystemet är det som avgör om det kommer att användas eller ej. 

Vi inspirerades först av Atomic design, där komponenter ses som atomer som tillsammans bildar större organismer. Vi tyckte inte benämningarna molekyler och organismer var helt självklara och valde istället att köra med "enkla komponenter" och "avancerade komponenter" för att förenkla. Men hur skulle man förstå vad som var vad? Dessutom ville vi ogärna lägga in de runt 400 ikonerna under någon av sidorna eftersom de riskerade försvinna.

I ett så stort designsystem var det svårt att minnas var komponenterna hörde hemma. Sidorna blev stora och svåra att hitta i.

Med tydliga namn på vilka komponenter som döljer sig under resp. sida är det lättare för utvecklarna att hitta i designsystemet.

Eftersom vi redan börjat lyfta ut ikonerna på en egen sida valde vi helt enkelt att samla vissa av komponenterna och satte deras namn direkt på sidan. Det underlättar för utvecklarna, som slipper lägga tid på att fundera på var komponenterna finns.

Dela upp i flera dokument

Ett dokument fyllt av designprinciper, stilsättningar och komponenter blir lätt tungt. Vårt är inget undantag. När vi samlat alla hundratals komponenter förstod vi att ett stort antal dialogexempel i samma dokument skulle göra det osmidigt att använda. Därför skapade vi ännu ett dokument för just detta syfte.

För att arbetet ska fortgå så smidigt som möjligt har vi inspirerats av Kanban-metoden, där designförslag flyttas från dokument till dokument. Det ger oss en god översikt över var i processen vi är. Vi i designteamet arbetar isolerat och kan lugnt  arbeta vidare med designen utan att riskera att göra utvecklarna förvirrade - de kan implementera allt de ser i dokumentet de har tillgång till.

En översikt över de dokument vi arbetar med för designsystemet.
På bilden syns dokumenten som är relaterade till projektet. De är uppdelade efter denna struktur:

  • In progress (röd) - Hit har endast vi i designteamet har behörighet. Här arbetar vi ostört med designförslag.
  • In review (gul) - Hit flyttas designförslag som är redo att presenteras och diskuteras med produktägarna. De har behörighet att se och lämna kommentarer.
  • Ready for development (grön) - Efter godkännande av produktägarna flyttas designändringarna hit. Utvecklarna har behörighet att inspektera komponenter för implementering.

Figma-korten visar vanligen en förhandsgranskning över den första sidan i ett dokument (som synes på dokumentet Wireframing i bilden). Det är en god tanke för lite mindre projekt, men eftersom vi arbetar med mycket innehåll ger det inte någon bra översikt för oss designers. Vi har därför skapat etiketter enligt instruktionerna i denna artikel.

Använd både bild och ord
Komponenter i all ära, men ofta behöver design förklaras i mer än bara bild. Vi har inte möjlighet att gå igenom alla ändringar med utvecklarna personligen, och kunden behöver kunna utgå från designsystemet även utan oss i framtiden. Därför har vi skapat skriftliga guidelines i relation till komponenterna. Här har vi gott om utrymme att förklara varför en komponent ser ut som den gör. Återigen, det man förstår kan - och vill - man använda.

Vi har placerat guidelines för respektive designmönster på samma sida.

Hantera versioner och uppdateringar i designsystemet

Med så många personer inblandade och så mycket innehåll - och mer på gång - behövde vi dokumentera ändringar på något sätt.

Versionshistorik i ytterligare ett dokument skulle skapa mer arbete för utvecklingsteamet, vilket vi ville undvika. Därför skapade vi en change log direkt i Figma, där vi dokumenterar ändringar i designsystemet. För att skapa ännu bättre översikt, uppdaterar vi även datum och tid i menyn till vänster.

Vi har experimenterat fram en egen change log för att underrätta teamet om uppdateringar i designsystemet.

Slutligen...

Jag kan inte nog upprepa hur olika designsystem kan se ut och det bästa sättet att ta reda på vad som fungerar för ditt team är att testa, och iterera och iterera igen. Det är ett gediget arbete, men det du får igen gör det mödan värt.

Tänk bara på fördelarna: när alla inblandade får en bra överblick över designen stärks kommunikationen inom verksamheten. Det ger bättre förutsättningar för ett konsekvent utseende på en eller flera plattformar, vilket i sin tur kan ha mycket positiv påverkan på användarupplevelsen. 

Lästips för dig som vill lära mer

Det finns gott om artiklar och böcker om designsystem. Jag vill tipsa om boken Design systems av Alla Kholmatova som går på djupet för hur man skapar och hanterar designsystem.

Även Figma har tagit fram en guide som är värd att slänga ett öga på.