[PL] Od design tokenów do zmiennych, czyli Style Dictionary w akcji

• Opublikowanomarzec 2022

Od design tokenów do zmiennych, czyli Style Dictionary w akcji

Kiedy projektanci podjęli już decyzje projektowe, a część z nich została opisana przy pomocy design tokenów, pora zautomatyzować proces tworzenia zmiennych dla różnych platform i systemów.

W tym artykule poznamy Style Dictionary oraz zobaczymy, jak dwie aplikacje mogą skorzystać z repozytorium npm, które zawiera wygenerowane zmienne. Artykuł nie jest tutorialem, który prowadzi krok po kroku. Ponieważ design tokeny to szeroki temat, skupimy się na generowaniu zmiennych z istniejącego źródła prawdy. Zakładamy, że design tokeny zostały utworzone na podstawie decyzji podjętych przez projektanta.

Tokeny – w telegraficznym skrócie

Design tokeny wyrażają decyzje projektowe w formacie niezależnym od technologii, systemu czy platformy. Stworzenie spójnego nazewnictwa nie jest łatwe. Zainteresowanych tematem czytelników odsyłam do Naming Tokens in Design Systems Nathana Curtisa. Nasz system jest bardzo uproszczony.

Ze źródła do zmiennych

Nasz system został opisany w dwóch kategoriach: font oraz color. Tokeny znajdują się w repozytorium design-tokens-example.

Paleta kolorów zawiera kolor główny color-brand-heaven oraz kolory, których nazwy zaczerpnięte są z kolorów występujących w naturze wraz z przypisanym poziomem nasycenia (np. color-base-jasper-200).

Rozmiary fontów bazują na jednej skali typograficznej w proporcji 1.414 (ang. Augmented Fourth).

Poniżej zamieszczam trzy tokeny:

$color-brand-heaven: #1fd6ff;
$color-sand-200: #ddc53e;
$font-size-6: 3.998rem;

Naszym celem jest wygenerowanie zmiennych SCSS i CSS. Zmienne SCSS będą zawierać definicje kolorów w formacie hsl, rozmiary fontów w jednostce px; CSS natomiast: rgb dla kolorów, rozmiary w rem. Kilka przykładów:

/* dist/css/variables.css */
--color-brand-heaven: #1fd6ff;
--font-size-1: 0.707rem;

/* dist/scss/_variables.scss */
$color-brand-heaven: hsl(191, 100%, 56%);
$font-size-1: 13px;

Style Dictionary

Zatrzymajmy się na krótko i poznajmy Style Dictionary. Oto jego opis ze strony projektu:

Jak generować?

Generowanie docelowych zmiennych polega na stworzeniu odpowiedniej konfiguracji. W naszym przypadku znajduje się ona w pliku config.json. Style Dictionary posiada wiele gotowych transformacji, które pozwalają wygenerować zmienne przy minimalnej konfiguracji. Mamy też możliwość tworzenia własnych transformacji, które pozwalają na przykład przeliczyć wartości rem na px. W naszym przypadku została utworzona transformacja size/remToPx. Zachęcam do zapoznania się z konfiguracją, która znajduje się w pliku build.js.

Nasze repozytorium zawiera polecenie tokens:build:

"scripts": {
  "tokens:build": "node ./build.js"
}

Można je uruchomić przy pomocy:

npm run tokens:build

Polecenie buduje zmienne na podstawie zdefiniowanej konfiguracji. Ponieważ mamy zdefiniowane własne transformacje, wykonujemy ./build.js. W innym przypadku wystarczyłoby wykonać style-dictionary build.

Po wykonaniu polecenia w katalogu dist pojawią się zmienne w docelowych formatach.

Współdzielenie tokenów

Repozytorium npm nadaje się idealnie jako miejsce do pobierania naszych zmiennych. Repozytorium design-tokens-example posiada powiązaną paczkę.

