Atomic Design — temeller, arayüzde atomlar, moleküller ve organizmalar

Atomic Design Nedir?

Atomic Design, her UI öğesinin beş seviyeden birine ait olduğu hiyerarşik arayüz sistemleri oluşturmaya yönelik bir metodolojidir: atomlar (temel öğeler), moleküller (atom kombinasyonları), organizmalar (karmaşık bloklar), şablonlar (sayfa tel kafesleri) ve sayfalar (veri içeren belirli ekranlar). Benzetme kimyadan ödünç alınmıştır: atomlar molekülleri, moleküller organizmaları, organizmalar şablonları oluşturur, şablonlar içerikle doldurulur ve sayfalar haline gelir.

Metodoloji, web tasarımcısı Brad Frost tarafından 2013 yılında "sayfa düşüncesi" sorununa (mevcut bileşenleri dikkate almadan her yeni ekranın sıfırdan tasarlanması) bir yanıt olarak önerilmiştir. "Atomic Design" (2016) kitabında Frost, büyük şirketlerin (IBM, GE, Starbucks) projelerinde metodolojinin uygulanmasını açıklamaktadır. Nielsen Norman Group'a (2022) göre Atomic Design, hazır bileşenlerin yeniden kullanımı yoluyla yeni ekranların tasarım süresini %30–50 oranında azaltır.

Atomic Design bir teknolojiden çok bir UI organizasyon felsefesidir. Belirli bir çerçeveye bağlı değildir ve hem web'de (React, Vue) hem de mobil geliştirmede (Jetpack Compose, SwiftUI) uygulanabilir. IT Sectr'de, müşterilerimiz için tasarım sistemleri oluşturmak amacıyla Atomic Design'ı kullanıyoruz: tasarım aşamasında atomik bileşenleri belirliyor ve bunları Compose/SwiftUI'de kod bileşenlerine aktarıyoruz.

Beş Seviye: Atomlar, Moleküller, Organizmalar, Şablonlar, Sayfalar

Atomic Design'ın her seviyesi kendi sorununu çözer ve katı bir sorumluluk alanına sahiptir. Atomlar, anlamını yitirmeden daha fazla bölünemeyen arayüzün en küçük yapı taşlarıdır: düğme, metin alanı, simge, etiket, onay kutusu. Atomlar iş mantığı içermez ve bağlama bağlı değildir. Temel görsel özellikleri tanımlarlar: renk, boyut, boşluk, tipografi.

Moleküller, basit işlevsel birimler oluşturan iki veya daha fazla atomun kombinasyonlarıdır. Etiket ve hata mesajı olan bir giriş alanı bir moleküldür. Görsel, ad ve fiyat içeren bir ürün kartı bir moleküldür. Moleküller temel mantık (hatayı göster/gizle) içerebilir ancak iş süreçleri içermez. Moleküller, bileşenlerin farklı ekranlarda yeniden kullanılabilir hale geldiği ilk seviyedir.

Organizmalar, moleküllerden ve atomlardan oluşan, uygulamanın belirli bir işlevini uygulayan karmaşık arayüz bloklarıdır. Bir oturum açma formu (e-posta alanı, şifre alanı, gönderme düğmesi, "şifremi unuttum" bağlantısı) bir organizmadır. Logo, arama ve gezinme içeren bir başlık bir organizmadır. Organizmalar iş mantığı içerebilir ve API'ye erişebilir, ancak yalnızca kendi işlevleri kapsamında.

Şablonlar, belirli bir içerik olmadan ekrandaki organizmaların düzenini tanımlayan sayfa tel kafesleridir. Bir şablon, ızgarayı, sütunları, içerik alanlarını tanımlar — kod seviyesinde bir tel kafes. Şablonlar veri içermez, yalnızca yer tutucular içerir. İçerikle doldurmadan önce sayfa yapısını değerlendirmeye olanak tanırlar.

Sayfalar, şablonun gerçek verilerle doldurulduğu belirli uygulama ekranlarıdır. Bu seviyede, bileşenlerin gerçek içerikle (uzun dizeler, eksik veriler, hatalar) nasıl göründüğü kontrol edilir. Sayfalar, son kullanıcının gördüğü tek seviyedir. Sayfa seviyesindeki değişiklikler atomları, molekülleri ve organizmaları etkilememelidir — bir bileşenin değiştirilmesi gerekiyorsa, değişiklik kendi seviyesinde yapılır ve sayfa bunu otomatik olarak alır.

Atomic Design'ın Avantajları ve Sınırlamaları

