Figma Rehberi (Figma Guide)

Ne Zaman Figma?

✅ Kullan: UI/UX tasarım, wireframe, prototip, design system, developer handoff

⚠️ Dikkat: Fotoğraf düzenleme için Photoshop daha uygun

❌ Kullanma: Baskı tasarımı, 3D modelleme

Alternatifler: Adobe XD, Sketch, Penpot (açık kaynak)

---

1) Figma Arayüzü (Figma Interface)

Figma tarayıcı üzerinde çalışan, ekip üyelerinin aynı dosyada eş zamanlı çalışmasına olanak tanıyan bir tasarım aracıdır. Masaüstü uygulaması da mevcuttur.

1.1 Araç Çubuğu ve Paneller (Toolbar & Panels)

Bölge	Açıklama
Sol Panel	Katman listesi (Layers) ve sayfa yönetimi (Pages)
Orta Alan	Canvas — sınırsız çalışma yüzeyi
Sağ Panel	Design, Prototype ve Inspect sekmeleri
Üst Toolbar	Araç seçimi, zoom, dosya adı, paylaşım

Temel araçlar ve kısa yolları:

Araç	Kısa Yol	Kullanım
Move	V	Eleman seçme ve taşıma
Frame	F	Frame oluşturma
Rectangle	R	Dikdörtgen çizme
Ellipse	O	Daire/elips çizme
Line	L	Çizgi çizme
Pen	P	Vektör çizim
Text	T	Metin ekleme
Hand	H	Canvas üzerinde gezinme
Zoom	Z	Yakınlaştırma

1.2 Frame vs Group

Frame ve Group arasındaki fark Figma'nın temel kavramlarından biridir.

Frame (F kısa yolu):

• Bağımsız boyutlara sahiptir
• Auto Layout uygulanabilir
• Constraints tanımlanabilir
• Layout Grid eklenebilir
• Export edilebilir
• Responsive tasarım için zorunludur

Group (Ctrl+G):

• İçeriğine göre boyut alır
• Auto Layout uygulanamaz
• Sadece basit gruplama içindir
• Responsive davranışı sınırlıdır

// Dogru yaklasim — Frame kullan
Frame "Card"
  ├── Frame "Header"        → Auto Layout yatay
  ├── Frame "Body"          → Auto Layout dikey
  └── Frame "Footer"        → Auto Layout yatay

// Kacinilmasi gereken yaklasim
Group "Card"
  ├── Group "Header"        → Auto Layout desteklenmiyor
  └── ...

Genel kural: Layout kontrolü gereken her yerde Frame, sadece görsel gruplama gereken yerde Group kullanılır.

1.3 Sayfalar ve Dosya Yapısı (Pages & File Structure)

Bir Figma dosyası birden fazla sayfa içerebilir. Önerilen yapı:

Proje Dosyasi
  ├── Cover           → Dosya kapak sayfasi
  ├── Wireframes      → Dusuk sadakat eskizler
  ├── Design          → Yuksek sadakat tasarimlar
  ├── Components      → Yerel component kutuphanesi
  ├── Prototyping     → Prototip akislari
  └── Archive         → Eski versiyonlar

---

2) Otomatik Düzen (Auto Layout)

Auto Layout, elemanların otomatik olarak yatay veya dikey sıralanmasını sağlayan Figma'nın en güçlü özelliklerinden biridir. CSS Flexbox mantığı ile çalışır.

2.1 Temel Özellikler (Core Properties)

Auto Layout bir Frame'e uygulanır: sağa tıklayıp "Add Auto Layout" seçilir veya Shift+A kısa yolu kullanılır.

Özellik	Açıklama	CSS Karşılığı
Direction	Yatay veya dikey sıralama	flex-direction
Gap	Elemanlar arası boşluk	gap
Padding	İç boşluk (üst, sağ, alt, sol)	padding
Alignment	Elemanların hizalanması	align-items, justify-content
Sizing	Hug Contents / Fill Container / Fixed	width, height, flex

2.2 Boyutlandırma Davranışları (Sizing Behaviors)

• Hug Contents: Frame içeriği kadar küçük olur. İçerik büyüdükçe frame de büyür.
• Fill Container: Frame üst frame'in tüm genişliğini veya yüksekliğini kaplar.
• Fixed: Sabit piksel değeri kullanılır.

// Bir buton ornegi
Frame "Button" [Auto Layout: Horizontal]
  ├── Padding: 12px 24px
  ├── Gap: 8px
  ├── Icon (Fixed: 20x20)
  └── Text "Kaydet" (Hug)

Buton genisligi → Hug Contents (metne gore uzar)

2.3 İç İçe Otomatik Düzen (Nested Auto Layout)

Auto Layout'lar iç içe kullanılarak karmaşık düzenler oluşturulur.

Frame "Card" [Auto Layout: Vertical, Padding: 16, Gap: 12]
  ├── Frame "Header" [Auto Layout: Horizontal, Gap: 8]
  │     ├── Avatar (Fixed: 40x40)
  │     └── Frame "Info" [Auto Layout: Vertical, Gap: 4]
  │           ├── Text "Ad Soyad" (Fill)
  │           └── Text "Rol" (Fill)
  ├── Frame "Body" [Auto Layout: Vertical, Gap: 8]
  │     └── Text "Aciklama" (Fill, Hug height)
  └── Frame "Actions" [Auto Layout: Horizontal, Gap: 8]
        ├── Button "Iptal" (Hug)
        └── Button "Onayla" (Fill)

2.4 Sarma (Wrap)

Auto Layout içindeki elemanlar satıra sığmadığında alt satıra geçmesi için Wrap özelliği kullanılır. Sağ panelde Auto Layout ayarlarından etkinleştirilir.

Frame "Tag List" [Auto Layout: Horizontal, Wrap, Gap: 8]
  ├── Tag "React"
  ├── Tag "Vue"
  ├── Tag "Angular"
  ├── Tag "Svelte"     → Sigmadiysa alt satira gecer
  └── Tag "Solid"

---

3) Bileşenler ve Varyantlar (Components & Variants)

3.1 Ana Bileşen ve Örnek (Main Component & Instance)

Component, tekrar kullanılabilen tasarım elemanıdır.

• Main Component: Orijinal tanım. Üzerinde yapılan değişiklikler tüm instance'lara yansır.
• Instance: Main component'in kopyası. Bağımsız override'lar yapılabilir.

Oluşturma: Elemanı seçip Ctrl+Alt+K veya sağa tıklayıp "Create Component".

Main Component "Button"
  ├── Icon
  ├── Label
  └── Auto Layout: Horizontal, Gap: 8, Padding: 12 24

Instance 1 → Label: "Kaydet"
Instance 2 → Label: "Iptal", Icon: gizli
Instance 3 → Label: "Sil", renk override

Instance üzerinde yapılan değişikliklere override denir. Override'lar main component'e dokunmaz.

3.2 Varyantlar (Variants)

Bir component'in farklı durumlarını tek bir component set içerisinde tanımlamak için variant kullanılır. Main component seçilip "Add Variant" ile yeni durum eklenir.

Button
  ├── Type: Primary / Secondary / Ghost
  ├── Size: Small / Medium / Large
  ├── State: Default / Hover / Disabled
  └── Icon: True / False

Toplam kombinasyon: 3 x 3 x 3 x 2 = 54 varyant

Variant property türleri:

Tür	Örnek	Açıklama
Enum	Type: Primary, Secondary	Listeden seçim
Boolean	hasIcon: true/false	Açık/kapalı
Text	label: "Button"	Metin değişimi
Instance Swap	icon: IconName	İçerideki instance değişimi

3.3 Atomik Tasarım Yaklaşımı (Atomic Design Approach)

Component'ler katmanlı bir yapıyla organize edilir:

Atoms       → Icon, Badge, Avatar, Tag
Molecules   → Input Field (label + input + helper text)
Organisms   → Card, Navbar, Form
Templates   → Page Layout
Pages       → Dolu icerikli sayfa tasarimi

Her katman bir alt katmandaki component'lerden oluşur.

---

4) Stiller ve Değişkenler (Styles & Variables)

4.1 Stiller (Styles)

Style, tasarım boyunca tutarlılık sağlayan kaydedilmiş özelliklerdir.

Style Türü	İçerik	Örnek
Color	Dolgu ve çizgi renkleri	Primary/500: #3B82F6
Text	Font, boyut, satır yüksekliği	Heading/H1: Inter 32px Bold
Effect	Gölge, blur	Shadow/MD: 0 4px 6px rgba(0,0,0,0.1)
Grid	Layout grid tanımları	12 Column, 1440px

Style oluşturma: Sağ panelde ilgili alanın yanındaki dört nokta ikonuna tıklanır.

4.2 Değişkenler (Variables)

Variables, Figma'nın token sistemidir. Style'lardan farkı: değişkenler farklı modlara (örneğin light/dark tema) bağlı olarak değişebilir.

Primitive Tokens
  ├── blue-500: #3B82F6
  ├── blue-600: #2563EB
  ├── gray-100: #F3F4F6
  └── gray-900: #111827

Semantic Tokens (Mode: Light / Dark)
  ├── bg-primary:     Light → gray-100,  Dark → gray-900
  ├── text-primary:   Light → gray-900,  Dark → gray-100
  ├── brand-default:  Light → blue-500,  Dark → blue-500
  └── brand-hover:    Light → blue-600,  Dark → blue-600

