Pusula Sigorta tasarım sistemi
Üç ayrı ekibin ayrı ayrı yazdığı düğme, form ve tablo bileşenlerini tek bir token ve bileşen kütüphanesinde topladık.
- Yıl
- 2024
- Rol
- Tasarım sistemi mühendisi
- Müşteri
- Pusula Sigorta (kurgusal)
- Teknoloji
- CSS değişkenleri, Web Components
Bağlam
Pusula Sigorta'da poliçe satış, hasar ve müşteri paneli ekipleri aynı markanın üç farklı düğmesini, üç farklı tarih alanını yazmıştı. Marka rengi değiştiğinde her ekip kendi kodunda ayrı ayrı arama yapıyordu. Benim işim, bu üç ekibin ortak kullanacağı bir token ve bileşen kütüphanesi kurmaktı.
Kısıtlar
- Ekipler farklı çatılar kullanıyordu: biri React, biri Vue, biri sunucuda üretilen HTML.
- Kütüphane, mevcut ekranları bozmadan parça parça devreye alınabilmeliydi.
Yaklaşım
Çatıdan bağımsız kalmak için temeli CSS değişkenleri ve Web Components üzerine kurduk. Renkleri ham adlarıyla değil, kullanım amacıyla adlandırdık: "mavi 600" yerine "birincil eylem". Karanlık tema ve kurumsal alt markalar yalnız bu anlamsal katmanı değiştiriyor. Her bileşenin klavye ve ekran okuyucu davranışını Storybook sayfasında yazılı hale getirdik ve tasarımcılarla haftalık gözden geçirme yaptık.
Sonuç
Üç ekip yeni ekranlarını ortak kütüphaneyle yazmaya başladı, eski ekranlar ise her sprintte bir bileşen olacak şekilde taşınıyor. Bu süreçte yazdığım notları tasarım tokenları yazısında topladım.
Yazan: Ece Tunalı. Son güncelleme: