Design Tokens shromažďuje každou proměnnou CSS, barvu, zásobník písem, poloměr a stín, které stránka používá, třídí je do základních tokens, režimů témat a rozsahů komponent a stahuje je jako W3C design-token JSON pro Figma nebo jako soubor CSS.
Návrhový systém je zřídka zapsán tak úplně, jako je implementován. Skutečná paleta, měřítko mezer a typová rampa žijí v šablonách stylů – rozprostřených mezi vlastními vlastnostmi, přepsáním témat a pevně zakódovanými hodnotami – a jejich ruční přestavba z DevTools znamená proklikávání se stovkami pravidel a kopírování hodnot jednu po druhé.
Tento nástroj je přečte všechny najednou. Prochází každou šablonu stylů na stránce, včetně těch z různých zdrojů, které samotná stránka nemůže kontrolovat, a shromažďuje všechny vlastní vlastnosti plus proměnné nastavené za běhu v inline stylech. Proměnné na:root se stanou základními tokens; stejná jména předefinovaná pod selektorem motivu, jako je.dark, [data-theme="dark"] nebo prefers-color-scheme se stanou samostatnými režimy; proměnné definované na jednotlivých komponentách jsou uvedeny jako rozsah. Každá hodnota je vyřešena prostřednictvím svého řetězce var(), takže vidíte barvu, která se skutečně vykresluje, nikoli pouze odkaz na jinou proměnnou.
Každý token je klasifikován podle své hodnoty a názvu – barva, rodina písem, velikost písma, váha, výška řádku, mezery, poloměr, stín, přechod, trvání, náběh nebo z-index – a barvy jsou normalizovány na hex, včetně formátů pouze pro kanály používají Tailwind a shadcn ( 222 47% 11%) a Bootstrap -rgb. Kromě deklarovaných proměnných nástroj vzorkuje vykreslované prvky, aby nahlásil barvy, zásobníky písem, velikosti, poloměry a stíny, které se skutečně používají, s počty využití – přesně to, co potřebujete na webu, který nikdy žádné proměnné nepřijal.
Export trvá jedním kliknutím. Download tokens JSON ukládá formát W3C Design Tokens ( $value a $type), který plugin Tokens Studio importuje do Figma a Style Dictionary promění v kód pro jakoukoli platformu; režimy témat a pozorované hodnoty jsou uchovávány ve vlastních skupinách, takže se nic neplete. Download CSS zapíše proměnné zpět jako šablonu stylů, přičemž každý režim bude pod svým původním selektorem.
Uživatelské vlastnosti z každé šablony stylů, včetně šablon s více zdroji, které stránka nemůže přečíst, plus proměnné nastavené za běhu v vložených stylech.
Přepsání pod.dark, [data-theme] nebo prefers-color-scheme se stanou samostatnými režimy, které se zobrazují vedle sebe se základní hodnotou.
Každý řetězec var() je vyřešen a každý token je zadán jako barva, písmo, velikost, mezery, poloměr, stín, trvání, náběh nebo z-index.
Hex, rgb, hsl, oklch, pojmenované barvy a hodnoty pouze pro kanál, které používají Tailwind, shadcn a Bootstrap, vše normalizováno na hex.
Barvy, sady písem, velikosti, tloušťky, poloměry a stíny vzorkované z vykreslených prvků, s tím, jak často se každý z nich objevuje.
W3C design-token JSON pro Tokens Studio a Style Dictionary nebo soubor CSS s každým režimem pod jeho původním selektorem.
Importujte skutečnou paletu, typ a mezery do Tokens Studio namísto vybírání barev ze snímků obrazovky.
Podívejte se, kolik barev a velikostí písma web skutečně používá a které hodnoty obcházejí tokens které definuje.
Porovnejte vedle sebe každou proměnnou, kterou tmavý režim přepíše, s její hodnotou světla, a najděte ty, které nebyly nikdy přepsány.
Exportujte tokens jednou a vložte je do Style Dictionary nebo konfigurace Tailwind, nikoli ručně kopírujte hodnoty.
Přetáhněte barevný systém, typové měřítko a poloměry stránky, kterou obdivujete, do souboru, ze kterého můžete pracovat.
Klikněte na ikonu Design Tokens v doku DevSuite Pro. Extrakce běží rovnou a souhrn počítá proměnné, režimy, barvy a zásobníky písem.
Karta Barvy zobrazuje každý barevný token jako vzorek, rozdělený tak, aby zobrazoval každý režim motivu, následovaný barvami, které stránka vykresluje, s počty použití.
Typografie zobrazuje náhled každého zásobníku písem a uvádí velikosti, váhy, výšky řádků a pravidla @font-face; poslední záložka pokrývá mezery, poloměry, stíny a pohyb.
Karta Proměnné uvádí všechny vlastní vlastnosti s jejich vytvořenou a vyřešenou hodnotou. Přepínejte mezi základním, každým motivovým režimem a proměnnými v rozsahu komponent.
Download tokens JSON pro Figma přes Tokens Studio nebo Download CSS pro šablonu stylů. Zaškrtnutím políčka zahrnete také proměnné v rozsahu komponent.
Nainstalujte si DevSuite Pro zdarma a odemkněte 74+ vývojářských nástrojů pro svůj prohlížeč.
