Figma ile UI/UX Tasarımına Başlamak: Kapsamlı Rehber

## Figma Nedir? **Figma**, tarayıcı tabanlı çalışan ve gerçek zamanlı iş birliği imkânı sunan profesyonel bir arayüz (UI) tasarım aracıdır. Kuruluma gerek duymadan herhangi bir işletim sisteminde çalışabilmesi, takım üyelerinin aynı dosyada eş zamanlı çalışabilmesi ve güçlü bileşen sistemi sayesinde kısa sürede endüstrinin standart aracı haline gelmiştir. Google tarafından 2022'de satın alma girişiminde bulunulmuş; bu girişim AB düzenleyicilerinin itirazıyla 2023'te sonuçsuz kalmıştır. Figma bağımsız bir şirket olarak varlığını sürdürmektedir. ## Figma'nın Güçlü Yönleri **Gerçek zamanlı iş birliği:** Google Docs'un tasarım dünyasındaki karşılığı. Tasarımcı, geliştirici ve müşteri aynı dosyayı eş zamanlı inceleyip yorum yapabilir. **Bileşen Sistemi (Components):** Bir kez oluşturulan bir buton, kart veya form elemanı tüm projede kullanılabilir. Ana bileşeni güncellediğinizde tüm örnekler otomatik güncellenir. **Auto Layout:** İçeriğe göre otomatik büyüyen ve küçülen akıllı çerçeveler oluşturmanızı sağlar. Responsive tasarım prototiplerini geliştirirken büyük kolaylık sağlar. **Variant sistemi:** Bir butonun aktif, pasif, hover ve disabled hallerini tek bir bileşende gruplamanıza olanak tanır. **Geliştirici modu:** Geliştiriciler; tasarım üzerindeki her elemanın CSS değerlerini, boyutlarını ve renklerini Figma üzerinden doğrudan okuyabilir. ## Figma'ya Ücretsiz Başlamak Figma'nın ücretsiz planı, bireysel kullanıcılar ve iki kişilik küçük takımlar için oldukça cömert bir limit sunar: - Sınırsız taslak (draft) dosyası - 3 adet proje dosyası - Sınırsız görüntüleyici (viewer) - Temel iş birliği özellikleri Profesyonel veya Organization planları büyük takımlar, özel bileşen kütüphaneleri ve gelişmiş yönetici özellikleri sunar. ## Temel Figma Araçları **Frame (F):** Figma'da sayfanın her bölümü bir frame içindedir. Telefon ekranı, web sayfası veya herhangi bir alan frame olarak tanımlanır. **Rectangle (R), Ellipse (O), Line (L):** Temel şekil araçları. **Pen (P):** Vektör kalem aracı. Özel şekiller oluşturmak için kullanılır. **Text (T):** Metin aracı. Tip ölçeği sistemi (type scale) oluşturmak tasarım tutarlılığını artırır. **Component (Ctrl+Alt+K):** Seçili elemanı bileşene dönüştürür. ## Prototyping (Prototipleme) Figma'nın Prototype sekmesi; ekranlar arasında geçiş animasyonları ve etkileşimler oluşturmanıza olanak tanır. Bir müşteriye "tıklayarak gezebilecekleri" bir prototip sunmak büyük bir avantaj sağlar. Basit bir bağlantı eklemek için: Prototype sekmesine geçin → Elemanın sağ kenarındaki mavi halkayı sürükleyip hedef çerçeveye bırakın. ## Figma ile Akış Tasarımı (User Flow) İyi bir UX tasarımı, kullanıcının uygulamada izleyeceği yolu netleştirmekle başlar. FigJam (Figma'nın beyaz tahta aracı) ile kullanıcı akışı diyagramları, persona kartları ve kullanılabilirlik not kartları oluşturabilirsiniz. ## Kütüphaneler ve Plugin'ler Figma'nın topluluğu binlerce ücretsiz bileşen kütüphanesi ve eklenti yayımlamıştır: **Unsplash:** Doğrudan Figma içinden ücretsiz stok fotoğraf eklemenizi sağlar. **Iconify:** 100.000'den fazla ikona erişim imkânı sunar. **Batch Styler:** Renk ve tipografi stillerini toplu güncellemek için. **Content Reel:** Gerçekçi içeriklerle (isim, fotoğraf, metin) tasarımı doldurmak için. ## Figma'dan Tasarım Varlığı Dışa Aktarmak Herhangi bir elemanı seçip sağ panelin altındaki "Export" bölümünden PNG, JPG, SVG veya PDF olarak dışa aktarabilirsiniz. @2x ve @3x seçenekleri Retina ekranlar için yüksek çözünürlüklü dışa aktarım sağlar. GrafikKutusu'nda Figma ile uyumlu SVG ikon setleri, illüstrasyonlar ve UI kit bileşenleri ücretsiz olarak sunulmaktadır.