Poradnik

Design tokeny wyjaśnione na prawdziwych plikach

Design token to nazwana decyzja projektowa: kolor, odstęp, rozmiar fontu. Zapisana raz, używana wszędzie, zarówno przez narzędzie do projektowania, jak i przez kod.

Dlaczego tokeny są ważne

Bez tokenów niebieski twoich przycisków jest zapisany w pliku projektu, potem jeszcze raz w CSS i jeszcze raz w aplikacji. Zmieniasz go raz i musisz go szukać wszędzie. Z tokenami zmieniasz color.brand, a każde miejsce, które go używa, zmienia się razem z nim.

Jak wygląda plik z tokenami

W3C Design Tokens Community Group definiuje format JSON, w którym każdy token ma $value i $type.

{
  "color": {
    "brand": { "$value": "#2F5BEA", "$type": "color" },
    "ink":   { "$value": "#121214", "$type": "color" }
  },
  "space": {
    "4": { "$value": "16px", "$type": "dimension" }
  }
}

Te same decyzje zamienione w zmienne CSS, których może używać przeglądarka:

:root {
  --color-brand: #2F5BEA;
  --color-ink: #121214;
  --space-4: 16px;
}

Jak Kalka używa tokenów

  • Jeden folder: każdy projekt ma folder design-system/ z plikiem tokens.json w formacie W3C i plikiem tokens.css obok.
  • Na płótnie: gdy wybierasz kolor lub odstęp w panelu projektu, wybierasz token, a CSS używa zmiennej.
  • Wersjonowane w Git: zmiana koloru marki to commit, który możesz przejrzeć jak każdą zmianę w kodzie.

Kalka jest w fazie rozwoju i jest open source. Powyższa struktura folderów pochodzi z naszej specyfikacji produktu.