Bu sayfada · 9 başlık
Figma Hakkında Bilmen Gereken 5 Temel Soru
Web ve mobil uygulamalar için kullanıcı arayüzü (UI) ve kullanıcı deneyimi (UX) tasarlamak, prototipler üretmek ve ekiplerle anlık ortak çalışmak için kullanılan bulut tasarım aracıdır.
Web sitesi wireframe’leri, mobil uygulama ekranları, tıklanabilir prototipler, tasarım sistemleri ve geliştiriciye kod çıktısı (Dev Mode) hazırlanır.
Tasarım ajanslarında, teknoloji şirketlerinde, ürün yönetim ekiplerinde ve frontend yazılımcılarda kullanılır.
figma.com adresinden doğrudan web tarayıcısında veya masaüstü uygulaması olarak Windows ve Mac üzerinde çalıştırılır.
Tasarımcılar ile yazılımcılar arasındaki köprüdür; aynı anda birden fazla kişinin aynı tuvalde canlı çalışmasına imkan verir.
Figma ne için kullanılır?
Web sitesi ve uygulama ekranları tasarlamak
Tıklanabilir prototipler hazırlamak
Ekiple aynı dosyada aynı anda çalışmak
Renk, yazı tipi ve bileşenlerden oluşan tasarım sistemi kurmak
Figma kullanırken duyacağın kavramlar
- Frame (çerçeve)
- Tasarladığın ekran ya da bölüm; telefon, tablet veya masaüstü boyutunda olabilir.
- Bileşen (component)
- Bir kez tasarlayıp her yerde tekrar kullandığın parça (ör. buton). Asıl bileşeni değiştirince hepsi güncellenir.
- Auto Layout
- Öğeleri otomatik hizalayan ve aralıklarını ayarlayan özellik.
- Prototip
- Ekranları birbirine bağlayarak tıklanabilir bir deneme sürümü oluşturmak.
Nasıl kurulur?
Adımları görsellerle takip et. Ekran görüntüsüne dokunarak büyütebilirsin; sürümüne veya işletim sistemine göre düğmelerin yeri değişebilir.
-
1
figma.com adresinden ücretsiz hesap aç.
Gerçek ekran görüntüsü Resmi site · 3 Kasım 2026 ekran görüntüsü
Figma masaüstü uygulamasını indir veya tarayıcıdan başla.
-
2
Doğrudan tarayıcıda kullanabilirsin. İstersen masaüstü uygulamasını da indirebilirsin.
Şekil 2 · Figma doğrudan tarayıcıda açılır; kurulum gerekmez. (temsili çizim) -
3
Öğrenci ya da öğretmensen Figma for Education ile ücretli özellikleri ücretsiz kullanabilirsin.
Şekil 3 · Öğrenciysen Figma for Education ile ücretli özellikleri ücretsiz kullan. (temsili çizim)
Nasıl kullanılır?
Adım adım ilk kullanım. Kod kutularındaki "Kopyala" butonuyla komutları kopyalayabilirsin.
Yeni tasarım dosyası
Ana ekranda yeni bir Design file oluştur.
Yeni dosyada sayfa ve katman panelini incele.
Katmanları görevlerini anlatan isimlerle adlandır; Rectangle 37 gibi adlar büyüyen dosyada zor okunur.
Dosya ile proje/ekip izinlerini farklı kavramlar olarak öğren.
Uygulama: Ana ekran ve ders ekranı için iki frame oluştur.
Kontrol: Frame ve katman ayrımını biliyorum.
Videoyla adım adım izle · 2:55
Türkçe açıklamalı sessiz görsel anlatım. Sesli ders veya kesintisiz ekran kaydı değildir. Duraklatıp kendi ortamında uygula.
Video bölümleri ve tam metin
Yeni tasarım dosyası
Yeni dosyada sayfa ve katman panelini incele.
İşin mantığı
Katmanları görevlerini anlatan isimlerle adlandır; Rectangle 37 gibi adlar büyüyen dosyada zor okunur.
Uygula ve gözlemle
Dosya ile proje/ekip izinlerini farklı kavramlar olarak öğren.
Somut görev
Ana ekran ve ders ekranı için iki frame oluştur.
Kontrol et
Frame ve katman ayrımını biliyorum.
Takılırsan
Metin kutudan taşıyor — Sabit boyut, Auto Layout büyüme/küçülme ve metin sarma ayarlarını incele.
Kendine sor
Prototip veri kaydeder mi? Yanıt: Kendi başına gerçek uygulama sunucusu oluşturmaz; etkileşimi canlandırır.
Çerçeve (frame) ekle
Klavyeden F tuşuna bas ve sağ panelden telefon ya da masaüstü boyutu seç. Bu senin ekranın olur.
Bir telefon veya masaüstü frame’i oluştur; bunun bir çalışma boyutu olduğunu bil.
İçerik sırasını önce metinle kur; sonra renk ve ayrıntı ekle.
Bir kopyayı daha dar genişlikte inceleyerek tasarım kararlarını karşılaştır.
Uygulama: Başlık ve açıklamaları gerçek görev metniyle yaz.
Kontrol: Auto Layout metin değişimine uyuyor.
Videoyla adım adım izle · 2:55
Türkçe açıklamalı sessiz görsel anlatım. Sesli ders veya kesintisiz ekran kaydı değildir. Duraklatıp kendi ortamında uygula.
Video bölümleri ve tam metin
Çerçeve (frame) ekle
Bir telefon veya masaüstü frame’i oluştur; bunun bir çalışma boyutu olduğunu bil.
İşin mantığı
İçerik sırasını önce metinle kur; sonra renk ve ayrıntı ekle.
Uygula ve gözlemle
Bir kopyayı daha dar genişlikte inceleyerek tasarım kararlarını karşılaştır.
Somut görev
Başlık ve açıklamaları gerçek görev metniyle yaz.
Kontrol et
Auto Layout metin değişimine uyuyor.
Takılırsan
Prototip yanlış ekrandan açılıyor — Başlangıç frame’i ve bağlantı hedeflerini kontrol et.
Kendine sor
Auto Layout neyi açıklar? Yanıt: İçerik, hizalama ve boşlukların değişime nasıl tepki vereceğini.
Şekil ve yazı ekle
R ile dikdörtgen, T ile yazı ekle. Sağdaki panelden renk, yazı tipi ve boyutu değiştir.
Başlık, açıklama ve düğmeden oluşan bir kart kur.
Auto Layout ile boşluk ve hizayı belirle; metni uzatıp kartın tepkisini gözle.
Tekrar eden düğmeyi component yap; ana bileşenle örnek arasındaki ilişkiyi incele.
Uygulama: Bir düğmeyi component olarak oluştur.
Kontrol: Tekrarlanan düğme component örneği.
Videoyla adım adım izle · 2:55
Türkçe açıklamalı sessiz görsel anlatım. Sesli ders veya kesintisiz ekran kaydı değildir. Duraklatıp kendi ortamında uygula.
Video bölümleri ve tam metin
Şekil ve yazı ekle
Başlık, açıklama ve düğmeden oluşan bir kart kur.
İşin mantığı
Auto Layout ile boşluk ve hizayı belirle; metni uzatıp kartın tepkisini gözle.
Uygula ve gözlemle
Tekrar eden düğmeyi component yap; ana bileşenle örnek arasındaki ilişkiyi incele.
Somut görev
Bir düğmeyi component olarak oluştur.
Kontrol et
Tekrarlanan düğme component örneği.
Takılırsan
Bir düğme değişti diğerleri değişmedi — Bağımsız kopya mı component instance mı kullandığını denetle.
Kendine sor
Component neden yararlı? Yanıt: Tekrarlanan tasarım öğelerini tutarlı bir kaynaktan yönetmeyi sağlar.
Prototip yap
Sağ paneldeki Prototype sekmesinde bir butonu başka bir ekrana bağla ve ▶ ile tıklanabilir hâlini dene.
İki frame arasında bir prototip bağlantısı kur.
Başlatma frame’i, tıklama hedefi ve geri dönüş yolunu belirle.
Sunum modunda başka biri gibi görevi dene; yalnızca beklediğin noktaya tıklamak yerine yolun anlaşılır olup olmadığını düşün.
Uygulama: Kart ve düğmede Auto Layout uygula.
Kontrol: Prototipin gerçek uygulama olmadığını açıklayabiliyorum.
Videoyla adım adım izle · 2:55
Türkçe açıklamalı sessiz görsel anlatım. Sesli ders veya kesintisiz ekran kaydı değildir. Duraklatıp kendi ortamında uygula.
Video bölümleri ve tam metin
Prototip yap
İki frame arasında bir prototip bağlantısı kur.
İşin mantığı
Başlatma frame’i, tıklama hedefi ve geri dönüş yolunu belirle.
Uygula ve gözlemle
Sunum modunda başka biri gibi görevi dene; yalnızca beklediğin noktaya tıklamak yerine yolun anlaşılır olup olmadığını düşün.
Somut görev
Kart ve düğmede Auto Layout uygula.
Kontrol et
Prototipin gerçek uygulama olmadığını açıklayabiliyorum.
Takılırsan
Bir düğme değişti diğerleri değişmedi — Bağımsız kopya mı component instance mı kullandığını denetle.
Kendine sor
Component neden yararlı? Yanıt: Tekrarlanan tasarım öğelerini tutarlı bir kaynaktan yönetmeyi sağlar.
Sık karşılaşılan sorunlar ve çözümleri
Bir yerde takılırsan önce buraya bak.
"Eksik yazı tipi" uyarısı
Çözüm: Tasarımdaki yazı tipi bilgisayarında yok. Yazı tipini kur ya da Google Fonts'tan benzer birini seç.
Öğeler bir türlü hizalanmıyor
Çözüm: Öğeleri seçip Shift + A ile Auto Layout'a al; aralıklar otomatik ayarlanır.
Sık sorulan sorular
Figma kullanmak için kod bilmem gerekir mi? +
Hayır. Figma tamamen görsel bir tasarım aracıdır.
Figma ücretli mi? +
Ücretsiz ve eğitim seçeneklerinin kapsamı farklıdır. Proje, işbirliği ve uygunluk koşullarını güncel plan sayfasından kontrol et.
İpuçları
- Community bölümünde binlerce ücretsiz hazır tasarım şablonu var.
- Auto Layout (Shift + A) öğeleri otomatik hizalar; düzenli tasarımın sırrıdır.
- Tasarımın bitince ekran görüntüsünü yapay zekaya verip HTML ve Tailwind ile kodlamasını isteyebilirsin.
Figma uygulamalı eğitim atölyesi
Figma arayüzleri çizmek, düzenlemek ve etkileşimli prototiplerle denemek için kullanılır. Prototip bir uygulamanın davranışını canlandırabilir ama gerçek kullanıcı kaydı, ödeme veya sunucu mantığı oluşturmaz. Tasarımın tıklanabilmesi ile ürünün çalışması arasındaki farkı baştan ayır.
Frame bir ekranı veya bölüm alanını düzenler; katmanlar onun içindeki öğelerdir. Auto Layout, içerik ve boşluk ilişkileri kurmaya yardım eder. Sabit konumlara tek tek sürüklemek ilk bakışta hızlı olabilir, fakat metin uzadığında veya ekran daraldığında düzenin nasıl davranacağını açıklamaz.
Bir tasarımı yalnızca renk seçimi olarak düşünme. İçerik sırası, okunabilir metin, görünür odak fikri, düğme amacı ve boş/hata durumları da tasarımın parçasıdır. İlk örneği gerçekçi ama kişisel bilgi içermeyen metinlerle kurarak bu soruları görünür yap.
Kurulum öncesi ve doğrulama
- Figma hesabı ve uygun dosya erişimi hazır olsun.
- Örnek bir tasarım dosyası oluştur; ekip izinlerini bilerek seç.
- Kopyalanmış ücretli varlıklar yerine basit şekiller ve kendi metnini kullan.
Videoyla adım adım izle · 5:00
Türkçe açıklamalı sessiz görsel anlatım. Sesli ders veya kesintisiz ekran kaydı değildir. Duraklatıp kendi ortamında uygula.
Video bölümleri ve tam metin
İki ekranlı, yeniden kullanılabilir düğmeli öğrenme prototipi
Figma arayüzleri çizmek, düzenlemek ve etkileşimli prototiplerle denemek için kullanılır. Prototip bir uygulamanın davranışını canlandırabilir ama gerçek kullanıcı kaydı, ödeme veya sunucu mantığı oluşturmaz. Tasarımın tıklanabilmesi ile ürünün çalışması arasındaki farkı baştan ayır.
Hazırlık
Figma hesabı ve uygun dosya erişimi hazır olsun. Örnek bir tasarım dosyası oluştur; ekip izinlerini bilerek seç.
Proje adımı 1
Ana ekran ve ders ekranı için iki frame oluştur.
Proje adımı 2
Başlık ve açıklamaları gerçek görev metniyle yaz.
Proje adımı 3
Bir düğmeyi component olarak oluştur.
Proje adımı 4
Kart ve düğmede Auto Layout uygula.
Proje adımı 5
Başla düğmesini ders ekranına, geri bağlantısını ana ekrana bağla.
Proje adımı 6
Metni uzat, ekranı daralt ve prototipte ileri/geri yolunu kontrol et.
Başarı ölçütü 1
Frame ve katman ayrımını biliyorum.
Başarı ölçütü 2
Auto Layout metin değişimine uyuyor.
Başarı ölçütü 3
Tekrarlanan düğme component örneği.
Başarı ölçütü 4
Prototipin gerçek uygulama olmadığını açıklayabiliyorum.
Bitirme çalışması: İki ekranlı, yeniden kullanılabilir düğmeli öğrenme prototipi
- Ana ekran ve ders ekranı için iki frame oluştur.
- Başlık ve açıklamaları gerçek görev metniyle yaz.
- Bir düğmeyi component olarak oluştur.
- Kart ve düğmede Auto Layout uygula.
- Başla düğmesini ders ekranına, geri bağlantısını ana ekrana bağla.
- Metni uzat, ekranı daralt ve prototipte ileri/geri yolunu kontrol et.
Başarı ölçütlerin
- Frame ve katman ayrımını biliyorum.
- Auto Layout metin değişimine uyuyor.
- Tekrarlanan düğme component örneği.
- Prototipin gerçek uygulama olmadığını açıklayabiliyorum.
Sorun giderme masası
Metin kutudan taşıyor
Sabit boyut, Auto Layout büyüme/küçülme ve metin sarma ayarlarını incele.
Prototip yanlış ekrandan açılıyor
Başlangıç frame’i ve bağlantı hedeflerini kontrol et.
Bir düğme değişti diğerleri değişmedi
Bağımsız kopya mı component instance mı kullandığını denetle.
Kendini kontrol et
Prototip veri kaydeder mi?
Kendi başına gerçek uygulama sunucusu oluşturmaz; etkileşimi canlandırır.
Auto Layout neyi açıklar?
İçerik, hizalama ve boşlukların değişime nasıl tepki vereceğini.
Component neden yararlı?
Tekrarlanan tasarım öğelerini tutarlı bir kaynaktan yönetmeyi sağlar.
Bir sonraki modüller
- Component varyantları
- Responsive Auto Layout
- Erişilebilirlik ve geliştiriciye aktarım
Bu içerik işine yaradı mı?
Görüşünü aşağıdan işaretleyebilir ve varsa notunu bırakabilirsin.