Konverter Design Token
Konversi design token antara JSON, variabel CSS, dan format SCSS.
Tentang alat ini
Design token adalah blok bangunan dari sistem desain modern—nilai standar untuk warna, spasi, tipografi, bayangan, dan properti visual lainnya yang digunakan kembali tim di seluruh produk. Dengan memusatkan keputusan ini dalam format tunggal, tim mempertahankan konsistensi visual, mengurangi bug, dan mempercepat alur kerja desain dan pengembangan. Baik Anda bekerja pada produk tunggal atau mengelola berbagai platform, design token menghilangkan kebutuhan untuk melacak warna atau pengukuran secara manual di berbagai bagian codebase.
Konverter ini memudahkan pengalihan antara format design token yang paling umum: JSON (yang menyimpan token sebagai struktur kunci-nilai sederhana), variabel CSS (yang dirender secara native di browser melalui pemilih :root), dan variabel SCSS (yang memerlukan tahap build namun terintegrasi dengan mulus dengan preprocessor Sass). Cukup tempel token Anda dalam format apa pun dan pilih format target—alat secara otomatis mendeteksi input Anda dan menghasilkan output yang bersih siap untuk disalin dan ditempel ke proyek Anda.
Tim yang menggunakan design token biasanya dimulai dengan JSON sebagai format sumber, kemudian menghasilkan output khusus platform: CSS untuk aplikasi web yang membutuhkan dukungan browser native, SCSS untuk proyek yang dibangun dengan Sass, dan JSON untuk alat yang mengonsumsi token secara terprogram. Alat ini mendukung konversi dua arah, sehingga Anda dapat mengekstrak token dari CSS atau SCSS yang ada dan mengonversinya kembali ke JSON kapan pun Anda perlu mengaudit atau me-refactor sistem desain Anda.
Pertanyaan yang Sering Diajukan
Implementasi Kode
# Convert JSON design tokens to CSS variables
def tokens_to_css_vars(tokens: dict) -> str:
lines = [f" --{k}: {v};" for k, v in tokens.items()]
return ":root {\n" + "\n".join(lines) + "\n}"
# Convert JSON design tokens to SCSS variables
def tokens_to_scss(tokens: dict) -> str:
return "\n".join(f"${k}: {v};" for k, v in tokens.items())
tokens = {
"color-primary": "#6366f1",
"spacing-4": "16px",
"border-radius": "8px"
}
print(tokens_to_css_vars(tokens))
print(tokens_to_scss(tokens))Comments & Feedback
Comments are powered by Giscus. Sign in with GitHub to leave a comment.