Figma Kullanımı

Figma, tarayıcı üzerinden çalışan, ekip içi işbirliğine olanak tanıyan ve UI/UX tasarımından logo çalışmalarına kadar geniş bir kullanım alanına sahip bulut tabanlı bir tasarım aracıdır. Kurulum gerektirmez, platform bağımsız çalışır ve ücretsiz planıyla bireysel kullanım için başlangıç noktası sunar. Biz de tasarım süreçlerimizde Figma’yı aktif biçimde kullandığımızdan, bu rehberde aracı ilk kez keşfedenlere ve temel özelliklerini derinlemesine öğrenmek isteyenlere pratik bir yol haritası sunuyoruz.

Figma Nedir ve Ne İşe Yarar?

Figma, 2016 yılında Dylan Field ve Evan Wallace tarafından kurulan ve günümüzde dünya genelinde 4 milyondan fazla tasarımcı tarafından kullanılan bir arayüz ve görsel tasarım platformudur. Adobe’nin 2022’de satın alma girişiminin AB rekabet otoritesi tarafından engellenmesi, Figma’nın bağımsızlığını korumasını sağladı ve platform 2024-2026 döneminde AI entegrasyonlarıyla gelişimini sürdürdü.

Figma’nın kullanım alanları şunlardır:

• UI/UX tasarımı: Mobil uygulama ve web arayüzü tasarımı
• Prototipleme: Tıklanabilir, animasyonlu prototip oluşturma
• Logo ve marka tasarımı: Vektörel çalışma desteğiyle ölçeksiz tasarım
• Sunum ve dokümantasyon: FigJam ile beyaz tahta ve akış diyagramları
• Ekip işbirliği: Gerçek zamanlı çoklu kullanıcı düzenleme

Asıl güç; tasarımcı, geliştirici ve proje yöneticisinin aynı dosyada aynı anda çalışabilmesinde yatar. Bu özellik, revizyon döngülerini ve versiyon karışıklığını ortadan kaldırır.

Figma’ya Nasıl Başlanır?

Figma’yı kullanmaya başlamak için herhangi bir yazılım indirmenize gerek yoktur. Tüm çalışmalar tarayıcı üzerinden yürütülür; ancak dilerseniz Windows ve macOS için masaüstü uygulamasını da tercih edebilirsiniz.

Ücretsiz Hesap Oluşturma ve Plan Seçimi

Figma.com adresine girerek e-posta ile ücretsiz hesap oluşturabilirsiniz. Ücretsiz Starter planı; 3 aktif proje, sınırsız dosya ve sınırsız editör sayısı sunar. Bireysel çalışmalar ve küçük ekipler için bu plan çoğunlukla yeterlidir.

Ekip sayısı arttığında ve ileri düzey özellikler gerektiğinde ücretli planlar devreye girer. 2026 itibarıyla Professional plan kişi başı aylık 12 dolar olarak fiyatlandırılmakta; sınırsız proje, versiyon geçmişi ve gelişmiş prototip özelliklerini kapsamaktadır.

Arayüz ve Temel Araçlar

Figma arayüzü ilk görüşte karmaşık görünse de mantığı öğrenildiğinde çok sezgisel bir yapıya sahiptir. Ekranın sol tarafında katman paneli, sağ tarafında özellik paneli, üst kısımda ise araç çubuğu yer alır.

Sık kullanılan temel araçlar ve kısayolları:

• V — Seçim aracı: Nesne seçme ve taşıma
• F — Frame: Çalışma alanı (artboard) oluşturma
• R — Rectangle: Dikdörtgen çizme
• T — Text: Metin ekleme
• P — Pen: Vektör kalem aracı
• Ctrl/Cmd + G: Seçili nesneleri gruplama

Figma’nın Temel Özellikleri

Figma’yı rakiplerinden ayıran üç temel özellik vardır: component sistemi, auto layout ve gerçek zamanlı işbirliği. Bu üçü bir arada kullanıldığında tasarım süreci dramatik biçimde hızlanır.

