Design Tokens mengumpulkan setiap pembolehubah CSS, warna, tindanan fon, jejari dan bayang yang digunakan oleh halaman, mengisihnya ke dalam tokens asas, mod tema dan skop komponen, dan memuat turunnya sebagai JSON design-token W3C untuk Figma atau sebagai fail CSS.
Sistem reka bentuk jarang ditulis sepenuhnya kerana ia dilaksanakan. Palet sebenar, skala jarak dan tanjakan jenis hidup dalam helaian gaya — tersebar merentas sifat tersuai, penggantian tema dan nilai berkod keras — dan membina semulanya dengan tangan daripada DevTools bermakna mengklik melalui ratusan peraturan dan menyalin nilai satu demi satu.
Alat ini membaca semuanya sekaligus. Ia memaparkan setiap helaian gaya pada halaman, termasuk helaian silang asal yang halaman itu sendiri tidak dibenarkan untuk diperiksa dan mengumpulkan setiap sifat tersuai, serta pembolehubah yang ditetapkan pada masa jalan dalam gaya sebaris. Pembolehubah pada:root menjadi tokens asas; nama yang sama ditakrifkan semula di bawah pemilih tema seperti.dark, [data-theme="dark"] atau prefers-color-scheme menjadi mod berasingan; pembolehubah yang ditakrifkan pada komponen individu disenaraikan sebagai berskop. Setiap nilai diselesaikan melalui rantaian var() nya, jadi anda melihat warna yang sebenarnya dipaparkan, bukan hanya rujukan kepada pembolehubah lain.
Setiap token diklasifikasikan daripada nilai dan namanya — warna, keluarga fon, saiz fon, berat, ketinggian garisan, jarak, jejari, bayang-bayang, kecerunan, tempoh, pelonggaran atau indeks-z — dan warna dinormalkan kepada hex, -rgb format saluran sahaja penggunaan Tailwind dan shadcn ( 222 47% 11%) dan Bootstrap '. Di samping pembolehubah yang diisytiharkan, sampel alat menghasilkan elemen untuk melaporkan warna, susunan fon, saiz, jejari dan bayang-bayang yang sebenarnya digunakan, dengan kiraan penggunaan — tepat apa yang anda perlukan di tapak yang tidak pernah menggunakan pembolehubah sama sekali.
Eksport mengambil satu klik. Download tokens JSON menyimpan format Design Tokens W3C ( $value dan $type), yang diimport oleh pemalam Tokens Studio ke dalam Figma dan Style Dictionary bertukar menjadi kod untuk mana-mana platform; mod tema dan nilai yang diperhatikan disimpan dalam kumpulan mereka sendiri, jadi tiada apa yang bercampur aduk. Download CSS menulis semula pembolehubah sebagai helaian gaya, dengan setiap mod di bawah pemilih asalnya.
Sifat tersuai daripada setiap helaian gaya, termasuk helaian silang asal yang tidak boleh dibaca oleh halaman, serta pembolehubah yang ditetapkan pada masa jalan dalam gaya sebaris.
Mengatasi di bawah.dark, [data-theme] atau prefers-color-scheme menjadi mod berasingan, ditunjukkan bersebelahan dengan nilai asas.
Setiap rantaian var() diselesaikan dan setiap token ditaip sebagai warna, fon, saiz, jarak, jejari, bayang-bayang, tempoh, pelonggaran atau indeks-z.
Hex, rgb, hsl, oklch, warna yang dinamakan dan nilai saluran sahaja penggunaan Tailwind, shadcn dan Bootstrap, semuanya dinormalkan kepada hex.
Warna, susunan fon, saiz, berat, jejari dan bayang-bayang sampel daripada unsur yang diberikan, dengan kekerapan setiap satu muncul.
JSON design-token W3C untuk Tokens Studio dan Style Dictionary, atau fail CSS dengan setiap mod di bawah pemilih asalnya.
Import palet sebenar, taip dan jarakkan ke dalam Tokens Studio dan bukannya memilih warna daripada tangkapan skrin.
Lihat bilangan warna dan saiz fon yang sebenarnya digunakan oleh tapak, dan nilai yang mana memintas tokens yang ditentukannya.
Bandingkan setiap pembolehubah yang digantikan oleh mod gelap dengan nilai cahayanya, bersebelahan dan lihat pembolehubah yang tidak pernah ditindih.
Eksport tokens sekali dan suapkannya ke Style Dictionary atau konfigurasi Tailwind dan bukannya menyalin nilai dengan tangan.
Tarik sistem warna, skala taip dan jejari tapak yang anda kagumi ke dalam fail yang anda boleh kerjakan.
Klik ikon Design Tokens dalam dok DevSuite Pro. Pengekstrakan berjalan terus dan ringkasan mengira pembolehubah, mod, warna dan susunan fon.
Tab Warna menunjukkan setiap token warna sebagai swatch, belah untuk menunjukkan setiap mod tema, diikuti dengan warna yang dipaparkan oleh halaman, dengan kiraan penggunaan.
Tipografi pratonton setiap susunan fon dan menyenaraikan saiz, berat, ketinggian garisan dan peraturan @font-face; tab terakhir meliputi jarak, jejari, bayang-bayang dan gerakan.
Tab Pembolehubah menyenaraikan setiap sifat tersuai dengan nilai yang diarang dan diselesaikan. Beralih antara asas, setiap mod tema dan pembolehubah skop komponen.
Download tokens JSON untuk Figma melalui Tokens Studio, atau Download CSS untuk lembaran gaya. Tandakan kotak semak untuk memasukkan pembolehubah berskop komponen juga.
Pasang DevSuite Pro secara percuma dan buka 74+ alat pembangun untuk pelayar anda.
