Figma, dünyada en çok kullanılan bulut tabanlı tasarım aracıdır. UI/UX tasarımcılarından girişimcilere, geliştiricilerden pazarlamacılara kadar herkes Figma kullanıyor. Ücretsiz planıyla bile güçlü özellikler sunan Figma'yı bu rehberde sıfırdan ileri seviyeye kadar öğreneceksiniz.
Figma Nedir?
Figma, tarayıcı tabanlı bir tasarım ve prototipleme aracıdır. Bilgisayarınıza yükleme yapmanıza gerek yok — tarayıcıdan doğrudan kullanabilirsiniz (masaüstü uygulaması da mevcuttur). Gerçek zamanlı iş birliği özelliğiyle aynı dosya üzerinde birden fazla kişi eş zamanlı çalışabilir.
Figma'nın öne çıkan özellikleri:
- Bulut tabanlı — her yerden erişim
- Gerçek zamanlı iş birliği — Google Docs gibi
- Ücretsiz plan — kişisel kullanım için yeterli
- Bileşen (component) sistemi — tekrar kullanılabilir tasarım elemanları
- Auto Layout — otomatik hizalama ve boyutlandırma
- Prototipleme — etkileşimli prototipler oluşturma
- Dev Mode — geliştiriciler için CSS/code export
Figma'ya Başlangıç
Hesap Oluşturma
figma.com adresinden ücretsiz hesap oluşturun. Google hesabınızla tek tıkla giriş yapabilirsiniz. Ücretsiz plan şunları içerir:
- 3 Figma dosyası
- Sınırsız kişisel draft dosyası
- 30 günlük versiyon geçmişi
- Temel bileşen ve stil desteği
Arayüz Tanıtımı
Figma arayüzü dört ana bölümden oluşur:
Sol panel — Katmanlar ve Sayfalar:
Dosyanızdaki tüm elemanları hiyerarşik olarak gösterir. Sayfalar arasında geçiş yapabilirsiniz.
Üst araç çubuğu:
Temel araçlar burada bulunur: Seçim (V), Frame (F), Şekil (R), Kalem (P), Metin (T) ve El (H).
Sağ panel — Özellikler:
Seçili elemanın boyut, renk, yazı tipi, efekt gibi özelliklerini buradan düzenlersiniz.
Orta alan — Canvas:
Tasarımınızı oluşturduğunuz sonsuz beyaz alan. Yakınlaştırma ve uzaklaştırma yaparak çalışabilirsiniz.
Temel Araçlar
Frame (F)
Frame, tasarımınızın temel yapı taşıdır. Web sayfası, mobil ekran veya herhangi bir alan oluşturmak için Frame kullanılır.
Sık kullanılan Frame boyutları:
- iPhone 15 Pro: 393 x 852
- Desktop: 1440 x 900
- iPad: 834 x 1194
- Instagram Post: 1080 x 1080
İpucu: F tuşuna basıp sağ panelden hazır cihaz boyutlarını seçebilirsiniz.
Şekil Araçları
- Rectangle (R): Dikdörtgen — butonlar, kartlar, arka planlar için
- Ellipse (O): Daire ve elips — profil fotoğrafları, ikonlar için
- Line (L): Çizgi — ayırıcılar için
- Polygon: Çokgen — özel şekiller için
- Star: Yıldız — derecelendirme görselleri için
Metin (T)
T tuşuyla metin aracını aktifleştirin. Sağ panelden şunları ayarlayabilirsiniz:
- Font: Google Fonts kütüphanesinin tamamı kullanılabilir
- Boyut: Piksel cinsinden
- Ağırlık: Regular, Medium, Semi Bold, Bold
- Satır yüksekliği (Line height): Satırlar arası boşluk
- Harf aralığı (Letter spacing): Harfler arası boşluk
Renk ve Stil
Her elemanın dolgu (fill), kenarlık (stroke) ve efekt (shadow, blur) özellikleri vardır.
Renk seçimi ipuçları:
- Coolors ile harmonik renk paletleri oluşturun
- Realtime Colors ile paletinizi gerçek bir web sitesinde önizleyin
- Figma'nın eyedropper aracıyla (I tuşu) mevcut renklerden örnekleme yapın
Bileşen (Component) Sistemi
Bileşenler, Figma'nın en güçlü özelliğidir. Bir tasarım elemanını bileşene çevirerek onu her yerde tekrar kullanabilirsiniz. Ana bileşeni değiştirdiğinizde tüm kopyalar otomatik güncellenir.
Bileşen Oluşturma
- Tasarım elemanını seçin
- Sağ tıklayıp "Create Component" seçin (veya Ctrl+Alt+K)
- Bileşen mor renk alır — bu ana bileşendir (main component)
Bileşen Kullanma
Ana bileşeni kopyalayıp yapıştırdığınızda bir "instance" (kopya) oluşur. Instance'lar:
- Ana bileşendeki değişiklikleri otomatik alır
- Metin, renk gibi özellikleri yerel olarak değiştirebilirsiniz (override)
- Bileşeni değiştirmeden o kopyaya özel düzenleme yapabilirsiniz
Variants (Varyantlar)
Bir bileşenin farklı durumlarını varyantlarla yönetirsiniz. Örneğin bir buton bileşeni:
- State: Default, Hover, Active, Disabled
- Size: Small, Medium, Large
- Type: Primary, Secondary, Outline
Bu sayede tek bir buton bileşeniyle 12 farklı kombinasyon elde edersiniz.
Auto Layout
Auto Layout, Figma'nın tasarım verimliliğini dramatik şekilde artıran bir özelliktir. CSS'teki Flexbox mantığına benzer şekilde çalışır.
Auto Layout Ne Yapar?
- Elemanları otomatik hizalar (yatay veya dikey)
- İçerik değiştiğinde boyutu otomatik günceller
- Padding ve gap (boşluk) tanımlayabilirsiniz
- Elemanları yeniden sıralayabilirsiniz (sürükle-bırak)
Auto Layout Kullanımı
- Elemanları seçin
- Shift+A tuşlarına basın (veya sağ panelden "Add Auto Layout")
- Sağ panelden ayarlayın:
- Padding: İç boşluk
- Gap: Elemanlar arası boşluk
- Alignment: Hizalama
Pratik örnek — Buton:
- Bir dikdörtgen oluşturun
- İçine metin yazın
- İkisini seçip Shift+A ile Auto Layout ekleyin
- Padding: sol-sağ 24, üst-alt 12
- Artık metin uzasa bile buton otomatik genişler
Prototipleme
Figma'da statik tasarımlarınızı etkileşimli prototiplere dönüştürebilirsiniz.
Temel Prototipleme
- Üst menüden "Prototype" sekmesine geçin
- Bir elemanı seçin ve mavi dairecikten hedef frame'e sürükleyin
- Etkileşim türünü seçin:
- On Hover: Üzerine gelindiğinde
- On Drag: Sürüklendiğinde
- After Delay: Belirli süre sonra
Animasyonlar
Geçişler için animasyon türleri:
- Instant: Anında geçiş
- Dissolve: Çözülme efekti
- Move In / Move Out: Kayma efekti
- Smart Animate: Figma elemanlar arasındaki farkı otomatik animasyonla gösterir
Prototip Paylaşma
Sağ üst köşedeki "Play" butonuyla prototipi test edebilirsiniz. "Share" butonuyla link oluşturup müşterilere, geliştiricilere veya takım arkadaşlarına gönderebilirsiniz.
Tasarım Sistemleri
Büyük projelerde tutarlılık için tasarım sistemi oluşturmak şarttır. Figma'da tasarım sistemi şu bileşenlerden oluşur:
Renk Stilleri
Projenizin renk paletini stil olarak kaydedin. "Primary", "Secondary", "Success", "Error" gibi anlamlı isimler verin. Rengi değiştirmeniz gerektiğinde sadece stili güncelleyin — tüm kullanım yerleri otomatik değişir.
Tipografi Stilleri
Başlık (H1-H6), gövde metni, buton metni gibi tüm metin stillerini tanımlayın. Font, boyut, ağırlık ve satır yüksekliğini belirleyin.
Bileşen Kütüphanesi
Butonlar, input alanları, kartlar, navigasyon, modal'lar gibi tüm UI elemanlarını bileşen olarak oluşturun ve bir kütüphane dosyasında toplayın. Takımınız bu kütüphaneyi tüm projelerde kullanabilir.
Figma vs Diğer Tasarım Araçları
Figma vs Canva
Canva sosyal medya görselleri, sunumlar ve basit tasarımlar için mükemmeldir. Figma ise UI/UX tasarımı, web ve mobil uygulama tasarımı için profesyonel bir araçtır.
| Özellik | Figma | Canva |
|---------|-------|-------|
| Hedef kitle | Tasarımcılar, geliştiriciler | Herkes |
| Bileşen sistemi | Gelişmiş | Temel |
| Prototipleme | Evet | Hayır |
| Auto Layout | Evet | Hayır |
| Şablonlar | Topluluk şablonları | Geniş şablon kütüphanesi |
| Öğrenme eğrisi | Orta | Düşük |
Figma vs Framer
Framer tasarım + web sitesi yayınlama birleşimidir. Figma'da tasarladığınızı Framer'da direkt web sitesine çevirebilirsiniz.
Figma vs Sketch
Sketch, macOS'a özel bir uygulamadır. Figma tarayıcı tabanlı olduğu için her platformda çalışır. Figma'nın gerçek zamanlı iş birliği özelliği Sketch'e göre büyük avantajdır.
Figma İçin Faydalı Eklentiler
- Unsplash: Ücretsiz stok fotoğrafları doğrudan Figma'da kullanın
- Iconify: 100.000+ ikon kütüphanesine erişin
- Content Reel: Gerçekçi dummy veriler (isim, avatar, metin) ekleyin
- Contrast: Renk kontrastı erişilebilirlik kontrolü
- Autoflow: Kullanıcı akışı diyagramları oluşturun
İlham ve Kaynak
- Mobbin — Gerçek uygulamalardan UI/UX tasarım ilhamı
- Figma Community — Binlerce ücretsiz şablon ve bileşen kiti
- Excalidraw — Hızlı wireframe çizimleri için
- v0 — AI ile React bileşeni oluşturup Figma'da referans olarak kullanma
Sık Sorulan Sorular (SSS)
Figma ücretsiz mi?
Evet, kişisel kullanım için ücretsiz plandır. 3 Figma dosyası ve sınırsız draft dosyası oluşturabilirsiniz. Takım çalışması ve gelişmiş özellikler için ücretli plan gerekir.
Figma öğrenmek zor mu?
Temel araçları birkaç saatte öğrenebilirsiniz. Bileşen sistemi ve Auto Layout gibi ileri özellikleri öğrenmek bir-iki hafta sürer. YouTube'da ücretsiz Türkçe eğitimler mevcuttur.
Figma'da kodlama bilmek gerekir mi?
Hayır. Ancak CSS bilgisi Auto Layout ve spacing kavramlarını anlamanızı kolaylaştırır. Geliştirici değilseniz de Figma'yı rahatça kullanabilirsiniz.
Figma dosyalarım çevrimdışı çalışır mı?
Figma masaüstü uygulamasında sınırlı çevrimdışı destek vardır. Dosyalar yerel olarak önbelleğe alınır ve tekrar bağlandığınızda senkronize edilir. Ancak tam işlevsellik için internet bağlantısı gerekir.
Figma'da tasarladığımı web sitesine nasıl çeviririm?
Birkaç yol vardır:
- Framer — Figma tasarımınızı import edip doğrudan web sitesi olarak yayınlayın
- v0 — Tasarımınızı referans olarak verip AI ile React kodu oluşturun
- Dev Mode — Figma'nın Dev Mode'u ile CSS kodlarını kopyalayıp geliştiricilere verin
- Manuel kodlama — Tasarımı referans alarak Cursor veya Bolt ile kodlayın
Figma'da animasyon yapabilir miyim?
Temel animasyonlar (Smart Animate, geçiş efektleri) Figma'da yapılabilir. Gelişmiş animasyonlar için Spline (3D animasyonlar) veya After Effects gibi araçlar kullanılabilir.
Sonuç
Figma, modern tasarım dünyasının vazgeçilmez aracıdır. Ücretsiz planıyla başlayıp, bileşen sistemi, Auto Layout ve prototipleme özelliklerini öğrendikçe profesyonel düzeyde tasarımlar oluşturabilirsiniz. Gerçek zamanlı iş birliği özelliği sayesinde takımınızla uyum içinde çalışır, Dev Mode ile geliştiricilere sorunsuz handoff yaparsınız.
Daha fazla tasarım ve üretkenlik aracı keşfetmek için ToolHunters ana sayfamızı ziyaret edin.