Tasarım Sistemi

Tasarım sistemi nedir, neden kurulur?

Tasarım sistemi (design system), bir dijital ürünün ya da web sitesinin arayüzünü oluşturan kararların tek bir kaynakta toplanması ve hem tasarım dosyasında hem kodda aynı adla kullanılmasıdır. Renkler, yazı ölçeği, boşluklar, bileşenler ve bu bileşenlerin nasıl davranacağı bu kaynağın parçasıdır.

Tasarım sistemi bir Figma dosyasından ibaret değildir. Dosya, sistemin yalnızca görünen yüzüdür; asıl değer, kuralların yazılı olması ve herkesin aynı kurala bakmasıdır. Ekibe yeni katılan bir tasarımcı ya da dışarıdan çalışan bir ajans, sistemi okuyarak markanın dijital dilini kısa sürede doğru kullanabilir.

En somut kazanç, aynı kararın tekrar tekrar verilmemesidir. Bir butonun köşe yuvarlaklığı, bir form alanının hata hâli ya da kartlar arasındaki boşluk bir kez karara bağlanır; sonraki her sayfada tartışma yerine üretim yapılır.

Bir tasarım sistemine ihtiyaç olduğunu genellikle şu işaretlerden anlarsınız:

• Aynı işi yapan bileşenin sitede ya da üründe birden fazla farklı hâli var
• Her yeni sayfa için tasarımcı ile geliştirici arasında aynı sorular yeniden soruluyor
• Birden fazla ekip ya da ajans aynı marka için dijital iş üretiyor
• Küçük bir renk ya da yazı değişikliği haftalarca süren bir düzeltme işine dönüşüyor

Design token nedir?

Design token, tasarım kararlarının en küçük, isimlendirilmiş birimidir. Bir rengi “#1F4FFF” gibi ham bir değerle değil, “vurgu-rengi” gibi anlamı olan bir adla tanımlarsınız. Tasarım aracı da kod da bu adı kullanır; değer değiştiğinde her yer birlikte güncellenir.

Token'lar genellikle katmanlı kurulur. Bu katmanlama sayesinde karanlık tema eklemek ya da marka rengini yenilemek, yüzlerce ekranı tek tek düzeltmek yerine tek bir katmandaki eşleşmeleri değiştirmek anlamına gelir.

İsimlendirmede temel kural, değeri değil amacı anlatmaktır. “mavi-buton” adındaki bir token, marka rengi yeşile döndüğünde yanlış bir şey söylemeye başlar; “birincil-eylem” ise her durumda doğru kalır. Token'lar tasarım aracında değişken olarak, kodda ise CSS değişkeni ya da benzeri bir yapı olarak aynı adla yaşar.

• Temel token'lar: paletteki tüm renkler, yazı boyutları ve boşluk adımları (ör. mavi-600, boşluk-4)
• Anlamsal token'lar: değerin ne işe yaradığını söyleyen adlar (ör. vurgu-rengi, metin-ikincil)
• Bileşen token'ları: belirli bir bileşene ait kararlar (ör. buton-arka-plan, kart-iç-boşluk)

Bileşen kütüphanesi nasıl kurulur?

Bileşen kütüphanesi küçükten büyüğe kurulur. Önce buton, metin alanı, etiket ve ikon gibi temel öğeler tanımlanır; ardından bunlardan oluşan kart, form satırı, menü ve modal gibi birleşik bileşenler gelir. En üstte ise bu bileşenlerin sayfa düzenine yerleştiği şablonlar durur.

Kütüphaneye hangi bileşenle başlanacağını kullanım sıklığı belirler. Her ekranda görünen buton, form alanı ve başlık yapısı ilk sırada gelir; nadiren kullanılan özel bileşenler ihtiyaç doğdukça eklenir. Böylece sistem ilk haftalardan itibaren gerçek işte kullanılmaya başlar.

Bir bileşenin yalnızca varsayılan hâlini çizmek yeterli değildir. Kütüphanedeki her bileşenin kendi sayfasında şu bilgiler bulunmalı:

• Varyantlar: birincil, ikincil, metin butonu gibi seçenekler ve hangisinin ne zaman kullanılacağı
• Durumlar: varsayılan, üzerine gelme, odak, pasif, hata ve yükleniyor
• İçerik kuralları: azami metin uzunluğu, ikonla birlikte kullanım
• Erişilebilirlik notları: kontrast, klavye davranışı, ekran okuyucu etiketi
• Koddaki karşılığı: bileşen adı ve özellikleri

Tasarım sistemi ile kurumsal kimlik kılavuzu arasındaki fark

Kurumsal kimlik kılavuzu markanın nasıl göründüğünü ve konuştuğunu anlatır: logo kullanımı, renk paleti, tipografi, fotoğraf dili, ses tonu. Tasarım sistemi ise bu kimliğin dijital arayüzde nasıl çalıştığını tarif eder ve kodla birebir eşleşir.

İkisi birbirinin yerine geçmez; kimlik, sistemin kaynağıdır. Kılavuzdaki ana renk, sistemde bir token'a dönüşür; kılavuzdaki yazı karakteri, sistemde başlık ve gövde ölçeğine. Kimliği güçlü ama dijital sistemi olmayan markalarda web sitesi, uygulama ve kampanya sayfaları zamanla birbirinden uzaklaşır.

Pratikte fark, kimin kullandığında da görülür. Kılavuzu daha çok pazarlama ekibi, matbaa ve ajanslar açar; tasarım sistemini ise her gün ürün tasarımcıları ve geliştiriciler kullanır. Bu yüzden sistemdeki bir kural, kılavuzdakinden çok daha ayrıntılı olmak zorundadır: yalnızca rengin ne olduğu değil, hangi durumda hangi tonun kullanılacağı da yazılır.

Tasarım sistemi nasıl güncel kalır?

Tasarım sistemleri genellikle kötü tasarlandıkları için değil, sahipsiz kaldıkları için bozulur. Ekip acil bir ihtiyaç için sistemin dışında yeni bir bileşen üretir, bu bileşen kütüphaneye geri dönmez ve birkaç ay sonra aynı işi yapan üç farklı parça oluşur.

Bunu önlemek için sistemin kurulumu kadar işleyişi de baştan tanımlanır:

• Sistemden sorumlu bir kişi ya da küçük bir ekip
• Yeni bileşen talebinin nasıl yapılacağı ve kimin onaylayacağı
• Sürüm notları: neyin değiştiği ve kimi etkilediği
• Kullanılmayan bileşenlerin düzenli olarak ayıklanması