Penpot'ta Bileşen Kütüphanesi: Vaatler, Sınırlar ve Bakım Maliyeti
Penpot'ta bir nesneyi bileşene çevirmek birkaç saniye sürer. Kütüphanenin altı ay sonra hâlâ işe yarıyor olması tamamen başka bir iş. Bileşenin "tek kaynak" vaadi mutlak değil, üzerine yazdığınız her özellikte delik açılıyor; varyantları isim hiyerarşisiyle kurmak da bakım maliyetini çarpım tablosu hızıyla büyütüyor.
Kopyaya dokunduğunuz an bağ o özellikte kopar
Penpot'ta bileşenin bir ana kopyası (main component) ve tasarıma serpiştirdiğiniz kopyaları var. Ana kopyada rengi değiştirirseniz kopyalar da değişir; tanıtım metinlerindeki hikâye buraya kadar doğru. Eksik kalan kısım şu: bir kopyada rengi elle değiştirdiğiniz anda o özellik için bağ kopar. Ana bileşende sonradan yapacağınız renk değişikliği o kopyaya artık gitmez, ama köşe yarıçapı gitmeye devam eder. Bağ bileşen düzeyinde değil, özellik düzeyinde kırılıyor.
Pratikte bunun anlamı, aylar sonra "kütüphaneyi güncelledim ama şu ekran eski görünüyor" diye bakarken hangi kopyada neyin elle ezildiğini aramaktır. Kural basit: kopyada yalnızca içerik ezilir. Metin, ikon, belki genişlik. Dolgu rengini, kenarlığı ya da iç boşluğu ezme ihtiyacı duyuyorsanız eksik olan şey override değil, bir bileşen.
Eğik çizgi klasör açar, varyant tanımlamaz
Buton/primary ve Buton/secondary diye isimlendirdiğinizde asset panelinde Buton adında bir grup oluşur. Uzun listeler gerçekten böyle toparlanıyor. Ama olan biten bir isim ağacıdır. Hiçbir yerde bu ikisinin aynı boyutta olması, aynı katman yapısını taşıması ya da birinin diğeriyle sorunsuz değiştirilebilmesi garanti edilmez.
Sonucunu şurada görürsünüz: primary butonunu secondary ile değiştirdiğinizde ikisinin iç boşlukları farklıysa düzen kayar ve nedenini bileşen panelinde değil, katmanlara tek tek bakarak bulursunuz. Grubun tutarlılığını isim yapısı değil, sizin disiplininiz sağlıyor.
Matris çarpım tablosuyla büyür
Dört tür, üç boyut, beş durum. Kulağa mütevazı geliyor, oysa 4 × 3 × 5 = 60 ana bileşen demek. Köşe yarıçapını 4 pikselden 6 piksele çekmek isterseniz altmış düzenleme yaparsınız. Listeye bir boyut daha eklendiğinde (4 × 4 × 5) sayı seksene çıkar; tek bir satır size yirmi bileşen getirir.
İlk çözüm bileşeni bileşenin içine koymak. Tek bir Buton/taban kurup altmış varyantın hepsinin içine onu yerleştirirseniz yarıçap değişikliği bir düzenlemeye iner ve altmışına birden yayılır. Tek şartı yukarıdaki kuraldır: varyantlarda tabanın yarıçapını elle ezmemiş olmak.
İkinci çözüm daha etkili, çünkü bakım maliyetini azaltmak yerine ortadan kaldırır: matrisi küçültün. Beş durumun her biri ayrı ayrı bakım isteyen bileşen olmak zorunda değil. Hover ve focus çoğu projede geliştiricinin CSS'te zaten yazdığı şeylerdir; onları kütüphanede canlı tutmak yerine tek bir örnek ekranda gösterip not düşmek daha ucuza gelir. Disabled ise bileşen olmayı hak eder, çünkü rengine ve opaklığına karar veren taraf tasarımdır.
Kütüphaneyi baştan kurmayın
Yaygın tavsiye, projeye bileşen kütüphanesi kurarak başlamaktır. Bu tavsiyeye katılmıyorum. Üç gerçek ekran çizmeden kurulan kütüphane tahminlerin kataloğudur; ilk gerçek ihtiyaç geldiğinde ya bileşeni bozarsınız ya da ekranı bileşene uydurup tasarımı feda edersiniz.
İşleyen ölçü üçüncü tekrardır. Bir öğe üçüncü kez karşınıza çıktığında bileşene çevirin, ondan önce kopyalayıp geçin. İki tekrar tesadüf olabilir, üçü örüntüdür. Üçüncüsünde aralarında neyin değiştiğini de görmüş olursunuz ve bileşenin hangi parçasının esnek kalması gerektiği tam olarak o farktan çıkar.
Penpot tarafında bunu destekleyen şey paylaşılan kütüphane mekanizmasıdır: bir dosyayı kütüphane olarak yayımlarsınız, diğer dosyalar ona bağlanır, güncelleme çıktığında bunu bildirimle alıp ne zaman uygulayacağına kendisi karar verir. Değişikliğin bütün projelere sessizce düşmemesi iyi bir tercih; teslim edilmiş bir ekranın altınızdan kaymasını engelliyor.
Inspect çıktısını değer için kullanın, blok için değil
Penpot'un yerleşim modelleri doğrudan CSS flex ve grid üzerine oturuyor, dolayısıyla inspect sekmesinden çıkan kod pek çok aracın ürettiği yaklaşık çıktıdan daha gerçekçi. Yine de sizin kod tabanınız değil. Oradan alınacak şey değerlerdir: boşluk, yarıçap, renk, satır yüksekliği. Bloğun tamamını kopyalayıp bileşeninize yapıştırdığınızda tasarım aracının katman isimlerini ve sarmalayıcılarını da beraberinde taşırsınız, sonra bunları temizlemek sıfırdan yazmaktan uzun sürer.
Penpot'un ayırt edici tarafı da tam burada. Dosya formatı açık, araç kendi sunucunuzda çalışabiliyor. Kütüphane gibi yıllarca yaşayacak bir varlık için, tasarım dosyalarının bir satıcının hesap politikasına bağlı olmaması fiyat listesinden daha belirleyicidir. Ayrıntılar Penpot belgelerinde.
Ne zaman değer
Bileşen sistemi kurmanın maliyeti sabit değil; ekip büyüklüğüne ve projenin ömrüne bağlı. Üç ekranlık bir tanıtım sitesini tek başınıza çiziyorsanız kütüphane kurmak net zaman kaybıdır. Aynı arayüze altı ay boyunca birden fazla kişi dokunacaksa, ilk haftada harcanan iki gün kendini geri öder. Arada kalan durumlarda ölçüt ekran sayısı değil, aynı öğeye kaç kişinin el süreceğidir.