Figma ile Web Tasarım: Başlangıçtan İleri Seviyeye Tam Rehber

Figma, web tasarımının 2026 ekosistemindeki tek baskın aracı oldu. Adobe'un satın alma teklifi rekabet otoritelerince bloklandı; Figma bağımsız kaldı ve özellik üstüne özellik ekledi. Bu rehberde Figma'yı sıfırdan profesyonel kullanıma kadar ele alıyoruz.

Figma nedir, neden popüler oldu?

Tarayıcı tabanlı, bulutta çalışan tasarım aracı. Birden fazla tasarımcı aynı dosya üzerinde gerçek zamanlı çalışır. Versiyon kontrolü dahili. Plugin ekosistemi geniş. Fiyat: ücretsiz başlangıç planı + ekipler için aylık 12–45$/kullanıcı.

Temel kavramlar

Frame

Sayfa veya bileşen kabı. HTML'de bir div'e benzer.

Group

Birden çok katmanı bir gruba topla. Layer panel sadeleşir.

Component

Yeniden kullanılabilir bileşen. Master değişirse tüm instance'lar değişir.

Variants

Aynı componentın farklı state'leri (default, hover, disabled).

Auto-layout

Flexbox benzeri otomatik düzen. Çok satırlı liste için zorunlu.

Constraints

Container boyut değişince child'ın nasıl davranacağı.

Auto-layout — Figma'nın belkemiği

Auto-layout (Shift+A), Figma'yı statik tasarım aracından dinamik tasarım sistemine çeviren özellik. Bir butonun içine ne yazarsanız yazın, padding ve boşluk korunur. Card grid'inde kartlar otomatik dağılır. Modern Figma tasarımının %95'i auto-layout ile yapılır.

Components ve Variants

Web sitenizdeki tüm tekrar eden elementleri (buton, kart, form input, header, footer) component olarak tanımlayın. 200 sayfada aynı butonu kullanıyorsanız, master'ı değiştirip 200 butonu güncellemeniz 2 saniye sürer.

Variables — design tokens

2024'ten itibaren Figma'da gerçek design tokens var. Renk, tipografi ölçek, spacing, radius değerlerini tek kaynaktan yönetip CSS değişkenleriyle eşleyebilirsiniz. Light/dark mode, brand varyantları (örn. iç pazar / dış pazar) tek dosyada yönetilir.

Dev Mode — geliştirici handoff

Figma Dev Mode (lisans gerekir) tasarımdan CSS/Swift/Compose kodu üretir, distance ölçer, asset export'larını otomatik hazırlar. Tasarımcı + geliştirici handoff sürtünmesini %60'a yakın azaltır.

Plugin ekosistemi — vazgeçilmezler

• Iconify — 200K+ ikon kütüphanesi (lucide, heroicons, phosphor).
• Unsplash — stok fotoğraf doğrudan tasarıma çek.
• Lorem Ipsum — placeholder metin üret.
• Stark — accessibility kontrolü (kontrast, color blindness simülasyonu).
• Figma to HTML / Anima — tasarımdan kod üret (yardımcı, full replacement değil).
• Content Reel — gerçek isim/avatar/marka mock data.
• Figmotion — animasyon prototipi.

Tasarım sistemleri — Figma'nın gerçek gücü

Büyük projelerde "Design System" library oluşturup tüm tasarımcılar oradan çeker. Apple'ın HIG, Google'ın Material 3, Atlassian Design System gibi örnekler Figma'da paylaşılmış halde. Kendi şirketinizin tasarım sisteminizi aynı disiplinde inşa etmek tasarım hızınızı 3 katına çıkarır.

Klavye kısayolları — hız avantajı

F

Frame ekle

R

Rectangle çiz

T

Text ekle

Shift+A

Auto-layout aç/kapat

Ctrl/Cmd+D

Duplicate

Option+sürükle

Duplicate + sürükle

Ctrl/Cmd+G

Group

Ctrl/Cmd+Alt+G

Frame'e çevir

Şunu yapmayın: Figma'yı manuel boyut kullanarak çizmek

Auto-layout ve constraints kullanmadan tasarım yapmak Figma'nın getirdiği tüm verimliliği görmezden gelmektir. Her şeyi pixel pixel manuel boyutlandırırsanız, responsive değişiklikte saatler kaybedersiniz.

Sıkça sorulan sorular