Değişken türleri:

Tür	Kullanım
Color	Renk değerleri
Number	Spacing, border-radius, opacity
String	Font family, metin
Boolean	Görünürlük kontrolü

Variable'lar collection ve mode yapısında organize edilir. Örneğin bir "Theme" collection içinde "Light" ve "Dark" modları bulunur.

---

5) Prototipleme (Prototyping)

5.1 Etkileşim Tanımlama (Interaction Definition)

Prototype sekmesinde frame'ler arası bağlantı oluşturulur. Bir eleman seçilip mavi ok sürüklenilerek hedef frame'e bağlanır.

Ayar	Seçenekler
Trigger	On Click, On Hover, On Drag, After Delay, Mouse Enter/Leave
Action	Navigate To, Open Overlay, Swap Overlay, Back, Scroll To, Open Link
Transition	Instant, Dissolve, Smart Animate, Move In/Out, Push, Slide In/Out
Duration	ms cinsinden süre (örneğin 300ms)
Easing	Ease In, Ease Out, Ease In and Out, Linear, Custom Bezier

5.2 Akıllı Animasyon (Smart Animate)

Smart Animate, aynı isimdeki katmanlar arasında otomatik geçiş animasyonu oluşturur. Katman isimleri eşleştiğinde konum, boyut, renk, opacity gibi özellikler arasında geçiş yapılır.

Frame "State 1"                    Frame "State 2"
  ├── "card" (x: 0, opacity: 0)     ├── "card" (x: 100, opacity: 1)
  └── "button" (scale: 1)           └── "button" (scale: 1.1)

Gecis: Smart Animate, 300ms, Ease Out
Sonuc: card saga kayar ve belirir, button hafifce buyur

5.3 Taşma ve Kaydırma (Overflow & Scroll)

Frame içeriği frame sınırlarını aştığında scroll davranışı tanımlanabilir:

• Horizontal Scrolling: Yatay kaydırma (örn. hikaye kartları)
• Vertical Scrolling: Dikey kaydırma (örn. uzun içerik listesi)
• No Scrolling: Taşan içerik gizlenir (clip content)

Prototip modunda scroll davranışları test edilebilir.

5.4 Katman Üstü Pencere (Overlay)

Modal, dropdown, tooltip gibi elemanlar overlay olarak açılabilir:

Trigger: On Click
Action: Open Overlay
Overlay: "Modal" frame'i
Position: Center / Manual
Background: Dim (karartma) veya Transparent
Close on click outside: Acik/Kapali

---

6) Geliştirici Modu (Dev Mode)

Dev Mode, tasarımların geliştiricilere aktarılmasını kolaylaştıran Figma özelliğidir.

6.1 İnceleme (Inspect)

Dev Mode açıldığında (üst barda "Dev Mode" veya Shift+D) seçilen elemanın özellikleri görüntülenir:

• Boyut ve konum (px)
• Renkler (HEX, RGB, HSL)
• Tipografi (font-family, font-size, line-height, font-weight)
• Boşluklar (padding, margin)
• Border ve gölge değerleri

6.2 Ölçüm ve Mesafe (Measurement & Spacing)

Bir eleman seçiliyken başka bir elemanın üzerine gelindiğinde aralarındaki mesafe otomatik gösterilir. Alt tuşuna basılarak mesafe ölçümleri daha detaylı görülebilir.

6.3 Kod Çıktısı (Code Output)

Dev Mode farklı platformlar için kod üretir:

Platform	Çıktı
CSS	width, height, display, flex, padding, color vb.
iOS	SwiftUI kodu
Android	Jetpack Compose kodu

Örnek CSS çıktısı:

/* Card component */
.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

6.4 Tailwind CSS Entegrasyonu (Tailwind CSS Integration)

Figma plugin'leri veya Dev Mode eklentileri ile Tailwind class'ları üretmek mümkündür. Manuel eşleşme tablosu:

Figma Değeri	Tailwind Karşılığı
Padding: 16px	p-4
Gap: 8px	gap-2
Border Radius: 8px	rounded-lg
Font Size: 14px	text-sm
Color: #3B82F6	text-blue-500
Shadow: MD	shadow-md

6.5 Dışa Aktarma (Export)

Görseller farklı formatlarda export edilebilir:

Format	Kullanım
PNG	Raster görsel, web ve mobil ikonlar
SVG	Vektör, ikonlar ve illüstrasyonlar
JPG	Fotoğraflar
PDF	Dokümantasyon ve baskı

Export ayarlarında 1x, 2x, 3x, 4x gibi çarpanlar seçilerek farklı ekran yoğunlukları için görsel üretilir.

---

