Design Tokens apkopo katru lapas izmantoto CSS mainīgo, krāsu, fontu kopu, rādiusu un ēnu, sakārto tos bāzes tokens, motīvu režīmos un komponentu tvērumos un lejupielādē tos kā W3C design-token JSON for Figma vai kā CSS failu.
Projektēšanas sistēma reti tiek pierakstīta tik pilnībā, kā tā ir ieviesta. Īstā palete, atstarpju skala un tipa rampa atrodas stila lapās — izkliedēti pa pielāgotajiem rekvizītiem, motīvu ignorēšanu un cieti kodētām vērtībām, un to manuāla pārbūve no DevTools nozīmē noklikšķināt cauri simtiem kārtulu un kopēt vērtības pa vienai.
Šis rīks nolasa tos visus uzreiz. Tas izmanto visas lapas stila lapas, tostarp tās, kuras pašai lapai nav atļauts pārbaudīt, un apkopo visus pielāgotos rekvizītus, kā arī mainīgos, kas izpildlaikā iestatīti iekļautajos stilos. Mainīgie uz:root kļūst par bāzes tokens; tie paši nosaukumi, kas atkārtoti definēti motīvu atlasītājā, piemēram,.dark, [data-theme="dark"] vai prefers-color-scheme kļūst par atsevišķiem režīmiem; atsevišķiem komponentiem definētie mainīgie tiek uzskaitīti kā tvērums. Katra vērtība tiek atrisināta, izmantojot tās var() ķēdi, tāpēc jūs redzat krāsu, kas faktiski tiek renderēta, nevis tikai atsauci uz citu mainīgo.
Katrs token tiek klasificēts pēc tā vērtības un nosaukuma — krāsa, fontu saime, fonta lielums, svars, līnijas augstums, atstarpes, rādiuss, ēna, gradients, ilgums, atvieglojums vai z indekss — un krāsas tiek normalizētas uz hex, -rgb tikai kanālu formātus Tailwind un shadcn use ( 222 47% 11%) un Bootstrap. Līdzās deklarētajiem mainīgajiem rīka paraugi atveidoja elementus, lai ziņotu par faktiski izmantotajām krāsām, fontu kopumiem, izmēriem, rādiusiem un ēnām ar lietojuma skaitu — tieši tas, kas jums nepieciešams vietnē, kurā vispār nav pieņemti mainīgie.
Eksportēšana prasa vienu klikšķi. Download tokens JSON saglabā W3C Design Tokens formātu ( $value un $type), ko Tokens Studio spraudnis importē Figma un Style Dictionary pārvērš par kodu jebkurai platformai; tēmu režīmi un novērotās vērtības tiek saglabātas savās grupās, tāpēc nekas netiek sajaukts. Download CSS mainīgos ieraksta atpakaļ kā stila lapu ar katru režīmu zem tā sākotnējā atlasītāja.
Pielāgoti rekvizīti no katras stila lapas, tostarp starpizcelsmes lapas, kuras lapa nevar nolasīt, kā arī mainīgie, kas izpildlaikā iestatīti iekļautajos stilos.
Ignorējumi zem.dark, [data-theme] vai prefers-color-scheme kļūst par atsevišķiem režīmiem, kas tiek rādīti blakus pamata vērtībai.
Katra var() ķēde ir atrisināta, un katrs token tiek ierakstīts kā krāsa, fonts, izmērs, atstarpes, rādiuss, ēna, ilgums, atvieglojums vai z-indekss.
Hex, rgb, hsl, oklch, nosauktās krāsas un tikai kanālu vērtības Tailwind, shadcn un Bootstrap use, visas normalizētas uz hex.
Krāsas, fontu kopas, izmēri, svērumi, rādiusi un ēnas, kas ņemtas no renderētajiem elementiem, norādot, cik bieži katrs no tiem parādās.
W3C design-token JSON kas paredzēta Tokens Studio un Style Dictionary, vai CSS fails ar katru režīmu zem tā sākotnējā atlasītāja.
Importējiet īsto paleti, ierakstiet un atstarpes Tokens Studio nevis izvēlieties krāsas no ekrānuzņēmumiem.
Skatiet, cik krāsu un fontu izmēru vietne faktiski izmanto un kuras vērtības apiet tās definētos tokens.
Salīdziniet katru mainīgo, ko tumšais režīms ignorē, ar tā gaismas vērtību blakus un atrodiet tos, kas nekad netika ignorēti.
Vienreiz eksportējiet tokens un ievadiet tos Style Dictionary vai Tailwind konfigurācijā, nevis kopējiet vērtības ar roku.
Apbrīnojamās vietnes krāsu sistēmu, tipa skalu un rādiusus izveidojiet failā, no kura varat strādāt.
Noklikšķiniet uz ikonas Design Tokens DevSuite Pro dokā. Izvilkšana tiek palaista uzreiz, un kopsavilkumā tiek uzskaitīti mainīgie, režīmi, krāsas un fontu kopas.
Cilnē Krāsas tiek parādīts katrs krāsu token kā paraugs, kas sadalīts, lai parādītu katru motīva režīmu, kam seko lapas atveidotās krāsas ar lietojuma skaitu.
Tipogrāfija priekšskata katru fontu kaudzi un uzskaita izmērus, svarus, līniju augstumus un @font-face noteikumus; pēdējā cilne aptver atstarpes, rādiusus, ēnas un kustību.
Cilnē Mainīgie ir norādīts katrs pielāgotais rekvizīts ar tā autorizēto un atrisināto vērtību. Pārslēdzieties starp bāzes, katra motīva režīmu un komponentu tvēruma mainīgajiem.
Download tokens JSON for Figma, izmantojot Tokens Studio, vai Download CSS, lai iegūtu stila lapu. Atzīmējiet izvēles rūtiņu, lai iekļautu arī komponentu tvēruma mainīgos.
Instalējiet DevSuite Pro bez maksas un atbloķējiet 74+ izstrādātāju rīkus savam pārlūkam.