Na potrzeby artykułu utworzyłem dwa repozytoria, które posiadają w zależnościach paczkę z tokenami: design-tokens-frontend-a oraz design-tokens-frontend-b.

• design-tokens-frontend-a
• design-tokens-frontend-b

design-tokens-frontend-a jest budowane przy pomocy Parcel i korzysta ze zmiennych CSS:

/* src/styles.css */
@import "~node_modules/@wryrych/design-tokens-example/dist/css/variables.css";

h1 {
  font-size: var(--font-size-7);
  color: var(--color-brand-heaven);
}

h2 {
  font-size: var(--font-size-6);
  color: var(--color-base-bay-300);
}

design-tokens-frontend-b to aplikacja Vue, która posiada konfigurację umożliwiającą dostęp do tokenów z każdego arkusza SCSS:

// vue.config.js
module.exports = {
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "scss",
      patterns: [
        path.resolve(
          __dirname,
          "~node_modules/@wryrych/design-tokens-example/dist/scss/_variables.scss"
        ),
      ],
    },
  },
};

/* src/views/Colors.vue */
.jasper300 {
  composes: c;
  background: $color-base-jasper-300;
}

.grass100 {
  composes: c;
  background: $color-base-grass-100;
}

Style Dictionary jest na tyle elastycznym rozwiązaniem, że kiedy pojawi się zapotrzebowanie na dostarczenie zmiennych w formacie LESS, wystarczy dodanie odpowiedniej sekcji w konfiguracji. Ponieważ tokeny są dostępne publicznie, możemy skopiować interesujący nas format i wrzucić do dowolnego repozytorium — w tym przypadku nie jesteśmy zależni od npm.

Dbanie o tokeny

Korzystanie z tokenów po pewnym czasie wchodzi w krew. Ale jak z każdą paczką — jeżeli nie będziemy w projekcie wspólnie dbać o źródło, pokryje się kurzem. Możemy sobie pomóc w utrzymywaniu paczki z tokenami przy pomocy kilku prostych technik.

Wersjonowanie. Ponieważ tokeny rezydują w repozytorium npm, rozważ wersjonowanie semantyczne. Dokumentując zmiany oraz prowadząc historię zmian (changelog), cały zespół może być bardziej na bieżąco.

Współodpowiedzialność. Repozytorium tokenów nie trafi do archiwum, o ile zespół będzie o niego wspólnie dbał. Pomóc w tym mogą regularne spotkania typu UI meeting angażujące front-end developerów oraz projektantów. Automatyczne powiadomienia na grupowy chat przy okazji wydania nowej wersji ułatwią śledzenie zmian; w razie konieczności każdy dostosuje kod.

Edukacja. Design tokeny to zadanie głównie należące do projektantów. Programiści są natomiast głównymi „konsumentami” rozwiązania. Bez odpowiedniej dokumentacji i przybliżenia programistom tematu, design tokeny mogą zostać użyte w sposób inny niż przewidziany.

Podsumowanie

Style Dictionary pozwala na wygenerowanie zmiennych w różnych formatach na bazie zdefiniowanych tokenów. Nie obciąża to dodatkową pracą projektantów, dając programistom narzędzie do generowania zmiennych w formatach, których potrzebują. Umieszczenie źródła tokenów w formie paczki daje łatwy dostęp do zmiennych. Nie możemy jednak zapominać, że za utrzymywanie tokenów współodpowiedzialni są wszyscy członkowie zespołu korzystający z design systemu.

Temat design tokenów staje się coraz popularniejszy. Warto mu się przyjrzeć.

Repozytoria

• Infor design – tokeny
• Sprout – tokeny
• Backpack – tokeny

Książki i artykuły

• Design systems. A practical guide to creating design languages for digital products, A. Kholmatova
• Expressive Design Systems, Yesenia Perez-Cruz
• Naming Tokens in Design Systems, Nathan Curtis