Figma Ne İçin Kullanılır? UI/UX Tasarım, Prototipleme ve Takım Çalışması Rehberi

Figma, tarayıcı tabanlı çalışan; web siteleri ve mobil uygulamalar için modern UI/UX (Kullanıcı Arayüzü ve Deneyimi) tasarım ve prototipleme aracıdır. Tıpkı Google Docs gibi aynı tasarım dosyası üzerinde onlarca tasarımcı ve yazılımcının aynı anda canlı imleçlerle çalışabilmesini sağlayarak tasarım sektöründe devrim yaratmıştır.

Figma Hakkında Bilmen Gereken 5 Temel Soru

Hızlı Özet & Rehber

Ne İçin Kullanılır?

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.

Neler Yapılı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.

Nerede Kullanılır?

Tasarım ajanslarında, teknoloji şirketlerinde, ürün yönetim ekiplerinde ve frontend yazılımcılarda kullanılır.

Nasıl & Nerede Çalıştırı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.

Neden Önemlidir?

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.

Hızlı Erişim: Figma Kurulum & Kullanım Sayfası → Tüm Yazılım Araçları →

Figma ile Neler Yapılır?

Web ve Mobil Arayüz Çizimi: Tel kafeslerden (wireframe) son derece detaylı pixel-perfect arayüzlere kadar tüm ekranları tasarlama.
Tıklanabilir Prototipleme: Ekranlar arasına geçiş animasyonları bağlayarak uygulama henüz kodlanmadan gerçekmiş gibi test ettirme.
Tasarım Sistemleri (Design Systems): Renk paletleri, tipografi kuralları ve tekrar kullanılabilir bileşenler (components) oluşturma.
Yazılımcı Teslimi (Dev Mode): Tasarımdaki öğelerin CSS kodlarını, renk hex kodlarını ve boşluk (padding/margin) ölçülerini anında alma.

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.

Resmi kaynak ↗ Görseli büyüt ↗
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)

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.

Figma ile Profesyonel Çalışma Düzeni ve En İyi Pratikler

Figma aracını yalnızca temel kurulumla bırakmayıp günlük yazılım geliştirme sürecinde verimli kullanmak için şu kontrol listesini alışkanlık haline getirmelisin:

Aşama	Doğru Uygulama (Best Practice)	Kaçınılması Gereken Hata	Kazanım
1. Kurulum ve Yapılandırma	Resmi kaynaktan kararlı (LTS/Stable) sürümü kurmak ve sürüm numarasını doğrulamak	Rastgele üçüncü parti sitelerden eski kurulum paketi indirmek	Güvenlik yamaları ve güncel dokümantasyonla tam uyum
2. Proje Klasör ve Ortam Düzeni	Her proje için ayrı çalışma dizini ve yapılandırma dosyası kullanmak	Tüm denemeleri masaüstünde veya sistem kök dizininde karıştırmak	Bağımlılık çakışmalarını ve dosya kayıplarını önler
3. Güvenlik ve Gizli Bilgiler	API anahtarlarını, parolaları ve bağlantı dizelerini ortam değişkenlerinde (`.env`) tutmak	Parola veya gizli anahtarları doğrudan kod içine veya ekran görüntüsüne dahil etmek	Yetkisiz erişim ve veri sızıntısı riskini ortadan kaldırır
4. Hata Ayıklama (Debugging)	Bir sorun çıktığında önce günlük (log) çıktısını ve hata mesajının satır numarasını okumak	Hata mesajını okumadan rastgele ayarları değiştirip yeniden kurmak	Sorun çözme süresini saatlerden dakikalara indirir

Özellikle ekip çalışmalarında Figma ayarlarının ekip arkadaşlarınla aynı sürümde olması ("benim bilgisayarımda çalışıyordu" sorununu önlemek açısından) kritik önem taşır. İlk projeni tamamladıktan sonra klavye kısayollarını ve otomasyon özelliklerini adım adım iş akışına dahil edebilirsin.

Pratik Araç Rehberi

Figma Kurulum ve Kullanım Adımlarına Geç

Figma aracını bilgisayarına kurmak, ilk projenle çalıştırmak ve sık karşılaşılan hataların çözümlerini görmek için hazırladığımız özel sayfayı inceleyebilirsin.

Figma Kurulum & Kullanım Sayfası → Tüm Geliştirici Araçları →