Design Tokens indsamler hver CSS variabel, farve, skrifttypestak, radius og skygge, en side bruger, sorterer dem i tokens, tematilstande og komponentomfang og downloader dem som W3C design-token JSON til Figma eller som en CSS fil.
Et designsystem bliver sjældent nedskrevet så fuldstændigt, som det er implementeret. Den rigtige palet, mellemrumsskala og typerampe lever i stylesheets - spredt på tværs af brugerdefinerede egenskaber, tematilsidesættelser og hårdkodede værdier - og at genopbygge dem manuelt fra DevTools betyder, at du klikker gennem hundredvis af regler og kopierer værdier én ad gangen.
Dette værktøj læser dem alle på én gang. Den gennemgår hvert typografiark på siden, inklusive dem med krydsoprindelse, som siden ikke selv har tilladelse til at inspicere, og indsamler alle tilpassede egenskaber plus variabler indstillet under kørsel i inline-typografier. Variabler på:root bliver tokens; de samme navne omdefineret under en temavælger såsom.dark, [data-theme="dark"] eller prefers-color-scheme bliver separate tilstande; variabler defineret på individuelle komponenter er angivet som omfang. Hver værdi opløses gennem dens var() -kæde, så du ser den farve, der rent faktisk gengiver, ikke kun en reference til en anden variabel.
Hvert token er klassificeret ud fra dets værdi og navn - farve, skrifttypefamilie, skriftstørrelse, vægt, linjehøjde, mellemrum, radius, skygge, gradient, varighed, easing eller z-indeks - og farverne normaliseres til hex, inklusive kun kanalformaterne Tailwind og shadcn use ( 222 47% 11% triplets og Bootstrap ' -rgb 's. Ved siden af de erklærede variabler renderede værktøjseksemplerne elementer for at rapportere de farver, skrifttyper, størrelser, radier og skygger, der rent faktisk bruges, med forbrugstællinger - præcis det, du har brug for på et websted, der aldrig har overtaget variabler overhovedet.
Eksporten tager et klik. Download tokens JSON gemmer W3C Design Tokens formatet ( $value og $type), som Tokens Studio plugin'et importerer til Figma og Style Dictionary forvandler til kode for enhver platform; tematilstande og observerede værdier holdes i deres egne grupper, så intet bliver blandet sammen. Download CSS skriver variablerne tilbage som et stylesheet, med hver tilstand under dens oprindelige vælger.
Tilpassede egenskaber fra hvert typografiark, inklusive ark med krydsoprindelse, som siden ikke kan læse, plus variabler indstillet under kørsel i indlejrede typografier.
Tilsidesættelser under.dark, [data-theme] eller prefers-color-scheme bliver separate tilstande, der vises side om side med basisværdien.
Hver var() kæde er løst, og hver token skrives som en farve, skrifttype, størrelse, mellemrum, radius, skygge, varighed, lempelse eller z-indeks.
Hex, rgb, hsl, oklch, navngivne farver og kanalværdierne Tailwind, shadcn og Bootstrap brug, alle normaliseret til hex.
Farver, skrifttyper, størrelser, vægte, radier og skygger samplet fra gengivet elementer, med hvor ofte hver enkelt vises.
W3C design-token JSON til Tokens Studio og Style Dictionary eller en CSS fil med hver tilstand under dens oprindelige vælger.
Importer den rigtige palet, skriv og mellemrum i Tokens Studio i stedet for at vælge farver fra skærmbilleder.
Se, hvor mange farver og skriftstørrelser et websted faktisk bruger, og hvilke værdier der går uden om de tokens det definerer.
Sammenlign hver variabel, som den mørke tilstand tilsidesætter med dens lysværdi, side om side, og find dem, der aldrig blev tilsidesat.
Eksporter tokens én gang og indfør dem til Style Dictionary eller en Tailwind -konfiguration i stedet for at kopiere værdier i hånden.
Træk farvesystemet, typeskalaen og radierne på et websted, du beundrer, ind i en fil, du kan arbejde ud fra.
Klik på Design Tokens -ikonet i DevSuite Pro dockingstationen. Udtrækningen kører med det samme, og oversigten tæller variabler, tilstande, farver og skrifttyper.
Fanen Farver viser hvert token som en farveprøve, opdelt for at vise hver tematilstand, efterfulgt af de farver, siden gengiver, med brugstal.
Typografi viser hver enkelt skrifttypestak og viser størrelser, vægte, linjehøjder og @font-face regler; den sidste fane dækker mellemrum, radier, skygger og bevægelse.
Fanen Variabler viser hver tilpassede egenskab med dens oprettede og løste værdi. Skift mellem basis, hver tematilstand og variabler med komponentomfang.
Download tokens JSON til Figma via Tokens Studio, eller Download CSS for et stylesheet. Marker afkrydsningsfeltet for også at inkludere variabler med komponentomfang.
Installer DevSuite Pro gratis og lås op for 74+ udviklerværktøjer til din browser.
