Tasarım dosyasında her şey yerli yerinde: sekiz basamaklı boşluk ölçeği, tanımlı renk değişkenleri, dört tipografi seviyesi. Üç hafta sonra yayına giren sitede ise aynı butonun üç farklı yüksekliği var. Bu, iletişim sorunu gibi görünür ama gerçekte bir format sorunudur.
Sorun nerede başlıyor?
Tasarımcı ekranı piksel olarak düşünür, geliştirici ise bileşen olarak. Devir sırasında tasarım dosyası “görsel referans” muamelesi görürse, geliştirici her ekranı tek tek ölçmek zorunda kalır. Ölçüm yaptığı anda da küçük sapmalar başlar: 24 yerine 25 piksel, #4C6FFF yerine #4D70FF.
Tasarım sistemi bir dosya değil, iki tarafın da aynı isimlerle konuştuğu ortak bir sözlüktür. Sözlük yoksa çeviri kaybı kaçınılmazdır.— Develcodex tasarım ekibi
Çözüm: değişkenle devir
Tasarımdan koda geçen şey ekran görüntüsü değil, token olmalı. Renk, boşluk, yarıçap ve gölge değerleri isimlendirilmiş değişkenler hâlinde devredilirse, geliştirici ölçüm yapmaz — değişkeni kullanır.
:root {
--brand: #4c6fff;
--brand-2: #7c5cff;
--uzay-1: 4px;
--uzay-2: 8px;
--uzay-3: 12px;
--uzay-4: 16px;
--uzay-6: 24px;
--uzay-8: 32px;
--r-s: 12px;
--r-m: 18px;
--r-l: 24px;
}Figma tarafında bu değerler “Variables” olarak tanımlanır ve aynı isimle CSS’e taşınır. İsimler birebir aynı olduğunda, tasarımcı “uzay-6 kullandım” dediğinde geliştiricinin ölçmesine gerek kalmaz.
Devir kontrol listesi
- Renkler değişken olarak tanımlı; hiçbir katmanda serbest hex yok
- Boşluk ölçeği en fazla sekiz basamak; ara değer kullanılmamış
- Tipografi seviyeleri isimlendirilmiş (h1…h4, gövde, küçük)
- Bileşenler varyantlarıyla birlikte hazır (hover, disabled, hata)
- Duyarlı davranış en az üç genişlikte gösterilmiş
- Erişilebilirlik notları eklenmiş (odak halkası, kontrast oranı)
En kritik madde varyantlar. Butonun yalnızca normal hâli tasarlanmışsa, hover ve hata durumlarını geliştirici uydurur. Uydurulan her durum, tasarım sisteminden bir sapmadır.
Teslim sonrası
Sistem devredildikten sonra da yaşamaya devam etmeli. Yeni bir sayfa eklendiğinde token’lar dışına çıkılıyorsa, sistem birkaç ay içinde anlamını yitirir. Basit bir kural işe yarıyor: koda yeni bir sabit değer yazmak gerekiyorsa, önce token listesine eklenir.
Bu yöntemle teslim ettiğimiz projelerde, yayından altı ay sonra bile arayüzün ilk günkü tutarlılığını koruduğunu görüyoruz — üstelik içeriği müşteri kendisi büyütürken.