7) İş Birliği (Collaboration)

7.1 Yorum Sistemi (Comment System)

Tasarım üzerinde belirli noktalara yorum bırakılabilir. Toolbar'dan yorum aracına geçilerek (C kısa yolu) canvas üzerine tıklanır. Yorumlarda @mention ile ekip üyelerine bildirim gönderilebilir. Yorumlar çözülünce "Resolve" ile kapatılır.

7.2 Dallanma (Branching)

Figma'nın branching özelliği (Organization ve Enterprise planlarında) bir dosyanın dalını oluşturarak ana dosyayı bozmadan değişiklik yapmayı sağlar.

main
  ├── feature/yeni-header     → Tasarimci A calisiyor
  ├── feature/login-redesign  → Tasarimci B calisiyor
  └── fix/button-colors       → Kucuk duzeltme

Tamamlaninca → Review → Merge to main

7.3 Sürüm Geçmişi (Version History)

Figma otomatik olarak versiyon geçmişi tutar. Dosya menüsünden "Show Version History" ile geçmiş versiyonlara geri dönülebilir. Önemli noktalarda elle versiyon kaydedilmesi önerilir (Ctrl+Alt+S).

7.4 Takım Kütüphaneleri (Team Libraries)

Component ve style'lar takım kütüphanesi olarak yayınlanabilir. Böylece farklı dosyalardaki tasarımcılar aynı component setini kullanır.

Design System Library (yayinlanmis)
  ├── Components: Button, Input, Card, Modal ...
  ├── Styles: Color, Typography, Effects
  └── Variables: Spacing, Theme tokens

Proje Dosyasi A → Library'den Button kullanir
Proje Dosyasi B → Ayni Button, tutarli gorunum
Library guncellenir → Tum dosyalara bildirim gider → Accept/Dismiss

---

8) Faydalı Eklentiler (Useful Plugins)

Plugin	Açıklama
Iconify	Binlerce ikon setine erişim (Material, Feather, Lucide vb.)
Unsplash	Ücretsiz stok fotoğrafları doğrudan Figma içinden ekleme
Stark	Erişebilirlik kontrolü (kontrast oranı, renk körlüğü simülasyonu)
Content Reel	Placeholder veri (isimler, avatarlar, metin)
Autoflow	Frame'ler arası akış okları çizme
Lorem Ipsum	Placeholder metin üretimi
A11y - Color Contrast Checker	WCAG standartlarına göre kontrast kontrolü

Plugin yükleme: Üst menüde Resources > Plugins > "Search" ile arama yapılır.

---

9) İpuçları (Tips)

Kısa Yollar (Shortcuts):

İşlem	Kısa Yol
Auto Layout ekle	Shift+A
Component oluştur	Ctrl+Alt+K
Instance'ı detach et	Ctrl+Alt+B
Duplicate	Ctrl+D
Rename	Ctrl+R
Tüm eşleşen seçim	Ctrl+Alt+A (aynı component instance'ları)
Quick Actions	Ctrl+/
Zoom to fit	Shift+1
Zoom to selection	Shift+2

Adlandırma Kuralları (Naming Conventions):

Katmanlar:
  ikon/arrow-right, ikon/close
  btn/primary, btn/secondary
  input/default, input/error

Sayfalar:
  01-Cover, 02-Wireframes, 03-Design, 04-Components

Dosyalar:
  [Proje] - [Icerik] ornegin "MyApp - Mobile Screens"

Performans (Performance):

• Gereksiz katman sayısından kaçınılmalıdır (özellikle iç içe group'lar)
• Büyük görseller kullanılacaksa optimize edilmeli, 4000px üzeri görsellerden kaçınılmalıdır
• Hidden katmanlar hala performansı etkiler, gereksizse silinmelidir
• Plugin'ler açıkken performans düşebilir, kullanılmayan plugin'ler kapatılmalıdır

Tasarım Kontrol Listesi (Design Checklist):

• Tüm metin katmanları Text Style kullanıyor mu?
• Tüm renkler Color Style veya Variable ile mi tanımlı?
• Component isimleri tutarlı ve anlaşılır mı?
• Auto Layout doğru uygulanmış mı (Frame içinde, Group değil)?
• Responsive davranışlar test edildi mi (farklı frame genişlikleri)?
• Prototype akışları eksiksiz mi?
• Dev Mode'da çıkan değerler beklenen CSS ile uyumlu mu?

---

İlgili Rehberler (Related Guides)

Tasarım (Design)

• Tasarım Genel Bakış
• Photoshop
• Illustrator
• CorelDRAW
• Canva
• Blender

Diğer Kategoriler (Other Categories)

• Frontend Genel Bakış
• Backend Genel Bakış
• Teknoloji Genel Bakış