Tokens Studio

Tokens Studio pozwala tworzyć i utrzymywać design tokeny bezpośrednio w narzędziu projektowym, a następnie synchronizować je z repozytorium Git jako pliki JSON. Dzięki temu projektant i kod pracują na jednym źródle prawdy: zmiana tokenu w projekcie trafia do repo, a stamtąd — np. przez Style Dictionary — do CSS i kodu.

Kiedy używać

• Chcesz, by tokeny powstawały po stronie projektu i automatycznie wracały do kodu.
• Utrzymujesz wiele motywów/marek i potrzebujesz aliasów oraz semantycznych warstw tokenów.
• Domykasz pętlę „design ↔ code” bez ręcznego przepisywania wartości.

Przykład użycia

// tokens.json synchronizowane z repo
{
  "color": {
    "rust":  { "value": "#A8482A", "type": "color" },
    "link":  { "value": "{color.rust}", "type": "color" }
  }
}

# w repo: tokens.json → Style Dictionary → tokens.css
npx style-dictionary build

Warto wiedzieć

• Aliasy ({color.rust}) pozwalają budować semantyczne warstwy tokenów.
• Naturalnie spina się ze Style Dictionary i Penpot.