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

30 marca, 2022 Wojciech Ryrych

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 aplikacje mogą skorzystać z repozytorium npm zawierającego wygenerowane zmienne. Nie będzie to tutorial, który prowadzi krok po kroku. A 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 tokenów nie jest łatwe. Dlatego zainteresowanych tematem czytelników odsyłam do Naming Tokens in Design Systems Nathana Curtisa.

Ze źródła do zmiennych

Nasz system jest bardzo uproszczony i został opisany za pomocą tokenów w dwóch kategoriach: font oraz color. 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).
Kod źródłowy tokenów znajdziesz w repozytorium design-tokens-example.
Poniżej zamieszczam trzy tokeny:

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

Naszym celem jest wygenerowanie zmiennych SCSS oraz CSS. Zmienne SCSS będą zawierać definicje kolorów w formacie hsl, rozmiary fontów w jednostce px; CSS, natomiast: rbg dla kolorów, rozmiary w rem. Tak sobie założyliśmy. Kilka przykładów:

--color-brand-heaven: #1fd6ff;
--font-size-1: 0.707rem;

dist/css/variables.css

$color-brand-heaven: hsl(191, 100%, 56%);
$font-size-1: 13px;

dist/scss/_variables.scss

Zatrzymajmy się na krótko i poznajmy Style Dictionary. Na początek definicja:

Style Dictionary to system budowania, który pozwala zdefiniować style raz, w sposób możliwy do wykorzystania przez dowolną platformę lub język. To jedno miejsce do tworzenia i edycji stylów. Jednym poleceniem eksportujesz te reguły do wszystkich miejsc, w których są potrzebne – iOS, Android, CSS, JS, HTML, pliki aplikacji Sketch, dokumentacja stylów i wszystko, co tylko przyjdzie Ci do głowy.

Źródło: https://amzn.github.io/style-dictionary/

Jak generować?

Generowanie docelowych zmiennych polega na stworzeniu odpowiedniej konfiguracji. Domyślnie znajduje 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 na przeliczenie wartości podanej w rem na wartość wyrażoną w 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 polecenia npm run tokens:build. Polecenie buduje zmienne na podstawie zdefiniowanej konfiguracji. Ponieważ posiadamy własne transformacje, wykonujemy skrypt ./build.js. W innym przypadku wystarczyłoby wykonać polecenie style-dictionary build jako definicję skryptu tokens:build.
Po wykonaniu polecenia w katalogu dist pojawią się zmienne w docelowych formatach.
Pora na współdzielenie tokenów.

Współdzielenie tokenów

Repozytorium npm nadaje się idealnie jako miejsce do pobierania naszych zmiennych. design-tokens-example posiada powiązaną paczkę. Na potrzeby artykułu utworzyłem 2 repozytoria, które posiadają w zależnościach paczkę z tokenami: design-tokens-frontend-a oraz 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 nam 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-a.

Utrzymywanie tokenów

Korzystanie z tokenów po pewnym czasie wchodzi w krew. Warto jednak zadbać o utrzymanie rozwiązania. Możemy sobie pomóc 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, 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 w formie 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ć.

Poniżej zamieszczam odnośniki do repozytoriów, do których zaglądam oraz listę książek i artykułów, które w przystępny sposób opisują temat.

Repozytoria

Książki, artykuły

Najnowsze wpisy