Avantajlar — Atomic Design'ın avantajları arayüzleri ölçeklendirirken belirginleşir. Tek bir bileşen kitaplığı görsel tutarlılığı garanti eder: bir düğme tüm ekranlarda aynı görünür çünkü aynı atomdur. Brad Frost'a (2016) göre, Atomic Design'ı uygulayan şirketler, hazır moleküllerin ve organizmaların yeniden kullanımı yoluyla yeni ekran geliştirme süresini %30–50 oranında azaltır.

Sınırlamalar — Atomic Design, uygulama durumunun nasıl yönetileceğini açıklamaz. Metodoloji yalnızca "UI bileşenleri nasıl organize edilir" sorusunu yanıtlar ancak iş mantığı, yönlendirme veya veri yönetimini ele almaz. İkinci sınırlama, sınırları tanımlamanın zorluğudur: bir molekül nerede biter ve bir organizma nerede başlar? Pratikte sınırlar bulanıktır ve farklı ekipler aynı bileşeni farklı şekilde sınıflandırabilir. Tasarım token'larında ve bir bileşen kataloğunda (Storybook, Jetpack Compose Preview) kurallar belirlenmesi önerilir.

Üçüncü sınırlama, küçük projeler için aşırı soyutlamadır. Bir uygulama 5 ekrandan oluşuyorsa, atomlar ve moleküller hiyerarşisi oluşturmak gereksiz iştir. Atomic Design, ekran sayısı 20'yi aştığında ve bileşenler farklı sayfalarda yeniden kullanıldığında avantajlı hale gelir.

Atomic Design vs Feature-Sliced Design

Atomic Design ve Feature-Sliced Design (FSD) farklı sorunları çözer ve birlikte kullanılabilir. Atomic Design, UI bileşenlerini düzenlemek için bir metodolojidir; FSD, iş katmanlarını ve uygulamanın tamamını düzenlemek için bir metodolojidir. Atomic Design "UI'nin yeniden kullanılabilir parçalara nasıl bölüneceği" sorusunu yanıtlarken, FSD "kodun iş özellikleri etrafında nasıl organize edileceği" sorusunu yanıtlar. Rekabet etmezler: features ve entities katmanlarına sahip bir FSD yapınız olabilir ve her katmanın içinde UI bileşenlerini düzenlemek için Atomic Design'ı kullanabilirsiniz.

Tipik kombinasyon: FSD, uygulamanın modüler yapısını (katmanlar, dilimler) tanımlar; Atomic Design, her dilimin içindeki UI bileşenlerinin iç yapısını tanımlar. Örneğin, feature.auth dilimi, Atomic Design kurallarına göre birleştirilmiş moleküller (LoginForm, PasswordInput) ve organizmalar (AuthPage) içerir. Paylaşılan katman, tüm özelliklerde yeniden kullanılan atomları (Button, Input, Label) içerir.

Mobil Uygulamalarda Atomic Design: Compose ve SwiftUI

Jetpack Compose ve SwiftUI, bileşen kompozisyonu aracılığıyla Atomic Design hiyerarşisini doğal olarak destekler. Atomlar Compose'da temel @Composable işlevlerdir: AppButton, AppTextField, AppCheckbox. Her işlev özelleştirme parametreleri (renk, boyut, durum) alır ve iş mantığı içermez. Atomlar paylaşılan katmanda tanımlanır ve bir UI kiti olarak dışa aktarılır.

Moleküller, birden çok atomu birleştiren @Composable işlevlerdir: LabeledTextField (etiket + giriş alanı + hata mesajı), ProductCard (görsel + ad + fiyat). Moleküller temel durum (alan geçerliliği) içerebilir ancak API'ye veya ViewModel'e erişmez. Farklı organizmalarda yeniden kullanılırlar.

Organizmalar, özellik seviyesindeki @Composable işlevlerdir: LoginForm (e-posta için LabeledTextField + şifre için LabeledTextField + gönderme AppButton'ı + kurtarma bağlantısı). Organizmalar, Intent işlevleri aracılığıyla ViewModel ile çalışır ve iş mantığı içerebilir. SwiftUI'de, @ViewBuilder ve özel View yapıları aracılığıyla benzer bir hiyerarşi oluşturulur.

SwiftUI'de bir atom, özel bir View yapısı olan AppButton'dır; bir molekül, HStack üzerinde etiketli bir giriş alanıdır; bir organizma, bir oturum açma formudur. Bu yapı, bileşenlerin tüm ekranlarda yeniden kullanılmasına olanak tanır — bir atomun değiştirilmesi (düğme rengi) otomatik olarak tüm ekranlara uygulanır. Atomic Design'ın bir tasarım sistemiyle birleşimi, her ekranın manuel kontrolü olmadan arayüz tutarlılığını garanti eder.