Komponent Tabanlı Düşünmek: Tasarımda Lego Mantığı

Komponent tabanlı tasarım, tekrar tekrar kullanılabilen küçük parçaların (buton, input, kart, ikon vb.) bir araya getirilerek daha büyük yapılar oluşturulmasıdır. Bu mantık, sadece tasarım için değil, yazılım geliştirme için de geçerlidir. React, Flutter veya SwiftUI gibi teknolojilerin temelinde de aynı yaklaşım vardır: parçala, yönet, yeniden kullan.

Atomic Design metodolojisini düşünelim:

• Atomlar: Renk, tipografi, ikon.

• Moleküller: Buton, input alanı.

• Organizmalar: Form, kart, navbar.

• Şablonlar ve Sayfalar: Uygulamanın gerçek ekranları.

Her şey en küçük yapı taşlarından başlar ve yukarıya doğru büyür.

Lego Mantığının Avantajları

Tutarlılık

Markanızın butonu her yerde aynı görünür. Bu, kullanıcı için güven verir.

Hız

Bir kez tasarlanan komponent, yüzlerce ekranda kullanılabilir. Yeni bir sayfa oluşturmak için parçaları sadece sürükleyip bırakırsınız.

Ekip İşbirliği

Tasarımcı, geliştirici ve ürün yöneticisi aynı dili konuşur. “Primary button” dediğinizde herkes neyi kastettiğinizi bilir.

Ölçeklenebilirlik

Ürününüz büyüdükçe sistem bozulmaz. Sadece yeni Lego parçaları eklersiniz.

Figma’da Komponent Kullanımı

Figma, komponent tabanlı düşünmeyi doğal olarak destekleyen bir araçtır.

• Ana Komponent (Master): Tüm türevlerin kaynağı.

• Varyantlar: Bir butonun aktif, pasif, yükleniyor gibi farklı halleri.

• Auto Layout + Constraints: Esnek ve cihaz bağımsız tasarımlar için.

• Design System: Renkler, tipografi, ikonlar ve bileşenlerin merkezi kütüphanesi.

Benimde çalıştığım projelerde (örneğin Dijigün) Figma’daki varyantları kullanarak yüzlerce ekranı kısa sürede düzenleyebildim. Tek bir güncelleme, tüm tasarımları otomatik olarak senkronize etti.

Lego Gibi Düşünmek

Düşünün: elinizde sadece kırmızı, mavi ve sarı Legolar var. Bunları doğru şekilde birleştirdiğinizde bir ev de yapabilirsiniz, bir araba da. Tasarım da aynı şekilde işler. Küçük ve doğru tanımlanmış komponentler, farklı kombinasyonlarla yeni deneyimler yaratır.

Sonuç

Tasarımda Lego mantığı, küçük parçaların birleşerek büyük resmi oluşturmasıdır. Komponent tabanlı düşünmek, hem tasarımcıya hem de geliştiriciye zaman kazandırır, ürünü tutarlı kılar ve ölçeklenebilirliği garanti altına alır.