Frame ve Component Yapısı

Frame, Figma’daki temel çalışma birimidir. Photoshop’taki artboard’a benzer ama çok daha güçlüdür; kendi içinde başka frame’ler barındırabilir ve responsive davranış tanımlanabilir. Mobil tasarım yaparken iPhone 16 frame’i, web tasarımında Desktop frame’i seçerek başlamak, boyut sorunlarını baştan önler.

Component ise tekrar kullanılabilir tasarım birimidir. Bir buton component oluşturduğunuzda, sayfanın farklı yerlerinde kullanılan tüm kopyalar (instance) ana component’tan güncellenir. Renk ya da yazı tipi değişikliği tek noktadan tüm sayfaya yansır. Bu özellik, büyük projelerde tutarlılığı sağlamanın en pratik yoludur.

Auto Layout Kullanımı

Auto Layout, Figma’nın en verimli özelliklerinden biridir. CSS flexbox mantığına benzer biçimde çalışır; nesneleri yatay ya da dikey eksende otomatik hizalar, aralarındaki boşluğu eşit tutar ve içerik değiştiğinde container otomatik boyutlanır.

Biz tasarım süreçlerimizde özellikle buton tasarımlarında, kart bileşenlerinde ve navigasyon menülerinde auto layout kullanırız. Bir butona metin eklendiğinde container’ın otomatik genişlemesi, saatlerce sürebilecek manuel ayarları ortadan kaldırır.

Prototip Oluşturma

Figma’da tasarım tamamlandıktan sonra sağ panelden Prototype sekmesine geçerek etkileşimli prototip oluşturulabilir. Bir frame’den diğerine geçiş animasyonu tanımlamak, buton tıklamalarına tepki eklemek ve akışı test etmek için herhangi bir ek araç gerekmez.

Prototip hazırlandıktan sonra paylaşım linki oluşturularak müşteri veya geliştirici ekiple paylaşılır. Karşı taraf Figma hesabı olmadan tarayıcıda prototipi inceleyebilir ve yorum ekleyebilir. Bu özellik, revizyon süreçlerini e-posta trafiğinden çıkararak çok daha düzenli bir yapıya taşır.

Figma’da Gerçek Zamanlı İşbirliği

Figma’nın rakiplerinden en belirgin biçimde ayrıştığı nokta budur. Bir Figma dosyasında aynı anda birden fazla kişi çalışabilir; her kullanıcının imleci ekranda renkli bir nokta olarak görünür. Google Docs’un tasarım dünyasındaki karşılığı olarak düşünülebilir.

İşbirliği özellikleri şunları kapsar:

• Yorum (Comment): Tasarımın belirli bir noktasına yorum bırakma (C tuşu)
• Versiyon geçmişi: Ücretli planlarda her kayıt anının arşivlenmesi
• Dev Mode: Geliştiricilerin CSS, iOS ve Android değerlerini doğrudan kopyalaması
• Paylaşım izinleri: Görüntüleme, yorum yapma veya düzenleme yetkisi tanımlama

Nielsen Norman Group araştırmasına göre gerçek zamanlı işbirliği araçları kullanılan ekiplerde tasarım onay süreleri ortalama %40 kısalmaktadır. Bu verimlilik farkı, özellikle ajans-müşteri ilişkilerinde revizyon turlarını belirgin biçimde azaltır.

Figma ile Logo ve Marka Tasarımı

Bu konu genellikle Figma rehberlerinde yeterince ele alınmaz; oysa biz Figma’yı logo ve marka kimliği çalışmalarında da etkin biçimde kullanıyoruz. Figma, tam anlamıyla bir vektör editörü olmasa da logo tasarımı ve marka kılavuzu hazırlamak için güçlü bir platform sunar.

Vektörel Logo Çalışması

