Design Tokens zbiera każdą zmienną CSS, kolor, stos czcionek, promień i cień używany przez stronę, sortuje je na tokens podstawowe, tryby motywów i zakresy komponentów, a następnie pobiera je jako design-token W3C JSON dla Figma lub jako plik CSS.
System projektowy rzadko jest spisany tak całkowicie, jak jest wdrażany. Prawdziwa paleta, skala odstępów i rampa typów znajdują się w arkuszach stylów — rozmieszczonych w niestandardowych właściwościach, nadpisaniach motywów i na stałe zakodowanych wartościach — a ręczne ich przebudowywanie za pomocą DevTools oznacza klikanie setek reguł i kopiowanie wartości pojedynczo.
To narzędzie odczytuje je wszystkie na raz. Przechodzi przez każdy arkusz stylów na stronie, łącznie z arkuszami pochodzącymi z innych źródeł, których sama strona nie może sprawdzać, i zbiera wszystkie niestandardowe właściwości oraz zmienne ustawiane w stylach wbudowanych w czasie wykonywania. Zmienne w:root stają się tokens bazowymi; te same nazwy ponownie zdefiniowane w selektorze motywu, takie jak.dark, [data-theme="dark"] lub prefers-color-scheme stają się oddzielnymi trybami; zmienne zdefiniowane dla poszczególnych komponentów są wymienione jako objęte zakresem. Każda wartość jest rozpoznawana poprzez łańcuch var(), więc widzisz kolor, który faktycznie jest renderowany, a nie tylko odniesienie do innej zmiennej.
Każdy token jest klasyfikowany na podstawie wartości i nazwy — koloru, rodziny czcionek, rozmiaru czcionki, grubości, wysokości linii, odstępów, promienia, cienia, gradientu, czasu trwania, złagodzenia lub indeksu Z — a kolory są normalizowane do wartości szesnastkowej, włączając formaty tylko dla kanałów Tailwind i shadcn ( 222 47% 11%) oraz trójki -rgb Bootstrap. Oprócz zadeklarowanych zmiennych, narzędzie pobiera próbki renderowanych elementów, aby zgłosić faktycznie używane kolory, stosy czcionek, rozmiary, promienie i cienie, wraz ze licznikami użycia — czyli dokładnie to, czego potrzebujesz w witrynie, która w ogóle nie przyjęła zmiennych.
Eksport zajmuje jedno kliknięcie. Download tokens JSON zapisuje format W3C Design Tokens ( $value i $type), który wtyczka Tokens Studio importuje do Figma, a Style Dictionary zamienia się w kod dla dowolnej platformy; tryby tematyczne i obserwowane wartości są przechowywane w oddzielnych grupach, więc nic się nie pomiesza. Download CSS zapisuje zmienne z powrotem jako arkusz stylów, z każdym trybem pod oryginalnym selektorem.
Niestandardowe właściwości z każdego arkusza stylów, w tym arkusze pochodzące z różnych źródeł, których strona nie może odczytać, a także zmienne ustawiane w czasie wykonywania w stylach wbudowanych.
Zastąpienia pod.dark, [data-theme] lub prefers-color-scheme stają się oddzielnymi trybami, pokazywanymi obok wartości bazowej.
Każdy łańcuch var() jest rozwiązywany, a każdy token jest wpisywany jako kolor, czcionka, rozmiar, odstępy, promień, cień, czas trwania, złagodzenie lub indeks Z.
Hex, rgb, hsl, oklch, nazwane kolory i wartości tylko dla kanałów Używane Tailwind, shadcn i Bootstrap, wszystkie znormalizowane do formatu szesnastkowego.
Kolory, stosy czcionek, rozmiary, wagi, promienie i cienie pobrane z renderowanych elementów, wraz z częstotliwością pojawiania się każdego z nich.
design-token W3C JSON dla Tokens Studio i Style Dictionary lub plik CSS z każdym trybem w ramach oryginalnego selektora.
Zaimportuj prawdziwą paletę, typ i odstępy do Tokens Studio zamiast wybierać kolory ze zrzutów ekranu.
Zobacz, ilu kolorów i rozmiarów czcionek faktycznie używa witryna oraz jakie wartości omijają zdefiniowane przez nią tokens.
Porównaj każdą zmienną, którą zastępuje tryb ciemny, z jej wartością światła, obok siebie i znajdź te, które nigdy nie zostały zastąpione.
Wyeksportuj tokens raz i przekaż je do Style Dictionary lub konfiguracji Tailwind, zamiast ręcznie kopiować wartości.
Przeciągnij system kolorów, wpisz skalę i promienie witryny, którą podziwiasz, do pliku, na którym możesz pracować.
Kliknij ikonę Design Tokens w doku DevSuite Pro. Ekstrakcja przebiega natychmiast, a podsumowanie zlicza zmienne, tryby, kolory i stosy czcionek.
Karta Kolory przedstawia każdy token koloru jako próbkę podzieloną w celu pokazania poszczególnych trybów motywu, a następnie kolorów renderowanych przez stronę i liczników użycia.
Typografia wyświetla podgląd każdego stosu czcionek i wyświetla rozmiary, wagę, wysokość linii i reguły @font-face; ostatnia zakładka obejmuje odstępy, promienie, cienie i ruch.
Karta Zmienne zawiera listę wszystkich właściwości niestandardowych wraz z ich autorską i rozwiązaną wartością. Przełączaj między trybem podstawowym, każdym trybem motywu i zmiennymi o zasięgu komponentu.
Download tokens JSON dla Figma za pośrednictwem Tokens Studio lub Download CSS dla arkusza stylów. Zaznacz pole wyboru, aby uwzględnić także zmienne o zasięgu komponentu.
Zainstaluj DevSuite Pro za darmo i odblokuj ponad 74 narzędzi programistycznych dla swojej przeglądarki.
