Design Tokens prikupljaju svaku CSS varijablu, boju, hrpu fontova, radijus i sjenu koje stranica koristi, razvrstavaju ih u osnovne tokens, načine teme i opsege komponenti te ih preuzimaju kao JSON W3C design-token za Figma ili kao CSS datoteku.
Sustav dizajna rijetko je tako potpun kako je implementiran. Prava paleta, skala razmaka i rampa tipa žive u stilskim tablicama — raspoređenim po prilagođenim svojstvima, zaobilaženjima tema i tvrdo kodiranim vrijednostima — a njihova ponovna ručna izgradnja iz DevTools znači klikanje kroz stotine pravila i kopiranje vrijednosti jednu po jednu.
Ovaj alat ih čita sve odjednom. Obilazi svaku tablicu stilova na stranici, uključujući one različitih izvora koje samoj stranici nije dopušteno pregledavati, i prikuplja sva prilagođena svojstva, plus varijable postavljene tijekom izvođenja u ugrađenim stilovima. Varijable na:root postaju osnovni tokens; ista imena redefinirana pod selektorom teme kao što su.dark, [data-theme="dark"] ili prefers-color-scheme postaju zasebni načini rada; varijable definirane na pojedinačnim komponentama navedene su kao ograničene. Svaka se vrijednost razrješava kroz svoj lanac var(), tako da vidite boju koja se zapravo prikazuje, a ne samo referencu na drugu varijablu.
Svaki je token klasificiran prema svojoj vrijednosti i nazivu — boji, obitelji fontova, veličini fonta, težini, visini linije, razmaku, radijusu, sjeni, gradijentu, trajanju, ublažavanju ili z-indeksu — a boje su normalizirane u hex, uključujući formate samo za kanale koje koriste Tailwind i shadcn ( 222 47% 11%) i Bootstrap triplete -rgb. Uz deklarirane varijable, alat uzorkuje renderirane elemente za izvješćivanje o bojama, hrpama fontova, veličinama, radijusima i sjenkama koje se stvarno koriste, s brojevima korištenja — upravo ono što trebate na web mjestu koje uopće nije usvojilo varijable.
Izvoz traje jednim klikom. Download tokens JSON sprema format W3C Design Tokens ( $value i $type), koji dodatak Tokens Studio uvozi u Figma i Style Dictionary pretvara u kod za bilo koju platformu; načini teme i promatrane vrijednosti čuvaju se u svojim grupama, tako da se ništa ne miješa. Download CSS zapisuje varijable natrag kao tablicu stilova, sa svakim načinom rada pod svojim izvornim biračem.
Prilagođena svojstva iz svake tablice stilova, uključujući tablice različitih izvora koje stranica ne može čitati, plus varijable postavljene tijekom izvođenja u ugrađenim stilovima.
Nadjačavanja pod.dark, [data-theme] ili prefers-color-scheme postaju zasebni načini, prikazani rame uz rame s osnovnom vrijednošću.
Svaki var() lanac je razriješen, a svaki token je upisan kao boja, font, veličina, razmak, radijus, sjena, trajanje, ublažavanje ili z-indeks.
Hex, rgb, hsl, oklch, imenovane boje i vrijednosti samo za kanale koje koriste Tailwind, shadcn i Bootstrap, sve normalizirano na hex.
Boje, nizovi fontova, veličine, težine, radijusi i sjene uzorkovani iz renderiranih elemenata, s učestalošću pojavljivanja svakog od njih.
W3C design-token JSON za Tokens Studio i Style Dictionary ili CSS datoteka sa svakim načinom rada pod izvornim biračem.
Uvezite stvarnu paletu, tip i razmak u Tokens Studio umjesto biranja boja sa snimki zaslona.
Pogledajte koliko boja i veličina fonta stranica zapravo koristi i koje vrijednosti zaobilaze tokens koje definira.
Usporedite svaku varijablu koju tamni način nadjačava s njenom svijetlom vrijednošću, jednu pored druge, i uočite one koje nikada nisu nadjačane.
Izvezite tokens jednom i unesite ih u Style Dictionary ili konfiguraciju Tailwind umjesto ručnog kopiranja vrijednosti.
Povucite sustav boja, ljestvicu tipa i radijus stranice kojoj se divite u datoteku iz koje možete raditi.
Kliknite ikonu Design Tokens u DevSuite Pro docku. Ekstrakcija se pokreće odmah, a sažetak broji varijable, načine, boje i nizove fontova.
Kartica Boje prikazuje svaki token boje kao uzorak, podijeljen za prikaz svakog načina teme, nakon čega slijede boje koje stranica prikazuje, s brojkama korištenja.
Tipografija pregledava svaki niz fontova i navodi veličine, težine, visine redaka i pravila @font-face; posljednja kartica pokriva razmak, polumjere, sjene i kretanje.
Kartica Variables navodi svako prilagođeno svojstvo s autorskom i razriješenom vrijednošću. Prebacivanje između baze, načina svake teme i varijabli opsega komponente.
Download tokens JSON za Figma putem Tokens Studio ili Download CSS za tablicu stilova. Označite potvrdni okvir da uključite i varijable s opsegom komponente.
Instalirajte DevSuite Pro besplatno i otključajte 74+ razvojnih alata za svoj preglednik.