Figma’daki Pen aracı (P) ve vektör düzenleme modu, temel logo formlarını oluşturmak için yeterlidir. Boolean işlemleri (Union, Subtract, Intersect, Exclude) ile şekilleri birleştirip çıkararak karmaşık logolar üretilebilir. Tasarım tamamlandıktan sonra SVG formatında dışa aktarım, logoyu ölçeksiz ve baskıya hazır hale getirir.

Önemli bir not: Figma, Illustrator’ın yerini tamamen alamaz; çok katmanlı, aşırı detaylı vektör çalışmalar için Illustrator hâlâ daha güçlüdür. Ancak dijital kullanım odaklı logolar ve UI entegrasyonu gerektiren marka çalışmaları için Figma son derece verimli bir seçenektir.

Marka Kılavuzu (Brand Guidelines) Oluşturma

Figma’nın component ve stil sistemi, marka kılavuzu oluşturmak için biçilmiş kaftandır. Color styles ile marka renklerini, Text styles ile tipografiyi, Effect styles ile gölge ve bulanıklık efektlerini tanımlayıp paylaşılan bir kütüphane olarak yayımlayabilirsiniz.

Ekip üyeleri bu kütüphaneye bağlı çalıştığında, logo rengi ya da font değişikliği merkezi kütüphaneden yapılır ve bağlı tüm dosyalar otomatik güncellenir. Bu yöntem, marka tutarlılığını manuel kontrol yerine sistem seviyesinde sağlar.

Figma Plugin’leri ile Verimliliği Artırın

Figma’nın Community bölümünde binlerce ücretsiz plugin bulunmaktadır. Biz süreçlerimizde en sık şu plugin’leri kullanırız:

• Unsplash: Figma içinden ücretsiz stok fotoğraf ekleme
• Iconify: 100.000’den fazla ücretsiz ikon kütüphanesi
• Contrast: Renk kontrast oranını WCAG standartlarına göre kontrol etme
• Lorem Ipsum: Otomatik placeholder metin oluşturma
• Figma AI (yerleşik): 2025’ten itibaren yerleşik gelen AI araçları — metin yeniden yazma, otomatik düzen önerisi ve görsel oluşturma

Plugin’lere erişmek için üst menüden Plugins → Browse plugins in Community yolunu izlemek yeterlidir. Eklenen plugin’ler sağ tık menüsünden ya da üst menüden hızlıca çağrılabilir.

Figma ile Geliştirici Handoff Süreci

Tasarım tamamlandıktan sonra geliştiriciye aktarım (handoff) süreci, pek çok projede kayıp ve yanlış anlaşılmaların yaşandığı kritik bir köprüdür. Figma, bu süreci büyük ölçüde otomatikleştiren araçlar sunar.

Dev Mode (geliştirici modu), Figma’nın ayrı bir görünüm katmanıdır. Geliştirici bu modda bir katmanı seçtiğinde, sağ panelde otomatik olarak şunlar görünür:

• CSS, iOS (Swift) ve Android (Kotlin/XML) kod çıktıları
• Kenar boşlukları ve boyutlar (piksel cinsinden)
• Renk değerleri (HEX, RGB, HSL)
• Yazı tipi adı, boyutu, satır yüksekliği ve harf aralığı
• Dışa aktarılabilir görsel varlıklar (PNG, SVG, WebP)

Biz müşteri projelerinde geliştirici ekibe Figma dosyasını “görüntüleme + yorum” yetkisiyle paylaşır, Dev Mode üzerinden tüm değerlere erişmelerini sağlarız. Bu yöntem, tekrar eden ölçü soru-cevap maillerini neredeyse tamamen ortadan kaldırır. Tasarımcı ile geliştirici arasındaki handoff süreci, doğru kullanıldığında günlerden saatlere iner.

Dev Mode 2024’ten itibaren bazı kısıtlamalarla ücretsiz planlarda da kullanılabilir; tam özellikler için Professional ya da Organization planı gerekmektedir.

Sıkça Sorulan Sorular