Design tokens, vad är det och varför är de viktiga?
Vi har märkt att allt fler är intresserade av att använda design tokens i utvecklingen av en ny digital produkt. Bra och kul, tycker vi!
Vi har dock märkt att många tänker både kortsiktigt och förenklat när det kommer till att namnge sina tokens. Vi fattar. Vi har också gjort det.
Och vi har lärt oss av våra misstag. Så nu vill vi dela med oss av våra lärdomar.
Design tokens representerar alla designbeslut som har fattats och är basen till all design i designsystemet. Det kan vara allt från färger, typografi, kantlinjer, avstånd, attribut och så vidare. Dessa tokens skapas centralt i en sorts "master" och genom att editera dessa tokens uppdateras samtliga ställen där tokens används.
Just därför är hur vi namnsätter designtokens så viktigt. Tänk dig följande scenario: Du skapar ett antal design tokens som används på dina komponenter i din digitala produkt. Enligt designen ska knapparna ha rosa bakgrund med vit text. Därför skapar du design tokens “background-color-pink” för bakgrundsfärgen och “text-color-white” för textfärgen. Senare ser du att menyknappen (den berömda hamburgaren) på webbsidan ska ha vit bakgrund, därför använder du samma token som till knapptexten, “text-color-white”, även till den.
Och det är precis här som det system du byggt upp börjar förlora sitt värde. För vad händer om någon vill ändra färg på texten i knappen och uppdaterar token “text-color-white” till en svart färg? Dels har du nu en design token som heter “-white” men som visar en svart färg, men även bakgrundsfärgen på menyknappen ändras till svart eftersom du använt samma design token till båda.
Vad vill vi ha sagt? Att man inte ska underskatta värdet av att strukturera upp design tokens och namnge dem på rätt sätt. Genom att planera ert system sparar ni massa tid inför framtida förändringar. För om det är något vi vet så är att det vi skapar idag, behöver utvecklas i framtiden.