🎯 Figma Component Kullanımı Neden Önemli?
1️⃣ Tutarlılık (Consistency)
Component, UI’daki tekrar eden yapıların tek kaynaktan yönetilmesini sağlar.
Buton, input, card, modal gibi elementler her yerde aynı davranışı ve görsel dili korur.
Design system’in temel taşı component’tir.
2️⃣ Ölçeklenebilirlik (Scalability)
Proje büyüdükçe yüzlerce ekran oluşur.
Component kullanılmazsa:
- Aynı butonun 17 farklı versiyonu oluşur
- Renkler sapar
- Padding ve spacing bozulur
Component sayesinde tek bir değişiklik → tüm instance’lara yansır.
3️⃣ Hız ve Verimlilik
- Tekrar tekrar UI çizmek yerine sürükle-bırak
- Variant’lar sayesinde state yönetimi (hover, active, disabled)
- Auto Layout ile dinamik yapı
Bu özellikle ekipli çalışmalarda ciddi zaman kazandırır.
4️⃣ Developer Handoff Kolaylığı
Component mantıklı kurulmuşsa:
- Token yapısı nettir
- Variant’lar state’leri temsil eder
- İsimlendirme semantic olur
Bu da React/Vue/Angular component mapping’ini kolaylaştırır.
5️⃣ Design System Kurulumu
Component olmadan design system olmaz.
Component → Variant → Token → Documentation zinciri sistemin omurgasıdır.
⚠️ Component Tasarlarken Dikkat Edilmesi Gerekenler
1️⃣ Primitive vs Semantic Ayrımı
Renkleri direkt hex ile verme.
Örneğin:
Yanlış:
#D81E5B
Doğru:
color.primary.defaultcolor.primary.hover
Bu yaklaşım ileride tema değişiminde hayat kurtarır.
🔹 Component Architecture
Slot mantığı
Atomic design vs pragmatic system yaklaşımı
Base → Semantic → Product component ayrımı
Primitive component mantığı
Nested component yapıları