🎯 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.default
• color.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ı