Behöver ni ett designsystem?
Av CodexierPublicerad 5 min läsning
Ett designsystem är ett gemensamt bibliotek av komponenter, regler och tokens som varje produkt och sida i ett företag byggs av. Stora företag behöver ett. De flesta små blir sålda ett innan de behöver det, och sitter sedan med en vacker Figma-fil som ingen förvaltar. Den här guiden ger dig tecknen på att ett system betalar sig, de lättare alternativen och en ärlig regel för när man ska vänta.
Det korta svaret
Vi säljer designsystem och UI-kit, och vi tackar nej till en hel del förfrågningar om dem, eftersom det lättare alternativet oftast är rätt för ett företag under en viss storlek.
Tecken på att ni behöver ett
Tecknen handlar om samordningskostnad, inte om ambition. Ett designsystem lönar sig när samma beslut i dag fattas av flera personer, flera gånger, med olika utfall.
- Två eller fler produkter, eller en produkt och en hemsida, som kunderna ser sida vid sida och som ser ut som olika företag.
- Flera utvecklare eller en extern byrå som bygger vyer, var och en med sin egen knapp.
- En ny grafisk profil eller en tillgänglighetsåtgärd som skulle behöva göras för hand på dussintals ställen.
- Designers som lägger sin tid på att rita om grundkomponenter i stället för att lösa användarproblem.
- Att ta in en ny utvecklare tar veckor eftersom det inte finns någon referens för hur saker ska se ut och bete sig.
Stämmer tre eller fler av dessa kommer systemet att spara mer tid än det kostar. Stämmer inget gör det inte det, hur bra det än ser ut i offerten.
Vad ett designsystem innehåller
| Lager | Vad det är | Vem som använder det |
|---|---|---|
| Grunder och tokens | Färg, typografi, avstånd, radie, skugga, definierade en gång och namngivna efter syfte | Designers och utvecklare |
| Komponenter | Knappar, fält, kort, tabeller, navigation, med alla tillstånd och varianter | Designers i Figma, utvecklare i kod |
| Mönster | Hur komponenter kombineras: formulär, tomma tillstånd, felhantering, sidlayouter | Alla som bygger en vy |
| Riktlinjer | Tonalitet, tillgänglighetsregler, exempel på rätt och fel | Skribenter, designers, utvecklare |
| Kodpaket | Komponenterna som ett installerbart bibliotek, versionerat och dokumenterat | Enbart utvecklare |
Sista raden är det som skiljer ett designsystem från ett Figma-bibliotek. Utan kodpaketet bygger utvecklarna fortfarande om allt för hand.
Lättare alternativ: stilguide och UI-kit
Grafisk stilguide
Några sidor: logotypanvändning, färger, typografi, bildspråk, ton. Räcker för en marknadssajt och tryckt material. Rätt för företag utan mjukvaruprodukt.
UI-kit
Ett komponentbibliotek i Figma med tokens och tillstånd för en produkt, plus matchande kodkomponenter i produktens kodbas. Rätt för ett produktteam.
Anammat öppet system
Ta ett etablerat komponentbibliotek, applicera era tokens, dokumentera undantagen. Rätt för interna verktyg och tidiga SaaS-produkter som behöver konsekvens mer än särprägel.
Fullt designsystem
Allt ovan som en separat förvaltad, versionerad tillgång delad mellan produkter och team. Rätt när tecknen i förra avsnittet stämmer.
Det mesta av det som gör ett system värdefullt, tokens och konsekventa komponenter, får ni från ett UI-kit till en bråkdel av kostnaden. Hur det kitet lämnas till utvecklarna täcks i vår guide om Figma-överlämning.
Vem som förvaltar det
Ett designsystem blir aldrig färdigt. Nya komponenter behövs, gamla behöver tillgänglighetsfixar, varumärket utvecklas, ramverket det bygger på släpper en version som bryter bakåtkompatibiliteten. Någon måste äga det, granska bidrag och publicera versioner. I ett stort företag är det ett team. I ett litet är det en namngiven person med några timmar i månaden och mandat att säga nej till engångsvarianter. Kan ni inte namnge den personen är ni inte redo för ett system; köp ett UI-kit och återkom om ett år.
Förvaltning kan köpas som ett löpande avtal, men besluten kan inte läggas ut. Leverantören kan bygga komponenten; bara ni kan besluta att företaget har exakt en sorts primärknapp.
När det är för tidigt
Köp inte ett designsystem, av oss eller någon annan, om ni fortfarande håller på att ta reda på vad er produkt är. Tidiga produkter byter vyer varje månad, och ett system byggt kring dagens vyer dokumenterar beslut ni kommer att riva upp. Köp inte ett för att rädda en dålig produktdesign; ett system gör en design konsekvent, inte bra. Och köp inte ett för att en större konkurrent har ett; deras samordningskostnad är inte er.
Beslutsregel: en produkt och ett team – skaffa ett UI-kit. Flera produkter eller flera byggare som glider isär, och en person som kommer att äga det – skaffa ett system. Är ni osäkra på vilken sida ni står, boka ett samtal och beskriv vad ni bygger och vem som bygger det; de fasta priserna för båda alternativen finns på vår prissida.
Vanliga frågor
Hur lång tid tar det att bygga ett designsystem?
Ett UI-kit för en produkt tar veckor; ett fullt system med kodpaket och dokumentation tar månader och fortsätter sedan på obestämd tid. Första versionen ska täcka de komponenter produkterna faktiskt använder, inte alla tänkbara komponenter.
Kan vi bygga ett designsystem ovanpå ett befintligt bibliotek som Material eller Radix?
Ja, och för de flesta små företag är det den kloka vägen. Ni behåller bibliotekets tillgänglighetsarbete och struktur, applicerar era tokens och dokumenterar bara det som skiljer. Särprägel kommer från layout, innehåll och bildspråk mer än från en egenritad knapp.
Hjälper ett designsystem med tillgänglighet?
Det är det mest effektiva stället att göra arbetet på. Kontrast, fokustillstånd, tangentbordshantering och etiketter som rättas en gång i en komponent är rättade överallt där den används. Utan ett system upprepas varje fix per vy och glider isär över tid.
Vad kostar ett designsystem i drift?
Den största kostnaden är förvaltarens tid, normalt några timmar i månaden för ett litet system, plus enstaka insatser när det underliggande ramverket ändras. Siffrorna och vad som driver dem täcker vi i en separat guide om vad ett designsystem kostar.
Osäker på om ett kit eller ett system är rätt för er?
Berätta vilka produkter ni har, vem som bygger dem och var de glider isär. På en kvart säger vi om ni behöver en stilguide, ett UI-kit eller ett fullt system, och vad vart och ett skulle kosta.
Boka ett kostnadsfritt 15-minuterssamtal