Tasarım Sistemi
Kısa tanım
Tasarım sistemi, bir markanın renk, tipografi, buton ve bileşenlerini tek bir kurallar bütünü halinde toplayan, tekrar kullanılabilir yapı taşları kümesidir.
Renk paleti, yazı tipleri, buton stilleri, form alanları, kart bileşenleri gibi parçalar bir kere tanımlanır ve her yeni sayfa bunları yeniden çizmek yerine hazır bileşenlerden kurulur. Figma'da bir kütüphane, kodda ise paylaşılan bir bileşen seti olarak yaşar.
Birden fazla sayfa ya da ürün aynı markayı taşıması gerektiğinde, ya da tasarım ile geliştirme ekibi arasında ortak bir dil kurmak gerektiğinde karşınıza çıkar.
Marka kılavuzuyla karıştırılır. Marka kılavuzu logonun, renklerin nasıl kullanılacağını anlatan bir belgedir; tasarım sistemi bunun ötesine geçip gerçek, kullanıma hazır kod ve tasarım bileşenlerini içerir.
En sık yapılan hata, tasarım sistemini yalnızca Figma'da güzel bir kütüphane olarak kurup kod tarafındaki bileşenleri buna göre güncellememektir; zamanla tasarım dosyası ile gerçek sitede görünen bileşenler birbirinden uzaklaşır. Doğrusu, kod tarafındaki bileşen setini tek gerçek kaynak saymak, tasarımdaki her değişikliği bu sete de yansıtacak net bir sorumluluk düzeni kurmaktır.
Neden önemli
Her sayfa sıfırdan tasarlanıp kodlanırsa hem zaman kaybedilir hem de site içinde tutarsız butonlar, renkler ortaya çıkar. Tasarım sistemi yeni sayfa üretimini hızlandırır ve markayı her yerde aynı tutar.
Örnek senaryo
Bir zemin kaplama üreticisinin ürün, hizmet ve kampanya sayfaları aynı buton ve kart bileşenlerinden kurulduğu için yeni bir sayfa günler değil saatler içinde hazırlanabiliyor.
