Design Tokens mengumpulkan setiap variabel CSS, warna, tumpukan font, radius, dan bayangan yang digunakan halaman, mengurutkannya ke dalam tokens dasar, mode tema, dan cakupan komponen, dan mengunduhnya sebagai JSON design-token W3C untuk Figma atau sebagai file CSS.
Sebuah sistem desain jarang ditulis selengkap saat diimplementasikan. Palet sebenarnya, skala spasi, dan ramp tipe ada di stylesheet — tersebar di seluruh properti khusus, penggantian tema, dan nilai yang dikodekan secara permanen — dan membangunnya kembali dengan tangan dari DevTools berarti mengeklik ratusan aturan dan menyalin nilai satu per satu.
Alat ini membaca semuanya sekaligus. Ini menjalankan setiap stylesheet pada halaman, termasuk cross-origin yang tidak boleh diperiksa oleh halaman itu sendiri, dan mengumpulkan setiap properti khusus, ditambah variabel yang disetel saat runtime dalam gaya inline. Variabel pada:root menjadi tokens dasar; nama yang sama didefinisikan ulang di bawah pemilih tema seperti.dark, [data-theme="dark"] atau prefers-color-scheme menjadi mode terpisah; variabel yang ditentukan pada masing-masing komponen dicantumkan sebagai cakupan. Setiap nilai diselesaikan melalui rantai var() nya, sehingga Anda melihat warna yang benar-benar ditampilkan, bukan sekadar referensi ke variabel lain.
Setiap token diklasifikasikan berdasarkan nilai dan namanya — warna, jenis font, ukuran font, berat, tinggi garis, spasi, radius, bayangan, gradien, durasi, easing, atau indeks-z — dan warna dinormalisasi menjadi hex, termasuk format khusus saluran yang menggunakan Tailwind dan shadcn ( 222 47% 11%) dan triplet -rgb Bootstrap. Selain variabel yang dideklarasikan, alat ini mengambil sampel elemen yang dirender untuk melaporkan warna, tumpukan font, ukuran, jari-jari, dan bayangan yang sebenarnya digunakan, dengan jumlah penggunaan — persis seperti yang Anda perlukan di situs yang tidak pernah mengadopsi variabel sama sekali.
Ekspor membutuhkan satu klik. Download tokens JSON menyimpan format Design Tokens W3C ( $value dan $type), yang diimpor oleh plugin Tokens Studio ke Figma dan Style Dictionary diubah menjadi kode untuk platform apa pun; mode tema dan nilai-nilai yang diamati disimpan dalam kelompoknya masing-masing, sehingga tidak ada yang tercampur. Download CSS menulis kembali variabel sebagai stylesheet, dengan setiap mode di bawah pemilih aslinya.
Properti khusus dari setiap stylesheet, termasuk sheet lintas asal yang tidak dapat dibaca halaman, ditambah variabel yang disetel saat runtime dalam gaya inline.
Mengganti pada.dark, [data-theme] atau prefers-color-scheme menjadi mode terpisah, ditampilkan berdampingan dengan nilai dasar.
Setiap rantai var() diselesaikan, dan setiap token diketik berdasarkan warna, font, ukuran, spasi, radius, bayangan, durasi, easing, atau indeks-z.
Hex, rgb, hsl, oklch, nama warna dan nilai saluran saja yang digunakan Tailwind, shadcn dan Bootstrap, semuanya dinormalisasi ke hex.
Warna, tumpukan font, ukuran, bobot, jari-jari, dan bayangan diambil sampelnya dari elemen yang dirender, serta seberapa sering masing-masing elemen tersebut muncul.
JSON design-token W3C untuk Tokens Studio dan Style Dictionary, atau file CSS dengan setiap mode di bawah pemilih aslinya.
Impor palet asli, ketik dan spasi ke Tokens Studio alih-alih memilih warna dari tangkapan layar.
Lihat berapa banyak warna dan ukuran font yang sebenarnya digunakan situs, dan nilai mana yang mengabaikan tokens yang ditentukannya.
Bandingkan setiap variabel yang ditimpa mode gelap dengan nilai cahayanya, secara berdampingan, dan temukan variabel yang tidak pernah ditimpa.
Ekspor tokens satu kali dan masukkan ke Style Dictionary atau konfigurasi Tailwind, bukan menyalin nilai secara manual.
Tarik sistem warna, ketik skala dan jari-jari situs yang Anda kagumi ke dalam file tempat Anda bekerja.
Klik ikon Design Tokens di dok DevSuite Pro. Ekstraksi langsung berjalan dan ringkasan menghitung variabel, mode, warna, dan tumpukan font.
Tab Warna memperlihatkan setiap token warna sebagai contoh, dibagi untuk menampilkan setiap mode tema, diikuti dengan warna yang ditampilkan halaman, dengan jumlah penggunaan.
Tipografi mempratinjau setiap tumpukan font dan mencantumkan ukuran, bobot, tinggi garis, dan aturan @font-face; tab terakhir mencakup jarak, jari-jari, bayangan, dan gerakan.
Tab Variabel mencantumkan setiap properti khusus dengan nilai yang dibuat dan diselesaikan. Beralih antara basis, setiap mode tema, dan variabel cakupan komponen.
Download tokens JSON untuk Figma melalui Tokens Studio, atau Download CSS untuk stylesheet. Centang kotak untuk menyertakan variabel cakupan komponen juga.
Instal DevSuite Pro secara gratis dan buka 74+ alat pengembang untuk browser Anda.
