Design Tokens samler hver CSS variabel, farge, skriftstabel, radius og skygge en side bruker, sorterer dem i tokens, temamoduser og komponentomfang, og laster dem ned som W3C design-token JSON for Figma eller som en CSS fil.
Et designsystem skrives sjelden ned så fullstendig som det er implementert. Den virkelige paletten, avstandsskalaen og typen rampe ligger i stilark – spredt over egendefinerte egenskaper, temaoverstyringer og hardkodede verdier – og å gjenoppbygge dem for hånd fra DevTools betyr å klikke gjennom hundrevis av regler og kopiere verdier én om gangen.
Dette verktøyet leser dem alle på en gang. Den går gjennom hvert stilark på siden, inkludert de med kryssopprinnelse siden selv ikke har tillatelse til å inspisere, og samler inn hver egendefinert egenskap, pluss variabler satt under kjøring i innebygde stiler. Variabler på:root blir base tokens; de samme navnene omdefinert under en temavelger som.dark, [data-theme="dark"] eller prefers-color-scheme blir separate moduser; variabler definert på individuelle komponenter er oppført som scoped. Hver verdi blir løst gjennom var() kjeden, slik at du ser fargen som faktisk gjengir, ikke bare en referanse til en annen variabel.
Hvert token er klassifisert fra dens verdi og navn – farge, skriftfamilie, skriftstørrelse, vekt, linjehøyde, avstand, radius, skygge, gradient, varighet, lettelse eller z-indeks – og fargene er normalisert til hex, inkludert kanalformatene Tailwind og shadcn use ( 222 47% 11% triplets og Bootstrap ' -rgb 's. Ved siden av de deklarerte variablene, gjengav verktøyeksemplene elementer for å rapportere fargene, fontstablene, størrelsene, radiene og skyggene som faktisk brukes, med brukstall – akkurat det du trenger på et nettsted som aldri har tatt i bruk variabler i det hele tatt.
Eksporten tar ett klikk. Download tokens JSON lagrer W3C Design Tokens formatet ( $value og $type), som Tokens Studio pluginen importerer til Figma og Style Dictionary gjør om til kode for enhver plattform; temamoduser og observerte verdier holdes i sine egne grupper, så ingenting blir blandet sammen. Download CSS skriver variablene tilbake som et stilark, med hver modus under sin opprinnelige velger.
Egendefinerte egenskaper fra hvert stilark, inkludert ark med tvers av opprinnelse siden ikke kan lese, pluss variabler satt under kjøring i innebygde stiler.
Overstyringer under.dark, [data-theme] eller prefers-color-scheme blir separate moduser, vist side om side med grunnverdien.
Hver var() kjede blir løst, og hvert token skrives inn som en farge, skrift, størrelse, mellomrom, radius, skygge, varighet, lettelse eller z-indeks.
Hex, rgb, hsl, oklch, navngitte farger og kanalverdiene Tailwind, shadcn og Bootstrap bruker, alle normalisert til hex.
Farger, skriftstabler, størrelser, vekter, radier og skygger samplet fra gjengitte elementer, med hvor ofte hver enkelt vises.
W3C design-token JSON for Tokens Studio and Style Dictionary, eller en CSS fil med hver modus under den opprinnelige velgeren.
Importer den ekte paletten, skriv og mellomrom inn i Tokens Studio i stedet for å velge farger fra skjermbilder.
Se hvor mange farger og skriftstørrelser et nettsted faktisk bruker, og hvilke verdier som omgår tokens det definerer.
Sammenlign hver variabel som mørk modus overstyrer med lysverdien, side ved side, og se de som aldri ble overstyrt.
Eksporter tokens én gang og mat dem til Style Dictionary eller en Tailwind -konfigurasjon i stedet for å kopiere verdier for hånd.
Trekk fargesystemet, typeskalaen og radiene til et nettsted du beundrer inn i en fil du kan jobbe fra.
Klikk på Design Tokens -ikonet i DevSuite Pro dokken. Utvinningen kjører umiddelbart og sammendraget teller variabler, moduser, farger og skriftstabler.
Farger-fanen viser hvert token som en fargeprøve, delt for å vise hver temamodus, etterfulgt av fargene siden gjengir, med brukstall.
Typografi forhåndsviser hver fontstabel og viser størrelser, vekter, linjehøyder og @font-face -regler; den siste fanen dekker mellomrom, radier, skygger og bevegelse.
Variabler-fanen viser hver egendefinert egenskap med dens opprettede og løste verdi. Bytt mellom basis, hver temamodus og variabler med komponentomfang.
Download tokens JSON for Figma via Tokens Studio, eller Download CSS for et stilark. Merk av i avmerkingsboksen for å inkludere variabler med komponentomfang også.
Installer DevSuite Pro gratis og lås opp 74+ utviklerverktøy for nettleseren din.
