Design Tokens samlar in varje CSS variabel, färg, teckensnittsstack, radie och skugga som en sida använder, sorterar dem i tokens, temalägen och komponentomfång, och laddar ner dem som W3C design-token JSON för Figma eller som en CSS fil.
Ett designsystem skrivs sällan ner så fullständigt som det är implementerat. Den verkliga paletten, mellanrumsskalan och typrampen finns i stilmallar – spridda över anpassade egenskaper, temaöverstyrningar och hårdkodade värden – och att bygga om dem för hand från DevTools innebär att klicka igenom hundratals regler och kopiera värden en i taget.
Detta verktyg läser dem alla på en gång. Den går igenom varje formatmall på sidan, inklusive korsoriginella som sidan själv inte får inspektera, och samlar in alla anpassade egenskaper, plus variabler som ställs in under körning i inline-stilar. Variabler på:root blir tokens; samma namn omdefinieras under en temaväljare som.dark, [data-theme="dark"] eller prefers-color-scheme blir separata lägen; variabler definierade på enskilda komponenter listas som omfång. Varje värde löses upp genom dess var() kedja, så att du ser färgen som faktiskt återges, inte bara en referens till en annan variabel.
Varje token klassificeras utifrån dess värde och namn — färg, teckensnittsfamilj, teckenstorlek, vikt, linjehöjd, avstånd, radie, skugga, gradient, varaktighet, easing eller z-index — och färgerna är normaliserade till hexadecimal, inklusive kanalformaten Tailwind och shadcn use ( 222 47% 11% triplets och Bootstrap -rgb. Vid sidan av de deklarerade variablerna renderade verktygsexemplen element för att rapportera färger, teckensnittsstaplar, storlekar, radier och skuggor som faktiskt används, med användningsräkningar - precis vad du behöver på en webbplats som aldrig har antagit variabler alls.
Exporten tar ett klick. Download tokens JSON sparar W3C Design Tokens formatet ( $value och $type), som Tokens Studio pluginen importerar till Figma och Style Dictionary förvandlar till kod för vilken plattform som helst; temalägen och observerade värden hålls i sina egna grupper, så ingenting blandas ihop. Download CSS skriver tillbaka variablerna som en stilmall, med varje läge under sin ursprungliga väljare.
Anpassade egenskaper från varje formatmall, inklusive ark med flera ursprung som sidan inte kan läsa, plus variabler som ställs in vid körning i inline-stilar.
Åsidosättningar under.dark, [data-theme] eller prefers-color-scheme blir separata lägen, som visas sida vid sida med basvärdet.
Varje var() -kedja löses och varje token skrivs som en färg, typsnitt, storlek, mellanrum, radie, skugga, varaktighet, lättnad eller z-index.
Hex, rgb, hsl, oklch, namngivna färger och endast kanalvärden Tailwind, shadcn och Bootstrap använder, alla normaliserade till hex.
Färger, teckensnittsstaplar, storlekar, vikter, radier och skuggor samplade från renderade element, med hur ofta var och en visas.
W3C design-token JSON för Tokens Studio och Style Dictionary, eller en CSS fil med alla lägen under sin ursprungliga väljare.
Importera den riktiga paletten, skriv och mellanrum till Tokens Studio istället för att välja färger från skärmdumpar.
Se hur många färger och teckenstorlekar en webbplats faktiskt använder, och vilka värden som går förbi de tokens som den definierar.
Jämför varje variabel som det mörka läget åsidosätter med dess ljusvärde, sida vid sida, och se de som aldrig åsidosattes.
Exportera tokens en gång och mata dem till Style Dictionary eller en Tailwind -konfiguration istället för att kopiera värden för hand.
Dra färgsystemet, typskala och radier för en webbplats du beundrar till en fil som du kan arbeta från.
Klicka på ikonen Design Tokens i DevSuite Pro dockan. Extraheringen körs direkt och sammanfattningen räknar variabler, lägen, färger och teckensnittsstaplar.
Fliken Färger visar varje token som en färgruta, delad för att visa varje temaläge, följt av färgerna som sidan återger, med användningsräkningar.
Typografi förhandsgranskar varje teckensnittsstapel och listar storlekar, vikter, radhöjder och @font-face -regler; den sista fliken täcker avstånd, radier, skuggor och rörelse.
Fliken Variabler listar alla anpassade egenskaper med dess skapade och lösta värde. Växla mellan bas, varje temaläge och komponentomfattade variabler.
Download tokens JSON för Figma via Tokens Studio, eller Download CSS för en stilmall. Markera kryssrutan för att även inkludera variabler med komponentomfattning.
Installera DevSuite Pro gratis och lås upp 74+ utvecklarverktyg för din webbläsare.
