Tasarım sistemi tasarımcısı ürünün ortak dilini nasıl kurar ve yönetir?

Tasarım sistemi tasarımcısı kimdir?

Tasarım sistemi tasarımcısı, bir kurumdaki tüm ürün ve ekiplerin ortak kullandığı arayüz bileşenlerini, değişkenlerini ve kurallarını tasarlayan ve sürdüren tasarımcıdır. İngilizce karşılığı design system designer olan rol, bazı kurumlarda design system uzmanı ya da tasarım sistemi sahibi olarak anılır. Ürün ekranı çizmekten çok, ekranların hepsinin üzerine kurulduğu zemini hazırlar.

Bu yüzden çıktısı tek bir ekran değil bir ürün gibi yönetilen bir sistemdir: düğmeler, form alanları, uyarılar, kartlar, renk ve yazı tipi değişkenleri, bileşenlerin ne zaman ve nasıl kullanılacağını anlatan belgeler. Sistemin kullanıcıları son kullanıcılar değil, ürün tasarımcıları ve geliştiricilerdir.

İşin içeriği: tasarlamak, belgelemek, yönetmek

Çalışma birbirine bağlı katmanlarda ilerler. İlk katman bileşenlerin kendisidir. Tasarımcı, bileşenin hangi durumlarının (varsayılan, üzerinde, odakta, devre dışı, hata) olduğunu, hangi boyut ve içerik varyasyonlarını desteklemesi gerektiğini ve farklı ekran genişliklerinde nasıl davranacağını tanımlar. Değişkenler (tokens) renk, boşluk, yazı tipi ve köşe yuvarlaklığı gibi kararları isimli değerlere bağlar; marka değiştiğinde ya da koyu tema eklendiğinde yalnızca değişkenler güncellenir.

Sonraki katman belgelemedir. Her bileşen için ne zaman kullanılır, ne zaman kullanılmaz, hangi içerik yazım kuralları geçerlidir, erişilebilirlik açısından nelere dikkat edilir gibi bilgiler yazılır. Belge olmadan bileşen yalnızca bir çizim olarak kalır ve kimse neden o şekilde tasarlandığını bilmez.

Bir diğer katman yönetimdir: değişiklik istekleri, katkı süreci, sürüm numaralama, eski bileşenin kullanımdan kaldırılması ve kullanıcılarla iletişim.

Geliştirme ekibiyle birlikte çalışma

Tasarım sistemi hem tasarım aracında hem kodda yaşar: tasarım aracındaki bileşen kütüphanesi ve geliştirmedeki kod kütüphanesi. Bu kütüphanelerin uyumlu kalması rolün zor kısmıdır. Tasarımcı, bir bileşen için hangi özelliklerin (props) açılacağını, hangi varyasyonların tasarıma ait hangilerinin kod tarafında türetileceğini geliştiriciyle birlikte karar verir.

Bileşenlerin kod tarafında Storybook gibi araçlarla gösterildiği ve belgelendiği ekiplerde tasarımcı, bu ortamda bileşeni inceleyerek tasarıma uyumunu doğrular. Erişilebilirlik testi ve görsel regresyon kontrolü gibi kalite adımları da bu aşamada devreye girer. Örneğin tasarım dosyasındaki odak halkası kodda görünmüyorsa, bu sapma sistem sahibi tarafından yakalanıp düzeltilmelidir.

Mevcut ürünü sisteme taşımak ve benimsetmek

Bir tasarım sistemi kurmak, onu kullandırmaktan kolaydır. Özellikle mevcut ürünlerin yeni sisteme taşınması (migration) uzun ve riskli bir süreçtir. Önce mevcut ekranlarda hangi bileşenlerin nerede kullanıldığı ve sistemden ne kadar saptığı envanterle çıkarılır. Sonra taşıma işi öncelik ve dilimlere ayrılır; yüksek trafikli ya da sık değişen ekranlardan başlamak mantıklıdır. Eski ve yeni bileşenlerin birlikte yaşadığı bir dönem olacağı için görsel tutarsızlık ve regresyon riski planlanır.

