Bileşen kütüphanesi: arayüz parçalarını bir kez yapıp her yerde kullanmak

Bileşen kütüphanesi nedir?

Bileşen kütüphanesi (component library), bir ürün ya da ürün ailesinde tekrar tekrar kullanılan arayüz parçalarının, yani düğme, form alanı, açılır menü, kart, uyarı kutusu gibi bileşenlerin, belirli kurallarla tasarlanıp belgelenerek tek bir yerde toplandığı koleksiyondur. Aynı bileşen farklı sayfalarda ve farklı ürünlerde ayrı ayrı yeniden yazılmak yerine kütüphaneden alınıp kullanılır.

Bileşen kütüphanesi çoğu zaman tasarım sisteminin somut ürünüdür: tasarım sistemi ilke, renk ve tipografi kurallarını tanımlar, kütüphane ise bu kuralları uygulanabilir parçalara dönüştürür. İki biçimde bulunabilir: tasarım aracında tasarımcıların kullandığı bileşenler ve kodda geliştiricilerin kullandığı bileşenler. Sağlıklı bir sistemde ikisi birbiriyle eşleşir.

Bir bileşen neleri içerir?

İyi tanımlı bir bileşen yalnızca görünüm değildir. Şunları taşır: • Varyantlar: birincil ve ikincil düğme, küçük ve büyük boy gibi kabul edilen biçimler. • Durumlar: normal, üzerine gelinmiş, odaklanılmış, devre dışı, hatalı gibi tüm durumlar. • Arayüz (API): bileşenin dışarıdan hangi ayarlarla çalıştığı, örneğin hangi özellikleri (props) aldığı. • Erişilebilirlik: klavye ile kullanım, ekran okuyucu etiketleri, yeterli renk karşıtlığı. • Belgelendirme: ne zaman kullanılır, ne zaman kullanılmaz, örnek kullanım. • Tasarım tokenları: renk, boşluk ve tipografi değerlerinin sabit isimlerle bağlanması.

Bu özellikler bileşeni yalnızca "bir düğme" olmaktan çıkarıp, her yerde tutarlı davranan ve test edilmiş bir yapı taşına dönüştürür.

Bileşen kütüphanesi nasıl çalışır?

Çalışma düzeni genellikle şöyledir. Tasarımcılar tasarım aracında bileşeni oluşturur, varyantları ve durumları tanımlar. Geliştiriciler aynı bileşeni kodda, örneğin bir ön yüz çerçevesinde yazar ve bir paket olarak yayımlar. Ürün ekipleri bu paketi projelerine ekleyip bileşenleri çağırır.

Kütüphaneyi geliştirirken bileşenleri yalıtık ortamda görüp denemek için Storybook gibi araçlar kullanılır. Her bileşenin farklı durumları ayrı bir hikâye olarak gösterilir, böylece tasarımcı, geliştirici ve test eden kişi aynı canlı belgeye bakar. Sürüm numarası değiştikçe ekipler hangi güncellemenin kırıcı olduğunu bilir ve yükseltmeyi planlar.

Örneğin bir şirketin farklı uygulamaları aynı birincil düğmeyi kullanır. Marka rengi değiştiğinde yalnızca token güncellenir, kütüphane yeni sürümü yayımlar ve uygulamaların hepsi ayrı ayrı elle düzeltme yapmadan yeni görünüme geçer.

Ne işe yarar, hangi sorunları çözer?

Tutarlılık en görünür kazanımdır: kullanıcı farklı sayfalarda aynı bileşenle aynı şekilde karşılaşır. Hız da önemlidir: yeni bir sayfa kurarken parçalar hazır olduğu için tasarım ve geliştirme daha çabuk ilerler.

Erişilebilirlik ve kalite bir kez çözülüp her yere yayılır. Bileşen klavye ile kullanılabiliyorsa, onu kullanan tüm sayfalar bu özelliği otomatik olarak miras alır. Aynı biçimde hata düzeltmesi de tek yerde yapılır.

Tasarımcı ve geliştirici arasındaki devir sürtünmesi azalır, çünkü ikisi de aynı bileşen adları ve varyantlarla konuşur.

Sık yapılan hatalar

Bileşeni ihtiyaçtan önce, aşırı genel yazmak kütüphaneyi karmaşıklaştırır. Çok sayıda ayar sunan bir bileşen kullanması zor ve test etmesi pahalı hale gelir. Bileşenler gerçek kullanım örneklerine bakılarak, envanter çıkarılarak tasarlanmalıdır.

Bir diğer hata, kütüphanenin sahipliğini belirsiz bırakmaktır. Kim değişiklik ekleyecek, kim sürüm yayımlayacak belli değilse ekipler kütüphaneyi bırakıp kendi bileşenlerini yazmaya başlar.

Son olarak tasarım ve kod kütüphanelerinin birbirinden ayrışması sık görülür. Tasarım aracındaki bileşen ile koddaki bileşen aynı davranmıyorsa güven kaybolur. Düzenli eşleştirme ve belgelendirme gerekir.

Mindset programlarında bileşen kütüphanesi

Tasarım Sistemi Bileşen Kütüphanesi Geliştirme (Storybook) programı bileşen API tasarımını, Storybook ile geliştirme ve belgelemeyi, erişilebilirliği, test stratejisini ve sürümlemeyi ön yüz ekipleri için işler. Tasarım Sistemi Mimarisi programı token katmanları ve bileşen envanterini tasarım ve mühendislik birlikte ele alır. Figma ile Tasarım Sistemi tasarım tarafını, Mevcut Ürünü Tasarım Sistemine Taşıma ise var olan bir ürünün kütüphaneye geçişini yönetmeyi anlatır.