Kısaca: Figma, tarayıcıda ve masaüstü uygulamasında çalışan, arayüz tasarımı için en yaygın kullanılan araçtır. Öğrenmeye dört kavramla başlayın: frame (çerçeve), auto layout (otomatik düzen), component (bileşen) ve stil ya da değişkenler. Ücretsiz Starter planı öğrenmek ve kişisel projeler için yeterlidir; kişisel taslaklar sınırsızdır, ekip alanındaki dosya sayısı ise sınırlıdır.
Kısa cevap
Figma’yı öğrenmenin en hızlı yolu, bütün menüleri ezberlemek değil, birkaç temel kavramı oturtup küçük bir ekranı baştan sona tasarlamaktır. Bu yazıda o temel kavramları, işinizi hızlandıracak kısayolları ve sık yapılan hataları anlatıyorum. Tasarım sürecinin genel aşamalarını wireframe, prototip ve tasarım sistemi yazısında anlattım.
Figma ücretsiz mi?
Figma’nın ücretsiz Starter planı var. Yazıldığı tarihte bu plan sınırsız kişisel taslak (Drafts), ekip alanında sınırlı sayıda dosya (3 Figma tasarım dosyası ve 3 FigJam dosyası) ve 30 günlük sürüm geçmişi sunuyor. Geliştiricilere yönelik Dev Mode ve ekip kütüphaneleri ücretli planlarda. Öğrenciler ve eğitimciler için ayrıca ücretsiz eğitim planı bulunuyor. Plan koşulları sık değiştiği için güncel bilgiyi Figma’nın fiyat sayfasından kontrol edin.
Arayüzü tanıyın
- Sol panel (Layers): Dosyadaki sayfalar ve katmanlar. Katmanlara anlamlı adlar vermek, dosya büyüdükçe hayat kurtarır.
- Tuval (Canvas): Tasarımın yapıldığı sonsuz çalışma alanı.
- Sağ panel (Properties): Seçili öğenin boyutu, rengi, yazı ayarları, auto layout ve efektleri.
- Üst araç çubuğu: Frame, şekil, kalem, metin ve yorum araçları.
1. Frame: her şeyin kabı
Figma’da bir ekran tasarlamaya frame ile başlanır. Frame, içine öğe koyabildiğiniz bir kutudur; bir telefon ekranı, bir kart ya da bir buton olabilir. Sağ paneldeki hazır boyutlardan (örneğin Desktop ya da iPhone) birini seçebilirsiniz. Frame ile grup arasındaki fark önemlidir: Grup yalnızca öğeleri bir arada tutar, frame ise kendi boyutu, arka planı, kenar kırpması, ızgarası ve auto layout özelliği olan bağımsız bir kaptır. Yeni başlayanlara önerim: Grup yerine çoğu zaman frame kullanın.
2. Auto layout: Figma’nın en önemli özelliği
Auto layout, bir frame’in içindeki öğeleri belirlediğiniz yönde (yatay ya da dikey), belirlediğiniz aralıkla (gap) ve iç boşlukla (padding) otomatik dizmesini sağlar. Bir butonun metnini uzattığınızda buton kendiliğinden genişler; bir karta yeni satır eklediğinizde kart uzar. Bu, CSS’teki Flexbox’ın Figma’daki karşılığıdır; bu yüzden auto layout ile kurulan bir tasarım geliştiriciye de çok daha kolay aktarılır.
- Öğeleri seçip Shift + A ile auto layout ekleyin.
- Aralık ve iç boşluk değerlerini bir ölçekten seçin (8, 16, 24…).
- Genişlik davranışını ayarlayın: Hug (içeriği sarar), Fill (kabı doldurur), Fixed (sabit).
- İç içe auto layout kullanın: Sayfa dikey, kart satırı yatay, kartın içi dikey.
Boşluk ölçeğinin mantığını boşluk ve düzen yazısında anlattım.
3. Component: bir kez tasarla, her yerde kullan
Bir butonu tasarladınız ve sitede 30 yerde kullanacaksınız. Onu component (bileşen) yapın (Ctrl/Cmd + Alt + K). Bileşenden türettiğiniz her kopya (instance) ana bileşene bağlı kalır: Ana bileşenin rengini ya da köşe yarıçapını değiştirdiğinizde bütün kopyalar güncellenir. Kopyalarda yalnızca metin gibi izin verdiğiniz özellikler değişir.
Varyantlar (variants) ile aynı bileşenin farklı hâllerini tek bir set içinde toplarsınız: birincil ve ikincil buton, normal, üzerine gelme ve devre dışı durumları. Hangi durumların tasarlanması gerektiğini buton ve form tasarımı yazısında listeledim.
4. Stiller ve değişkenler
Renkleri ve yazı ayarlarını her seferinde elle girmek yerine stil (style) ya da değişken (variable) olarak tanımlayın. Böylece marka rengini bir yerden değiştirdiğinizde bütün dosya güncellenir. Değişkenler ayrıca açık ve karanlık tema gibi modları da destekler. Tipografik ölçek ve renk paleti yazısında anlattığım değerleri Figma’da değişken olarak tanımlamak, küçük bir tasarım sisteminin ilk adımıdır.
5. Layout grid
Frame’e sağ panelden bir layout grid ekleyerek 12 kolonlu ızgara kurabilirsiniz. Masaüstü için 12 kolon, tablet için 8, mobil için 4 kolon yaygın bir başlangıçtır. Izgaranın mantığını grafik tasarımda kompozisyon yazısında anlattım.
6. Prototip
Prototype sekmesinde bir öğeyi seçip başka bir frame’e bağlayarak tıklanabilir akış oluşturabilirsiniz. Sunum modunda prototipi oynatabilir, telefonunuzda da deneyebilirsiniz. Bağlantıyı paylaşarak müşteriden ya da kullanıcılardan geri bildirim almak, kod yazmadan önce sorunları yakalamanın en ucuz yoludur.
7. Geliştiriciye teslim
Figma’da herhangi bir öğeyi seçtiğinizde ölçüleri, renkleri ve yazı ayarlarını görebilirsiniz. Ücretli planlardaki Dev Mode, geliştiricilere kod çıktısı, ölçüm araçları ve hangi ekranların hazır olduğunu gösteren işaretler sunar. Görselleri dışa aktarırken sağ paneldeki Export bölümünden format seçin: ikonlar için SVG, fotoğraflar için PNG ya da JPG; ardından web için WebP’ye dönüştürün.
Dışa aktardığınız görselleri web’e hazırlamayı web için görsel ve favicon yazısında anlattım.
İşinizi hızlandıracak kısayollar
| Kısayol | İşlev |
|---|---|
| F (ya da A) | Frame aracı |
| R / O / T | Dikdörtgen / Elips / Metin |
| Shift + A | Auto layout ekle |
| Ctrl/Cmd + Alt + K | Component oluştur |
| Ctrl/Cmd + G | Grupla |
| Ctrl/Cmd + D | Çoğalt |
| Shift + 1 | Her şeyi ekrana sığdır |
| Alt (seçiliyken üzerine gelme) | Öğeler arası mesafeyi ölç |
Yeni başlayanların sık yaptığı hatalar
- Her şeyi grup içinde tutmak, frame ve auto layout kullanmamak.
- Katmanları “Rectangle 47”, “Frame 112” adlarıyla bırakmak.
- Aynı butonu kopyala-yapıştır ile çoğaltıp component yapmamak; sonra 30 butonu tek tek düzeltmek.
- Renkleri ve yazı boyutlarını stil ya da değişken olmadan elle girmek.
- Mobil ekranı en sona bırakmak.
Nereden öğrenmeye devam etmeli?
Figma’nın resmî yardım merkezi ve ücretsiz eğitim içerikleri (Figma Help Center) temel konuları adım adım anlatır. Topluluk (Community) bölümündeki ücretsiz arayüz kitlerini açıp nasıl kurulduklarını incelemek de çok öğreticidir: Katmanların, auto layout ayarlarının ve bileşenlerin nasıl düzenlendiğine bakın.
Sık sorulan sorular
Figma’yı İngilizce mi öğrenmeliyim?
Terimlerin çoğu (frame, auto layout, component) sektörde İngilizce kullanılıyor. Arayüzü ve terimleri İngilizce öğrenmek, kaynaklara ve ekip içi iletişime kolaylık sağlar.
Figma mı, Adobe XD mi?
Adobe XD bakım moduna alındı ve artık aktif olarak geliştirilmiyor. Arayüz tasarımı için bugün Figma fiilî standarttır; açık kaynaklı bir alternatif arıyorsanız Penpot’a bakabilirsiniz.
Figma’da tasarlanan siteyi WordPress’e nasıl aktarırım?
Figma’daki tasarım bir plandır; WordPress’te bu planı bir tema ya da sayfa oluşturucuyla kodlamak gerekir. Auto layout, değişkenler ve bileşenlerle düzenli kurulmuş bir dosya, bu aktarımı çok kolaylaştırır.
Bu yazı Kasım 2026 itibarıyla geçerli bilgilere dayanır.
