Kinokolekta ng Design Tokens ang bawat variable CSS, kulay, font stack, radius at shadow na ginagamit ng isang page, pinagbubukod-bukod ang mga ito sa mga base tokens, theme mode at component scope, at dina-download ang mga ito bilang W3C design-token JSON para sa Figma o bilang isang CSS file.
Ang isang sistema ng disenyo ay bihirang isulat nang buo habang ito ay ipinatupad. Ang totoong palette, spacing scale at type na ramp ay nakatira sa mga stylesheet — kumalat sa mga custom na property, theme overrides at hard-coded values — at ang muling pagbuo sa mga ito sa pamamagitan ng kamay mula sa DevTools ay nangangahulugan ng pag-click sa daan-daang panuntunan at pagkopya ng mga value nang paisa-isa.
Binabasa ng tool na ito ang mga ito nang sabay-sabay. Inilalakad nito ang bawat stylesheet sa page, kabilang ang mga cross-origin na hindi pinapayagang suriin ng page mismo, at kinokolekta nito ang bawat custom na property, kasama ang mga variable na itinakda sa runtime sa mga inline na istilo. Ang mga variable sa:root ay nagiging base tokens; ang parehong mga pangalan na muling tinukoy sa ilalim ng isang tagapili ng tema gaya ng.dark, [data-theme="dark"] o prefers-color-scheme ay nagiging hiwalay na mga mode; Ang mga variable na tinukoy sa mga indibidwal na bahagi ay nakalista bilang saklaw. Naresolba ang bawat value sa pamamagitan ng var() chain nito, kaya makikita mo ang kulay na aktwal na nagre-render, hindi lamang isang reference sa isa pang variable.
Ang bawat token ay inuri mula sa halaga at pangalan nito — kulay, pamilya ng font, laki ng font, timbang, taas ng linya, spacing, radius, anino, gradient, tagal, easing o z-index — at ang mga kulay ay na-normalize sa hex, kabilang ang mga channel-only na format na ginagamit ng Tailwind at shadcn ( 222 47% 11% -rgb at Bootstrap '. Sa tabi ng mga ipinahayag na variable, ang mga sample ng tool ay nag-render ng mga elemento upang iulat ang mga kulay, font stack, laki, radii at anino na aktwal na ginagamit, na may mga bilang ng paggamit — kung ano mismo ang kailangan mo sa isang site na hindi kailanman gumamit ng mga variable.
Ang pag-export ay tumatagal ng isang pag-click. Download tokens JSON ay nagse-save ng W3C Design Tokens na format ( $value at $type), na ini-import ng plugin ng Tokens Studio sa Figma at Style Dictionary ay nagiging code para sa anumang platform; theme modes at observed values are keeped in their own groups, so nothing gets mixed up. Isinulat Download CSS ang mga variable bilang isang stylesheet, na ang bawat mode ay nasa ilalim ng orihinal na tagapili nito.
Mga custom na property mula sa bawat stylesheet, kabilang ang mga cross-origin sheet na hindi mabasa ng page, at mga variable na itinakda sa runtime sa mga inline na istilo.
Ang mga override sa ilalim ng.dark, [data-theme] o prefers-color-scheme ay nagiging magkahiwalay na mga mode, na ipinapakita nang magkatabi kasama ang base value.
Ang bawat var() chain ay naresolba, at ang bawat token ay tina-type bilang isang kulay, font, laki, spacing, radius, anino, tagal, easing o z-index.
Hex, rgb, hsl, oklch, pinangalanang mga kulay at ang channel-only na mga value na ginagamit ng Tailwind, shadcn at Bootstrap, lahat ay na-normalize sa hex.
Mga kulay, font stack, laki, timbang, radii at anino na na-sample mula sa mga nai-render na elemento, kung gaano kadalas lumilitaw ang bawat isa.
W3C design-token JSON para sa Tokens Studio at Style Dictionary, o isang CSS file na may bawat mode sa ilalim ng orihinal nitong selector.
I-import ang totoong palette, uri at espasyo sa Tokens Studio sa halip na pumili ng mga kulay mula sa mga screenshot.
Tingnan kung gaano karaming mga kulay at laki ng font ang aktwal na ginagamit ng isang site, at kung aling mga halaga ang lumalampas sa tokens na tinukoy nito.
Ihambing ang bawat variable na ino-override ng dark mode sa light value nito, magkatabi, at makita ang mga hindi kailanman na-override.
I-export ang tokens nang isang beses at i-feed ang mga ito sa Style Dictionary o isang Tailwind config kaysa sa pagkopya ng mga value sa pamamagitan ng kamay.
Hilahin ang sistema ng kulay, sukat ng uri at radii ng isang site na hinahangaan mo sa isang file kung saan ka maaaring magtrabaho.
I-click ang icon Design Tokens sa DevSuite Pro dock. Ang pagkuha ay tumatakbo kaagad at ang buod ay nagbibilang ng mga variable, mode, kulay at font stack.
Ipinapakita ng tab na Mga Kulay ang bawat token ng kulay bilang isang swatch, hati upang ipakita ang bawat mode ng tema, na sinusundan ng mga kulay na ire-render ng page, na may mga bilang ng paggamit.
Tinitingnan ng Typography ang bawat stack ng font at naglilista ng mga laki, timbang, taas ng linya at mga panuntunan @font-face; ang huling tab ay sumasaklaw sa espasyo, radii, mga anino at paggalaw.
Inililista ng tab na Mga Variable ang bawat custom na ari-arian kasama ang iniakda at naresolbang halaga nito. Lumipat sa pagitan ng base, bawat mode ng tema at mga variable na saklaw ng bahagi.
Download tokens JSON para sa Figma sa pamamagitan ng Tokens Studio, o Download CSS para sa isang stylesheet. Lagyan ng tsek ang checkbox upang isama rin ang mga variable na saklaw ng bahagi.
I-install ang DevSuite Pro nang libre at i-unlock ang 74+ developer tools para sa iyong browser.
