Frontend Academy · Lekcja

Tokeny projektowe z Style Dictionary

Zdefiniuje Pan/Pani w JSON tokeny kolorów, odstępów i typografii, a następnie przekształci je za pomocą Style Dictionary w zmienne CSS, stałe JS lub formaty iOS/Android.

Tokeny projektowe z Style Dictionary to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Czym są tokeny projektowe?

Tokeny projektowe to nazwane, podstawowe wartości systemu projektowego: kolory, odstępy, rozmiary czcionek, promienie zaokrągleń i cienie. Są źródłem prawdy — każdy komponent wyprowadza z nich swoje style.

Dlaczego tokeny mają znaczenie

Tokeny oddzielają decyzje projektowe od implementacji. Wystarczy raz zmienić color.primary z niebieskiego na zielony, aby zaktualizowały się wszystkie korzystające z niego komponenty. Pozwalają też dostarczać ten sam projekt na web, iOS i Androida.

Przechowywanie tokenów

Tokeny należy przechowywać w JSON lub YAML — neutralnym formacie, z którego mogą korzystać narzędzia na różnych platformach. Najczęściej używany jest JSON.

// tokens/color.json
{
  "color": {
    "brand": {
      "primary": { "value": "#2563eb" },
      "secondary": { "value": "#7c3aed" }
    },
    "text": {
      "default": { "value": "#111827" },
      "muted": { "value": "#6b7280" }
    }
  }
}

Style Dictionary

Style Dictionary (Amazon) to de facto standardowe narzędzie do budowania tokenów projektowych. Odczytuje tokeny i przekształca je do wielu formatów wyjściowych: zmiennych CSS, SCSS, stałych JS, Swift dla iOS i XML dla Androida.

npm install -D style-dictionary

Konfiguracja

Należy utworzyć style-dictionary.config.js opisujący tokeny wejściowe i platformy wyjściowe.

// style-dictionary.config.js
module.exports = {
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transformGroup: 'css',
      buildPath: 'build/css/',
      files: [{ destination: 'tokens.css', format: 'css/variables' }]
    },
    js: {
      transformGroup: 'js',
      buildPath: 'build/js/',
      files: [{ destination: 'tokens.js', format: 'javascript/es6' }]
    },
    ios: {
      transformGroup: 'ios',
      buildPath: 'build/ios/',
      files: [{ destination: 'Tokens.swift', format: 'ios-swift/class.swift' }]
    }
  }
};

Uruchamianie procesu budowania

Należy uruchomić CLI, aby wygenerować pliki dla wszystkich platform.

npx style-dictionary build

# Output:
# build/css/tokens.css     — CSS variables
# build/js/tokens.js       — JS constants
# build/ios/Tokens.swift   — Swift constants

Wygenerowany kod CSS

Zmienne CSS ze spójnym schematem nazewnictwa (kebab-case z przestrzenią nazw).

:root {
  --color-brand-primary: #2563eb;
  --color-brand-secondary: #7c3aed;
  --color-text-default: #111827;
  --color-text-muted: #6b7280;
}

Wygenerowany kod JS

Obiekt JS do użycia w kodzie JS/TS (konfiguracji Tailwind, CSS-in-JS).

export const ColorBrandPrimary = '#2563eb';
export const ColorBrandSecondary = '#7c3aed';
export const ColorTextDefault = '#111827';

Konwencje nazewnictwa tokenów

Należy używać nazw semantycznych (color.primary) zamiast literalnych (color.blue-500). Tokeny semantyczne pozwalają zmieniać wartości bez zmiany nazw. System dwupoziomowy: literalna paleta (blue-500) → alias semantyczny (primary).

{
  "color": {
    "palette": {
      "blue-500": { "value": "#2563eb" }
    },
    "brand": {
      "primary": { "value": "{color.palette.blue-500.value}" }
    }
  }
}

Tworzenie motywów za pomocą tokenów

Aby obsługiwać motywy (jasny/ciemny), należy budować pliki dla wielu platform z różnymi danymi wejściowymi — te same nazwy, różne wartości.

// Light theme:
--color-bg: white;
--color-text: black;

// Dark theme:
--color-bg: #111;
--color-text: white;

Kategorie tokenów

Typowe kategorie to: color, spacing, typography (font-family, size, line-height, weight), border (radius, width), shadow, transition (duration, easing), z-index i breakpoint.

Narzędzia do rejestracji tokenów

Oprócz Style Dictionary dostępne są: Tokens Studio (wtyczka do Figma), Specify i Supernova. Pozwalają one projektantom zarządzać tokenami w Figma i automatycznie synchronizować je z bazą kodu.

Szybkie sprawdzenie

Jaka jest główna korzyść z używania tokenów projektowych razem ze Style Dictionary?

Podsumowanie: tokeny projektowe

Tokeny to nazwane podstawowe wartości (kolor, odstępy, typografia) — źródło prawdy dla systemu projektowego. Należy przechowywać je jako JSON. Style Dictionary przekształca je w zmienne CSS, JS, iOS i Android. Należy stosować nazwy semantyczne (primary) zamiast literalnych (blue-500). System dwupoziomowy: paleta → alias semantyczny. Motywy można tworzyć za pomocą osobnych procesów budowania. Synchronizację z Figma zapewnia Tokens Studio.

Często zadawane pytania

Czy lekcja „Tokeny projektowe z Style Dictionary” jest bezpłatna?

Tak — pełny tekst „Tokeny projektowe z Style Dictionary” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Tokeny projektowe z Style Dictionary”?

Zdefiniuje Pan/Pani w JSON tokeny kolorów, odstępów i typografii, a następnie przekształci je za pomocą Style Dictionary w zmienne CSS, stałe JS lub formaty iOS/Android. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Tokeny projektowe z Style Dictionary”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?

Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Frontend Academy