Benimsetme de ayrı bir iştir. Tasarımcılar ve geliştiriciler sistemi neden kullanmadığını söylüyor olabilir: bileşen eksik, belge anlaşılmaz, değişiklik isteği yanıtsız kalıyor ya da sistem ürün hızını yavaşlatıyor. Sistem sahibi bu itirazları dinler, kullanım verisi toplar, destek kanalı kurar ve sistemi bir ürün gibi geliştirir.

Komşu rollerle sınır

UI tasarımcısı, ürünün ekranlarını sistemin bileşenleriyle kurar. Tasarım sistemi tasarımcısı ise o bileşenleri tasarlar ve kurallarını belirler. Frontend geliştiricisi tasarım sisteminin kod tarafını yazabilir; bazı kurumlarda bu işi yapan ayrı bir tasarım sistemi mühendisi bulunur. Design Ops uzmanı araç zinciri ve süreçleri kurar; tasarım sistemi bu operasyonun ana varlıklarından biridir. Tasarım yöneticisi ise ekibin işleyişinden ve kalitesinden sorumludur.

Küçük kurumlarda tek kişi hem tasarım sistemi tasarımcısı hem UI tasarımcısı olabilir. Büyük kurumlarda sistem bir ekip tarafından yönetilir ve ürün ekipleri sistemin müşterisi gibi davranır.

Gerekli beceriler ve başlangıç yolu

Temel beceri, güçlü bir arayüz tasarımı ve bileşen düşüncesidir. Bir bileşenin sadece bu ekranda değil, farklı bağlamlarda nasıl çalışacağını öngörebilmek gerekir. Bunun yanında tasarım aracında ileri düzey kullanım (otomatik yerleşim, bileşen özellikleri, değişkenler), HTML ve CSS temelleri ve geliştirici ekibin dilini anlamak beklenir. Yazılı iletişim önemlidir: belge yazmak, değişiklik gerekçesini açıklamak, itirazları yanıtlamak işin günlük parçasıdır.

Başlangıç için bir mini sistem kurun: renk ve yazı tipi değişkenleri, bir düğme, bir form alanı ve bir kart bileşeni tasarlayın, her birinin durumlarını ve kullanım notlarını yazın. Sonra aynı bileşenlerle farklı ekranlar kurup sistemin işe yarayıp yaramadığını görün. Bu çalışma, tasarım sistemi rolü için başvururken gösterebileceğiniz en açıklayıcı örnektir.

Sık hatalar: bileşeni tek bir ekranın ihtiyacına göre tasarlamak, belgeyi sonraya bırakmak, sürüm ve değişiklik kaydı tutmamak ve sistemi kullananlara danışmadan karar vermek.

Mindset programlarında nerede çalışılır?

Bu rolü ilk kez üstlenen tasarımcılar için Figma ile Tasarım Sistemi programı başlangıç noktasıdır: tasarım sistemi temelleri ve mimarisi, bileşen kütüphanesi, tasarım değişkenleri ve stil yönetimi, otomatik yerleşim ve duyarlı bileşenler, prototipleme ve ölçeklendirme konularını işler.

Sistem kurulduktan sonra çıkan sorunlara odaklanan programlar da var. Tasarım Sistemi Yönetişimi, Sürümleme ve Katkı Modeli programı yönetişim ve katkı süreçlerini, Tasarım Sistemi Benimsetme ve Ölçümleme programı sistemi ürün gibi yönetmeyi ve direnç analizini, Mevcut Ürünü Tasarım Sistemine Taşıma programı envanter ve birlikte yaşama dönemini, Tasarım Sistemi Bileşen Kütüphanesi Geliştirme (Storybook) programı ise kod tarafını ve kalite güvencesini ele alır. Tasarımcı, geliştirici ve ürün yöneticisinin aynı sistemi farklı açılardan çalışmasına imkân verir.