Design Tokens bir sayfanın kullandığı her CSS değişkenini, rengi, yazı tipi yığınını, yarıçapı ve gölgeyi toplar, bunları temel tokens, tema modlarına ve bileşen kapsamlarına göre sıralar ve bunları Figma için W3C design-token JSON olarak veya bir CSS dosyası olarak indirir.
Bir tasarım sistemi nadiren uygulandığı şekliyle tam olarak yazılır. Gerçek palet, aralık ölçeği ve tür rampası, özel özelliklere, tema geçersiz kılmalarına ve sabit kodlanmış değerlere yayılmış stil sayfalarında bulunur ve bunları DevTools elle yeniden oluşturmak, yüzlerce kurala tıklamak ve değerleri birer birer kopyalamak anlamına gelir.
Bu araç hepsini aynı anda okur. Sayfanın kendisinin incelemesine izin verilmeyen çapraz kaynaklar da dahil olmak üzere sayfadaki her stil sayfasını inceler ve her özel özelliğin yanı sıra çalışma zamanında satır içi stillerde ayarlanan değişkenleri toplar.:root üzerindeki değişkenler temel tokens haline gelir;.dark, [data-theme="dark"] veya prefers-color-scheme gibi bir tema seçici altında yeniden tanımlanan aynı adlar ayrı modlar haline gelir; Bireysel bileşenlerde tanımlanan değişkenler kapsamlı olarak listelenir. Her değer var() zinciri aracılığıyla çözümlenir, böylece yalnızca başka bir değişkene yapılan referansı değil, gerçekte oluşturulan rengi görürsünüz.
Her token, değerine ve adına (renk, yazı tipi ailesi, yazı tipi boyutu, ağırlık, satır yüksekliği, aralık, yarıçap, gölge, degrade, süre, hareket hızı veya z-endeksi) göre sınıflandırılır ve renkler, Tailwind ve shadcn kullandığı yalnızca kanal formatları ( 222 47% 11%) ve Bootstrap -rgb üçlüleri dahil olmak üzere onaltılık olarak normalleştirilir. Araç örnekleri, bildirilen değişkenlerin yanı sıra, gerçekte kullanılan renkleri, yazı tipi yığınlarını, boyutları, yarıçapları ve gölgeleri kullanım sayılarıyla birlikte raporlayan öğeler oluşturdu; bu, değişkenleri hiçbir zaman benimsememiş bir sitede tam olarak ihtiyacınız olan şeydir.
Dışa aktarma tek tıklamayla gerçekleşir. Download tokens JSON Tokens Studio eklentisinin Figma aktardığı ve Style Dictionary herhangi bir platform için koda dönüştürdüğü W3C Design Tokens biçimini ( $value ve $type) kaydeder; Tema modları ve gözlemlenen değerler kendi gruplarında tutulur, böylece hiçbir şey birbirine karışmaz. Download CSS değişkenleri her modun orijinal seçicisinin altında olacak şekilde bir stil sayfası olarak geri yazar.
Sayfanın okuyamadığı çapraz kökenli sayfalar ve satır içi stillerde çalışma zamanında ayarlanan değişkenler dahil olmak üzere her stil sayfasındaki özel özellikler.
.dark, [data-theme] veya prefers-color-scheme altındaki geçersiz kılmalar, temel değerle yan yana gösterilen ayrı modlar haline gelir.
Her var() zinciri çözümlenir ve her token bir renk, yazı tipi, boyut, aralık, yarıçap, gölge, süre, hareket hızı veya z-endeksi olarak yazılır.
Hex, rgb, hsl, oklch, adlandırılmış renkler ve Tailwind, shadcn ve Bootstrap kullandığı yalnızca kanal değerlerinin tümü hex'e normalleştirilmiştir.
İşlenen öğelerden örneklenen renkler, yazı tipi yığınları, boyutlar, ağırlıklar, yarıçaplar ve gölgeler ve her birinin görünme sıklığı.
Tokens Studio ve Style Dictionary için W3C design-token JSON veya orijinal seçicisinin altında her modun bulunduğu bir CSS dosyası.
Ekran görüntülerinden renk seçmek yerine gerçek paleti, yazı tipini ve aralıkları Tokens Studio aktarın.
Bir sitenin gerçekte kaç renk ve yazı tipi boyutu kullandığını ve hangi değerlerin tanımladığı tokens atladığını görün.
Karanlık modun geçersiz kıldığı her değişkeni ışık değeriyle yan yana karşılaştırın ve hiçbir zaman geçersiz kılınmayanları tespit edin.
tokens bir kez dışa aktarın ve değerleri elle kopyalamak yerine bunları Style Dictionary veya Tailwind yapılandırmasına besleyin.
Hayran olduğunuz bir sitenin renk sistemini, yazı ölçeğini ve yarıçaplarını üzerinde çalışabileceğiniz bir dosyaya çekin.
DevSuite Pro dock'ta Design Tokens simgesine tıklayın. Çıkarma işlemi hemen yürütülür ve özet değişkenleri, modları, renkleri ve yazı tipi yığınlarını sayar.
Renkler sekmesi, her renk token bir renk örneği olarak, her tema modunu gösterecek şekilde bölünmüş olarak, ardından sayfanın oluşturduğu renkleri ve kullanım sayımlarını gösterir.
Tipografi her yazı tipi yığınının ön izlemesini yapar ve boyutları, ağırlıkları, satır yüksekliklerini ve @font-face kurallarını listeler; son sekme aralık, yarıçap, gölgeler ve hareketi kapsar.
Değişkenler sekmesi, her özel özelliği, yazılan ve çözümlenen değeriyle birlikte listeler. Temel, her tema modu ve bileşen kapsamlı değişkenler arasında geçiş yapın.
Figma için Download tokens JSON Tokens Studio aracılığıyla indirin veya stil sayfası için Download CSS. Bileşen kapsamlı değişkenleri de dahil etmek için onay kutusunu işaretleyin.
DevSuite Pro'yu ücretsiz yükleyin ve tarayıcınız için 74'dan fazla geliştirici aracının kilidini açın.
