Design Tokens zbirajo vsako spremenljivko CSS, barvo, sklad pisave, radij in senco, ki jih uporablja stran, jih razvrstijo v osnovne tokens, načine teme in obsege komponent ter jih prenesejo kot design-token W3C JSON za Figma ali kot datoteko CSS.
Sistem načrtovanja je redko zapisan tako popolno, kot je implementiran. Prava paleta, merilo razmika in tipska rampa živijo v slogovnih listih — razporejenih po lastnostih po meri, preglasitvah tem in trdo kodiranih vrednostih — in njihova ponovna ročna izdelava iz DevTools pomeni klikanje na stotine pravil in kopiranje vrednosti eno za drugo.
To orodje jih prebere vse hkrati. Sprehodi se po vsaki slogovni tabeli na strani, vključno s tistimi iz navzkrižnega izvora, ki jih sama stran ne sme pregledati, in zbere vsako lastnost po meri ter spremenljivke, nastavljene med izvajanjem v slogih v vrstici. Spremenljivke na:root postanejo osnovni tokens; ista imena, redefinirana pod izbirnikom tem, kot je.dark, [data-theme="dark"] ali prefers-color-scheme postanejo ločeni načini; spremenljivke, definirane na posameznih komponentah, so navedene kot obseg. Vsaka vrednost je razrešena prek svoje verige var(), tako da vidite barvo, ki se dejansko upodablja, ne le sklicevanja na drugo spremenljivko.
Vsak token je razvrščen glede na njegovo vrednost in ime – barva, družina pisav, velikost pisave, teža, višina črte, razmik, polmer, senca, gradient, trajanje, popuščanje ali z-indeks – in barve so normalizirane na šestnajstiško, vključno s formati samo za kanale, ki uporabljata Tailwind in shadcn ( 222 47% 11%) in Bootstrap trojčkom -rgb. Poleg prijavljenih spremenljivk je orodje upodobilo elemente za poročanje o barvah, nizih pisav, velikostih, radijih in sencah, ki so dejansko uporabljene, s štetji uporabe – točno to, kar potrebujete na spletnem mestu, ki spremenljivk sploh ni sprejelo.
Izvoz traja en klik. Download tokens JSON shrani obliko W3C Design Tokens ( $value in $type), ki jo vtičnik Tokens Studio uvozi v Figma in Style Dictionary spremeni v kodo za katero koli platformo; načini teme in opazovane vrednosti se hranijo v svojih skupinah, tako da se nič ne pomeša. Download CSS zapiše spremenljivke nazaj kot slogovno tabelo, pri čemer je vsak način pod svojim izvirnim izbirnikom.
Lastnosti po meri iz vsake tabele slogov, vključno s tabelami navzkrižnega izvora, ki jih stran ne more brati, in spremenljivke, nastavljene med izvajanjem v slogih v vrstici.
Preglasitve pod.dark, [data-theme] ali prefers-color-scheme postanejo ločeni načini, prikazani vzporedno z osnovno vrednostjo.
Vsaka veriga var() je razrešena in vsak token je vnesen kot barva, pisava, velikost, razmik, polmer, senca, trajanje, popuščanje ali z-indeks.
Hex, rgb, hsl, oklch, imenovane barve in vrednosti samo za kanale, ki jih uporabljajo Tailwind, shadcn in Bootstrap, vse normalizirano na hex.
Barve, skladi pisav, velikosti, teže, radiji in sence, vzorčeni iz upodobljenih elementov, s tem, kako pogosto se vsak pojavi.
design-token W3C JSON za Tokens Studio in Style Dictionary ali datoteka CSS z vsakim načinom pod izvirnim izbirnikom.
Uvozite pravo paleto, tip in razmik v Tokens Studio namesto da izbirate barve s posnetkov zaslona.
Oglejte si, koliko barv in velikosti pisave spletno mesto dejansko uporablja in katere vrednosti obidejo tokens ki jih definira.
Primerjajte vsako spremenljivko, ki jo temni način preglasi, z njeno svetlobno vrednostjo, eno poleg druge, in poiščite tiste, ki niso bile nikoli preglasene.
Izvozite tokens enkrat in jih vnesite v Style Dictionary ali konfiguracijo Tailwind namesto ročnega kopiranja vrednosti.
Prenesite barvni sistem, tipsko lestvico in polmere mesta, ki ga občudujete, v datoteko, iz katere lahko delate.
Kliknite ikono Design Tokens v doku DevSuite Pro. Ekstrakcija steče takoj, povzetek pa šteje spremenljivke, načine, barve in nize pisav.
Zavihek Barve prikazuje vsak barvni token kot vzorec, razdeljen za prikaz vsakega načina teme, ki mu sledijo barve, ki jih upodablja stran, s štetjem uporabe.
Tipografija predogleduje vsak sklad pisav in navaja velikosti, teže, višine vrstic in pravila @font-face; zadnji zavihek pokriva razmik, radije, sence in gibanje.
Zavihek Spremenljivke navaja vse lastnosti po meri z avtorsko in razrešeno vrednostjo. Preklapljajte med osnovnim načinom, vsako temo in spremenljivkami v obsegu komponente.
Download tokens JSON za Figma prek Tokens Studio ali Download CSS za tabelo s slogi. Označite potrditveno polje, če želite vključiti tudi spremenljivke v obsegu komponente.
Namestite DevSuite Pro brezplačno in odklenite več kot 74 orodij za razvijalce za svoj brskalnik.
