Tasarım Token Dönüştürücü
Tasarım tokenlarını JSON, CSS değişkenleri ve SCSS formatları arasında dönüştürün.
Bu araç hakkında
Tasarım token'ları, modern tasarım sistemlerinin yapı taşlarıdır—renkler, boşluklar, tipografi, gölgeler ve diğer görsel özellikleri için standartlaştırılmış değerler olan ve ekipler ürünler arasında yeniden kullanan değerlerdir. Bu kararları tek bir format içinde merkezileştirerek ekipler görsel tutarlılığı sağlar, hataları azaltır ve hem tasarım hem de geliştirme iş akışlarını hızlandırır. Tek bir ürün üzerinde çalışıyor olsanız ya da birden çok platformu yönetiyor olsanız, tasarım token'ları bir kod tabanının farklı kısımlarında renkleri veya ölçüleri manuel olarak izleme ihtiyacını ortadan kaldırır.
Bu dönüştürücü, en yaygın tasarım token formatları arasında geçişi kolaylaştırır: JSON (token'ları basit bir anahtar-değer yapısı olarak depolar), CSS değişkenleri (browser'larda :root seçicileri aracılığıyla yerel olarak işlenir) ve SCSS değişkenleri (derleme adımı gerektirir ancak Sass ön işlemcileriyle sorunsuzca entegre olur). Token'larınızı herhangi bir biçimde yapıştırın ve hedef biçiminizi seçin—araç girişinizi otomatik olarak algılar ve projenize kopyala-yapıştır için hazır temiz çıktı oluşturur.
Tasarım token'larını kullanan ekipler genellikle JSON'ı kaynak biçimi olarak başlatır, ardından platforma özel çıktılar oluşturur: yerel tarayıcı desteği gerektiren web uygulamaları için CSS, Sass ile oluşturulan projeler için SCSS ve token'ları programlı olarak tüketen araçlar için JSON. Bu araç çift yönlü dönüştürmeyi destekler, bu nedenle mevcut CSS veya SCSS'den token'ları ayıklayabilir ve tasarım sisteminizi denetlemek veya yeniden düzenlemek istediğinizde bunları JSON'a geri dönüştürebilirsiniz.
Sıkça Sorulan Sorular
Kod Uygulaması
# 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.