Design Tokens zhromažďuje každú premennú CSS, farbu, zásobník písiem, polomer a tieň, ktoré stránka používa, triedi ich do základných tokens, režimov tém a rozsahov komponentov a sťahuje ich ako W3C design-token JSON pre Figma alebo ako súbor CSS.
Dizajnový systém je málokedy zapísaný tak úplne, ako je implementovaný. Skutočná paleta, mierka medzier a typová rampa žijú v šablónach štýlov – rozmiestnených vo vlastných vlastnostiach, prepisoch tém a pevne zakódovaných hodnotách – a ich prestavba ručne z DevTools znamená preklikávanie stovkami pravidiel a kopírovanie hodnôt po jednej.
Tento nástroj ich prečíta všetky naraz. Prechádza každú šablónu so štýlmi na stránke vrátane tých, ktoré pochádzajú z rôznych zdrojov, ktoré samotná stránka nemôže kontrolovať, a zhromažďuje všetky vlastné vlastnosti plus premenné nastavené za behu v inline štýloch. Premenné na:root sa stanú základnými tokens; rovnaké názvy predefinované pod výberom témy, ako napríklad.dark, [data-theme="dark"] alebo prefers-color-scheme sa stanú samostatnými režimami; premenné definované na jednotlivých komponentoch sú uvedené ako rozsah. Každá hodnota je vyriešená prostredníctvom svojho var() reťazca, takže vidíte farbu, ktorá sa skutočne vykresľuje, nielen odkaz na inú premennú.
Každý token je klasifikovaný podľa svojej hodnoty a názvu – farba, rodina písma, veľkosť písma, váha, výška riadku, medzery, polomer, tieň, prechod, trvanie, nábeh alebo z-index – a farby sú normalizované na hex, vrátane formátov, ktoré používajú iba kanály Tailwind a shadcn ( 222 47% 11%) a Bootstrap -rgb. Popri deklarovaných premenných nástroj vzorky vykreslil prvky, aby nahlásil farby, zásobníky písiem, veľkosti, polomery a tiene, ktoré sa skutočne používajú, s počtom použitia – presne to, čo potrebujete na webe, ktorý nikdy neprijal premenné.
Export trvá jedným kliknutím. Download tokens JSON ukladá formát W3C Design Tokens ( $value a $type), ktorý doplnok Tokens Studio importuje do Figma a Style Dictionary premení na kód pre akúkoľvek platformu; režimy tém a pozorované hodnoty sa uchovávajú vo vlastných skupinách, takže sa nič nemieša. Download CSS zapíše premenné späť ako šablónu so štýlmi, pričom každý režim bude mať svoj pôvodný selektor.
Vlastné vlastnosti z každej šablóny so štýlmi vrátane hárkov s krížovým pôvodom, ktoré stránka nedokáže prečítať, plus premenné nastavené za behu vo vložených štýloch.
Prepísania pod.dark, [data-theme] alebo prefers-color-scheme sa stanú samostatnými režimami, ktoré sa zobrazia vedľa seba so základnou hodnotou.
Každý var() reťazec je vyriešený a každý token je napísaný ako farba, font, veľkosť, medzery, polomer, tieň, trvanie, nábeh alebo z-index.
Hexadecimálne, rgb, hsl, oklch, pomenované farby a hodnoty len pre kanály Tailwind, shadcn a Bootstrap, všetky sú normalizované na hex.
Farby, zásobníky písiem, veľkosti, hmotnosti, polomery a tiene naskúšané z vykreslených prvkov, s tým, ako často sa každý objavuje.
W3C design-token JSON pre Tokens Studio a Style Dictionary alebo súbor CSS s každým režimom pod jeho pôvodným selektorom.
Importujte skutočnú paletu, typ a medzery do Tokens Studio namiesto vyberania farieb zo snímok obrazovky.
Zistite, koľko farieb a veľkostí písma stránka skutočne používa a ktoré hodnoty obchádzajú tokens ktoré definuje.
Porovnajte vedľa seba každú premennú, ktorú tmavý režim prepíše, s jej svetlou hodnotou a nájdite tie, ktoré neboli nikdy prepísané.
Exportujte tokens raz a vložte ich do Style Dictionary alebo konfigurácie Tailwind, namiesto toho, aby ste hodnoty kopírovali ručne.
Vytiahnite farebný systém, typovú stupnicu a polomery lokality, ktorú obdivujete, do súboru, z ktorého môžete pracovať.
Kliknite na ikonu Design Tokens v doku DevSuite Pro. Extrakcia prebieha okamžite a súhrn počíta premenné, režimy, farby a zásobníky písma.
Karta Farby zobrazuje každý farebný token ako vzorník rozdelený na zobrazenie každého režimu motívu, za ktorým nasledujú farby, ktoré stránka vykresľuje, s počtom použitia.
Typografia zobrazuje náhľad každého zásobníka písiem a uvádza veľkosti, váhy, výšky riadkov a pravidlá @font-face; posledná záložka pokrýva medzery, polomery, tiene a pohyb.
Na karte Premenné je uvedená každá vlastná vlastnosť s jej navrhnutou a vyriešenou hodnotou. Prepínajte medzi základným, režimom každej témy a premennými v rozsahu komponentov.
Download tokens JSON pre Figma cez Tokens Studio alebo Download CSS pre šablónu so štýlmi. Začiarknutím políčka zahrniete aj premenné v rozsahu komponentov.
Nainštalujte si DevSuite Pro zadarmo a odomknite viac ako 74 vývojárskych nástools pre váš prehliadač.
