Kısa cevap
Tasarım tokenı, renk, boşluk veya yazı boyutu gibi tekrar kullanılan bir tasarım kararının adlandırılmış değeridir.
Nerede işine yarar?
Değere yalnız sayısal ad vermek yerine kullanım anlamı da tanımlanabilir: yüzey, ana metin veya odak rengi gibi. Tasarım araçları ile kod aynı kararları paylaşabilir. Bir token değiştirilirken onu kullanan öğelerin bütün durumları kontrol edilir.
Tanımdan uygulamaya, kendi denemene.
Bir cümlede uygulaması
Her düğmeye ayrı mor renk yazmak yerine ana işlem rengi için ortak bir token kullanmak.
Neyle karıştırılmamalı?
Token, bileşenin tamamı değildir; bileşenin kullandığı bir tasarım kararını temsil eder.
Bir değerin adı, kararını anlatsın
Bir arayüzde aynı destek metni rengi birçok dosyada doğrudan renk koduyla yazılmış olsun. Koyu zemin biraz değiştiğinde bütün kullanımları tek tek bulmak gerekir. Tasarım tokeni bu değeri adlandırılmış bir karara bağlayabilir. Örneğin destek metni rolü, kullanılan somut renk değerinden ayrılır. Böylece tasarım konuşması yalnız 'şu gri' değil, 'bu bilgi hangi ağırlıkta okunmalı' sorusu üzerinden ilerler.
Token yalnız renkle sınırlı değildir. Boşluk, tipografi ölçüsü, köşe yarıçapı veya hareket süresi de ortak karar olarak adlandırılabilir. Ancak her sayıyı otomatik olarak token haline getirmek iyi bir sistem kurmaz. Tek bir görselin özel kadraj ölçüsüyle bütün sitede kullanılan kontrol yüksekliği aynı tekrar ihtiyacına sahip değildir. Adlandırmanın yararı, paylaşılan kararı daha anlaşılır ve yönetilebilir hale getirmesidir.
Birden fazla tema varsa rol ile değer ayrımı daha görünür olur. 'Metin birincil' rolü açık temada koyu, koyu temada açık bir renge bağlanabilir. Bileşen rolü kullanmaya devam ederken tema ilgili değeri sağlar. Yine de bu mekanizma otomatik kalite garantisi değildir. Renkler birlikte gerçek ekranda okunabilirlik, kontrast ve hiyerarşi açısından değerlendirilmelidir. Token adı yanlış bir eşleşmeyi doğru hale getirmez.
Token değişikliklerini değerlendirirken isimlerin kullanım alanını doğru sınırlandırmak gerekir. Örneğin bütün kenarlıklar aynı değere bağlıysa bir formun belirginleşmesi için yapılan değişiklik dekoratif çizgileri de gereksiz güçlendirebilir. Burada sorun değerin kendisinden çok, farklı rollerin aynı karar altında toplanmasıdır. Ayrıştırma yaparken her bileşene özel sınırsız token üretmek de başka bir uçtur. Tekrar eden rolleri bulmak ve gerçek ihtiyaca göre katman oluşturmak gerekir. Sistem ne kadar ayrıntılı olursa o kadar iyi sayılmaz; ekip doğru kararı bulabiliyor ve değişikliğin etkisini anlayabiliyor olmalıdır.
Tema uyarlamasında yalnız renkleri tersine çevirmek yeterli olmayabilir. Yüzeyler arasındaki derinlik, sınırların görünürlüğü ve destek metninin ağırlığı farklı zeminde yeniden değerlendirilir. Token sistemi bu ilişkileri yönetmeye yardımcı olur, fakat görsel kararı otomatik üretmez. Aynı rolün farklı temadaki karşılığını gerçek bileşenlerle incele ve gerektiğinde role özel ayar yap. Bu çalışma sonunda hangi değerlerin temaya, hangilerinin bütün ürüne ait olduğunu belgele. Böylece yeni tema eklenirken mevcut arayüzün anlamlı ilişkileri korunur ve yalnız renk değişmiş bir görüntüyle yetinilmez. İsim ile davranış arasındaki bağ tutarlı kalır.
Sabit değer ile anlamlı karar
Doğrudan değer
Bir bileşene belirli bir renk veya boşluk sayısı vermek bazen yeterlidir. Tekil bir görsel düzenlemede bunun ortaklaştırılması gerekmeyebilir. Fakat aynı karar birçok yerde tekrarlandığında doğrudan değerler birbirinden kopabilir. Küçük revizeler zamanla farklı varyantlar yaratır ve hangi değerin doğru olduğu belirsizleşir.
Token üzerinden kullanım
Adlandırılmış karar, tekrar eden kullanımın tek bir anlam altında toplanmasına yardım eder. Değer değiştiğinde hangi bileşenlerin etkileneceği daha görünür olur. Fakat bütün benzer renkleri tek tokene bağlamak da yanlış olabilir: metin ve dekoratif çizgi aynı görünse bile görevleri farklıdır. Ortaklaştırma yalnız görsel benzerliğe göre yapılmamalıdır.
Değer yerine anlamı adlandırmak
Bir rengi yalnız hex koduyla paylaşmak kullanım amacını açıklamaz. Anlama dayalı token, örneğin ikincil metin veya odak çizgisi, değişikliğin nerelere yansıyacağını belirginleştirir. Temel renk paleti ile bileşene özgü kararları ayrı seviyelerde tutmak esnekliği artırabilir.
- Adları görünüme değil kullanım amacına bağla.
- Tema ve durum değişimlerinde karşılıkları tanımla.
- Kod içinde sabit değerle yapılmış kaçak kullanımları kontrol et.
Her sayı token olmalı mı?
Tek seferlik bir çizimin bütün koordinatlarını token yapmak gereksiz olabilir. Tekrar eden veya birlikte değişmesi gereken kararlar önceliklidir. Token yapısı ekibin anlamasını kolaylaştırmalı, sıradan bir düzenlemeyi karmaşıklaştırmamalıdır.
İşin içinde sorulacaklar.
Her CSS değişkeni bir tasarım tokeni mi?
CSS değişkeni bir uygulama mekanizmasıdır; tasarım tokeni ise paylaşılan tasarım kararını temsil eder. Bir değişken yalnız tek sahnedeki geçici hesap için kullanılabilir. Buna karşılık aynı tasarım tokeni farklı platformlarda farklı biçimlere dönüştürülebilir. İsimlerin nasıl dışa aktarılacağı kullanılan araçlara göre değişir. Önce kararın anlamını ve kullanımını tanımla, sonra bunun kodda hangi mekanizmayla temsil edileceğini seç.
Token ismi renge mi role mi göre olmalı?
Sistem farklı katmanlar kullanabilir. Ham palet tonları renk ailesiyle adlandırılırken kullanım katmanı metin, yüzey veya sınır rolüne göre adlandırılabilir. Her projede çok katmanlı bir düzen gerekli değildir. Önemli olan yeni bir bileşen yapan kişinin doğru değeri seçebilmesidir. İsim bir rolü anlatıyorsa farklı temalarda aynı rolü korumalı; bir renkten diğerine geçince anlamsız hale gelmemelidir.
Bir token değişikliği neden bütün siteyi etkileyebilir?
Paylaşılan karar birçok bileşen tarafından kullanılıyorsa değişiklik doğal olarak geniş alana yayılır. Bu sistemin yararıdır, fakat etkisinin anlaşılması gerekir. Destek metnini açmak bir sayfada iyi görünürken başka yüzeyde kontrastı bozabilir. Kullanım yerlerini ve tema ilişkilerini birlikte gözden geçir. Bir sorunu çözmek için ortak tokeni değiştirmek yerine, gerçekten farklı bir rol gerekiyorsa bunu ayrı tanımlamak daha doğru olabilir.
Bir rengi rolüne geri bağla
Sitedeki destek metinlerini ve yüzey sınırlarını incele. Birbirine yakın değerlerin hangi görevlerle kullanıldığını çıkar. Amaç bütün renkleri azaltmak değil, ortak ve farklı kararları doğru adlandırmak.
Tasarım tokeni, sayılara isim vermekten daha fazlasıdır. Ortak tasarım kararını görünür kılar. İyi isim, doğru kapsam ve gerçek kullanım ilişkisi birlikte kurulmadığında yalnız başka bir değer listesi oluşur.
Bağlantılı kavramlar
- Tasarım sistemiTasarım sistemi, bir ürün ailesinin tutarlı geliştirilmesini sağlayan ilkeler, bileşenler, tasarım kararları ve kullanım rehberlerinin bütünüdür.
- UIUI, bir kişinin dijital ürünle etkileşim kurduğu ekran, kontrol ve görsel geri bildirimlerin oluşturduğu arayüzdür.
- Görsel hiyerarşiGörsel hiyerarşi, içerikte neyin önce ve neyin sonra fark edilmesi gerektiğini ölçek, renk, boşluk ve konumla düzenlemektir.