Figma Nedir, Nasıl Kullanılır? Başlangıç Rehberi

Web sitesi, mobil uygulama veya dijital ürün tasarlarken fikirlerin görsel bir arayüze dönüştürülmesi gerekir. Sayfaların yerleşimi, butonların konumu, renkler, yazı tipleri, menüler ve kullanıcı akışları yazılım geliştirme aşamasından önce planlanmalıdır.

Bu planlama sürecinde kullanılan en önemli araçlardan biri Figmadır.

Figma, web sitesi, mobil uygulama, kullanıcı arayüzü ve dijital ürün tasarımlarının hazırlanmasına yardımcı olan, ekip çalışmasını destekleyen bir tasarım aracıdır.

Figma ile:

• Web sitesi arayüzü hazırlanabilir.
• Mobil uygulama ekranları tasarlanabilir.
• Wireframe oluşturulabilir.
• Kullanıcı akışları planlanabilir.
• Tıklanabilir prototip hazırlanabilir.
• Tasarım sistemi oluşturulabilir.
• Tekrar kullanılabilir bileşenler geliştirilebilir.
• Tasarımlar ekip üyeleriyle paylaşılabilir.
• Tasarımcı ve yazılımcılar aynı dosya üzerinde çalışabilir.
• Farklı ekran boyutları için responsive tasarımlar hazırlanabilir.

Figma’nın öne çıkan yönlerinden biri, tasarım dosyalarının ekip üyeleri tarafından ortak biçimde incelenebilmesidir. Tasarımcılar, proje yöneticileri, müşteriler ve yazılım geliştiriciler aynı proje üzerinden yorum yapabilir ve değişiklikleri takip edebilir.

Profesyonel bir internet sitesi oluştururken tasarımın hangi aşamalardan geçtiğini öğrenmek için profesyonel web tasarım nasıl hazırlanır? içeriği incelenebilir.

Figma Nedir?

Figma, dijital arayüz tasarımı, prototipleme ve ekip içi iş birliği için kullanılan bir tasarım platformudur.

Figma özellikle şu projelerde kullanılabilir:

• Kurumsal internet sitesi
• E-ticaret sitesi
• Landing page
• Mobil uygulama
• Yönetim paneli
• SaaS yazılımı
• Dashboard
• Müşteri portalı
• Rezervasyon sistemi
• Üyelik ekranları
• Dijital ürün prototipi
• Tasarım sistemi
• Sosyal medya şablonları
• Sunum ve temel grafik çalışmaları

Figma yalnızca görsel çizim yapmak için kullanılmaz. Bir ürünün kullanıcı tarafından nasıl kullanılacağı, ekranlar arasında nasıl geçiş yapılacağı ve farklı durumlarda hangi arayüzlerin görüntüleneceği de planlanabilir.

Figma Ne İşe Yarar?

Figma’nın temel amacı, dijital bir ürünün yazılım geliştirme aşamasından önce görsel ve işlevsel olarak planlanmasını sağlamaktır.

Web Sitesi Tasarlamaya Yardımcı Olur

Figma üzerinden:

• Ana sayfa
• Hakkımızda
• Hizmet sayfaları
• Ürün sayfaları
• Blog sayfaları
• İletişim sayfası
• Sepet
• Ödeme
• Üyelik
• Yönetim paneli

gibi ekranlar hazırlanabilir.

İnternet sitesi kurulumunun genel aşamaları için web sitesi nasıl yapılır? rehberi incelenebilir.

Mobil Uygulama Arayüzü Hazırlanabilir

Telefon ekranlarına uygun:

• Giriş ekranı
• Kayıt ekranı
• Profil
• Ana sayfa
• Bildirimler
• Mesajlaşma
• Ürün listeleme
• Ödeme
• Ayarlar

gibi sayfalar tasarlanabilir.

Prototip Oluşturulabilir

Tasarım ekranları birbirine bağlanarak kullanıcıların butonlara tıklayabildiği, sayfalar arasında geçiş yapabildiği örnek bir ürün hazırlanabilir.

Bu prototip sayesinde yazılım geliştirilmeden önce:

• Kullanıcı akışı test edilebilir.
• Eksik ekranlar belirlenebilir.
• Menü yapısı kontrol edilebilir.
• Müşteri onayı alınabilir.
• Yazılım ekibine proje daha açık anlatılabilir.

Ekip Çalışmasını Kolaylaştırır

Figma dosyaları ekip üyeleriyle paylaşılabilir. Yetkilendirilen kişiler:

• Tasarımı görüntüleyebilir.
• Yorum yapabilir.
• Düzenleme yapabilir.
• Belirli ekranları inceleyebilir.
• Yazılım için ölçüleri kontrol edebilir.

Tasarım Sistemi Oluşturulabilir

Renkler, yazı stilleri, butonlar, form alanları ve diğer bileşenler ortak bir sistem hâline getirilebilir.

Bu sistem sayesinde:

• Tasarım tutarlılığı korunur.
• Tekrar eden çalışmalar azalır.
• Yeni ekranlar daha hızlı hazırlanır.
• Tasarım ve yazılım ekipleri aynı kuralları kullanır.
• Marka kimliği daha düzenli uygulanır.

Figma Kimler Tarafından Kullanılır?

Figma farklı görevlerdeki kişiler tarafından kullanılabilir.

Kullanıcı	Figma’yı kullanma amacı
UI tasarımcısı	Arayüz ekranları hazırlamak
UX tasarımcısı	Kullanıcı akışını ve deneyimini planlamak
Web tasarımcı	İnternet sitesi tasarımı oluşturmak
Mobil uygulama tasarımcısı	Telefon ve tablet ekranları tasarlamak
Yazılım geliştirici	Ölçü, renk, boşluk ve varlıkları incelemek
Proje yöneticisi	Tasarım sürecini kontrol etmek
Ürün yöneticisi	Ürün akışlarını ve özellikleri planlamak
Grafik tasarımcı	Dijital görseller ve bileşenler hazırlamak
Pazarlama ekibi	Kampanya ve landing page tasarlamak
Müşteri	Tasarımı incelemek ve geri bildirim vermek

Figma’nın Avantajları Nelerdir?

Ortak Çalışmayı Destekler

Birden fazla kişi aynı dosya üzerinde çalışabilir. Bu özellik ekiplerin farklı dosya sürümleri arasında kaybolmasını azaltabilir.

Tarayıcı Üzerinden Kullanılabilir

Figma projelerine internet bağlantısı bulunan farklı cihazlardan erişilebilir. Masaüstü uygulaması da çalışma sürecini destekleyebilir.

Dosya Paylaşımı Kolaydır

Tasarım dosyaları bağlantı üzerinden paylaşılabilir. Projeyi inceleyecek kişiye görüntüleme, yorum veya düzenleme yetkisi verilebilir.

Prototip Hazırlanabilir

Tasarımlar birbirine bağlanarak gerçek uygulamaya benzeyen tıklanabilir örnekler oluşturulabilir.

Component Sistemi Bulunur

Buton, kart, menü ve form gibi tekrar eden öğeler bileşen hâline getirilebilir.

Responsive Tasarımı Destekler

Auto layout, constraint ve ölçülendirme özellikleriyle farklı ekran genişliklerine uyum sağlayan tasarımlar hazırlanabilir.

Farklı cihazlara uygun internet sitesi yapısı hakkında responsive web tasarım içeriğinden bilgi alınabilir.

Tasarım ve Yazılım Arasındaki İletişimi Kolaylaştırır

Yazılım geliştiriciler tasarım içerisindeki:

• Ölçüleri
• Renk kodlarını
• Yazı özelliklerini
• Boşlukları
• Görselleri
• İkonları

inceleyebilir.

Figma’nın Dezavantajları Nelerdir?

Figma birçok avantaj sunsa da her proje ve kullanıcı için kusursuz değildir.

İnternet Bağlantısına Bağımlılık Oluşabilir

Bulut tabanlı çalışma yapısı nedeniyle bağlantı sorunları ekip çalışmasını etkileyebilir.

Büyük Dosyalarda Performans Sorunu Yaşanabilir

Çok sayıda ekran, yüksek çözünürlüklü görsel ve karmaşık bileşen içeren projeler yavaşlayabilir.

Dosya Düzeni Karmaşıklaşabilir

Katmanlar, sayfalar ve bileşenler düzenli adlandırılmazsa proje anlaşılması zor bir hâle gelebilir.

Öğrenme Süreci Gerekebilir

Temel şekiller kolayca kullanılabilse de auto layout, component, variant ve responsive tasarım gibi özelliklerin doğru uygulanması pratik gerektirir.

Planlara Göre Bazı Sınırlamalar Bulunabilir

Ekip, proje ve gelişmiş yönetim ihtiyaçlarına göre farklı kullanım seçenekleri gerekebilir. Plan kapsamları zaman içerisinde değişebileceği için hesap oluşturulurken güncel özelliklerin kontrol edilmesi gerekir.

Figma ile Neler Yapılabilir?

Figma’nın kullanım alanları oldukça geniştir.

Wireframe Hazırlama

Wireframe, bir ekranın temel yerleşimini gösteren sade taslaktır.

Wireframe üzerinde:

• Menü
• Başlık
• Görsel alanı
• Buton
• Form
• Ürün kartı
• Alt bilgi
• İçerik bölümleri

gibi öğelerin konumu belirlenir.

Wireframe aşamasında renk ve görsel detaylardan önce sayfanın yapısına odaklanılır.

UI Tasarımı

UI tasarımı, kullanıcının gördüğü görsel arayüzü ifade eder.

UI tasarımında:

• Renkler
• Yazı tipleri
• Butonlar
• Kartlar
• İkonlar
• Formlar
• Menü
• Görseller
• Boşluklar
• Gölgeler

düzenlenir.

UX Planlaması

UX, kullanıcının ürün veya hizmeti kullanırken yaşadığı deneyimi ifade eder.

Figma üzerinden kullanıcı akışları oluşturularak şu sorular cevaplanabilir:

• Kullanıcı istediği ürünü kolayca bulabiliyor mu?
• Üyelik süreci anlaşılır mı?
• Ödeme adımları gereğinden uzun mu?
• Menü yapısı kolay kullanılıyor mu?
• Form alanları yeterince açık mı?
• Kullanıcı hata aldığında ne yapmalı?

Prototipleme

Ekranlar arasında bağlantılar oluşturularak tıklanabilir prototip hazırlanabilir.

Tasarım Sistemi

Büyük projelerde kullanılan ortak tasarım kuralları tek dosyada toplanabilir.

Sosyal Medya ve Reklam Tasarımı

Figma’nın temel grafik özellikleri kullanılarak sosyal medya gönderileri, reklam görselleri ve kampanya şablonları hazırlanabilir. Ancak kapsamlı fotoğraf düzenlemeleri için farklı araçlara ihtiyaç duyulabilir.

Figma Arayüzü Nasıl Kullanılır?

Figma arayüzü genel olarak şu bölümlerden oluşur:

• Dosya ve sayfa alanı
• Katmanlar paneli
• Tasarım alanı
• Araç çubuğu
• Özellikler paneli
• Prototip alanı
• Yorum sistemi
• Paylaşım seçenekleri

Sayfalar

Bir Figma dosyasında farklı çalışma alanları oluşturmak için sayfalar kullanılabilir.

Örnek sayfa düzeni:

• Kapak
• Wireframe
• Masaüstü tasarımlar
• Mobil tasarımlar
• Componentler
• Tasarım sistemi
• Prototip
• Arşiv

Sayfaların düzenli isimlendirilmesi ekip üyelerinin projeyi daha kolay anlamasını sağlar.

Katmanlar

Figma içerisindeki her nesne bir katman olarak görüntülenir.

Katman örnekleri:

• Frame
• Metin
• Görsel
• Buton
• İkon
• Şekil
• Component
• Grup

Katman isimleri açıklayıcı olmalıdır.

Zayıf isimler:

• Rectangle 184
• Group 92
• Frame 58

Daha düzenli isimler:

• Header
• Ana Menü
• Ürün Kartı
• Sepete Ekle Butonu
• İletişim Formu

Frame Nedir?

Frame, tasarım öğelerinin yerleştirildiği temel çalışma alanıdır.

Frame şu amaçlarla kullanılabilir:

• Masaüstü ekranı
• Mobil ekran
• Tablet ekranı
• Menü
• Kart
• Modal pencere
• Component
• Belirli içerik bölümü

Frame, klasik anlamdaki basit gruplamadan daha gelişmiş düzen ve responsive özellikleri sunabilir.

Section Nedir?

Section, tasarım alanındaki frame ve ekranları görsel olarak bir araya getirmek için kullanılabilir.

Örneğin:

• Üyelik akışı
• Satın alma süreci
• Yönetim paneli
• Mobil ekranlar
• Onaylanmış tasarımlar

ayrı bölümler hâlinde gösterilebilir.

Shape Araçları

Figma’da temel şekiller kullanılabilir:

• Dikdörtgen
• Çember
• Çizgi
• Ok
• Çokgen
• Yıldız

Bu şekiller:

• Buton
• Kart
• Arka plan
• İkon
• Ayırıcı
• Görsel alanı

oluşturmak için kullanılabilir.

Metin Aracı

Metin aracıyla:

• Başlık
• Paragraf
• Buton metni
• Menü öğesi
• Form etiketi
• Açıklama
• Uyarı mesajı

eklenebilir.

Metinlerde:

• Yazı tipi
• Boyut
• Kalınlık
• Satır yüksekliği
• Harf aralığı
• Hizalama
• Renk

ayarlanabilir.

Figma Nasıl Kullanılır?

Figma kullanmaya başlamak için genel olarak aşağıdaki adımlar uygulanabilir.

Hesap ve Proje Oluşturma

İlk aşamada kullanıcı hesabı oluşturulur ve yeni bir tasarım dosyası açılır.

Dosya adı proje amacını açıklamalıdır.

Örnek:

Soft Ajans Kurumsal Web Sitesi Tasarımı

“Yeni Dosya” veya “Tasarım 1” gibi isimler ekip içerisinde karışıklığa neden olabilir.

Tasarım Boyutunu Belirleme

Tasarımın hangi cihaz için hazırlanacağı belirlenir.

Örnek başlangıç genişlikleri:

Tasarım türü	Kullanılabilecek yaklaşım
Masaüstü web	Geniş ekran frame’i
Tablet	Orta genişlikte frame
Mobil	Telefon frame’i
Mobil uygulama	Hedef cihaz oranı
Dashboard	Geniş çalışma alanı
Sosyal medya	Platforma uygun ölçü

Sabit ölçülere körü körüne bağlı kalmak yerine tasarımın farklı ekranlarda nasıl davranacağı planlanmalıdır.

Grid Sistemi Oluşturma

Grid, öğelerin sayfa üzerinde hizalı ve düzenli yerleştirilmesini sağlar.

Web tasarımında yaygın olarak:

• Sütun sistemi
• Dış boşluk
• Sütun aralığı
• İçerik genişliği

belirlenir.

Grid sistemi sayesinde:

• Kartlar hizalanır.
• Metin alanları düzenli görünür.
• Tasarım bütünlüğü oluşur.
• Responsive dönüşüm kolaylaşır.
• Yazılım ekibine daha düzenli teslim yapılır.

Renk Paleti Oluşturma

Projenin marka kimliğine uygun renkler belirlenmelidir.

Renk grupları:

• Ana marka rengi
• İkincil renk
• Arka plan renkleri
• Metin renkleri
• Başarı rengi
• Uyarı rengi
• Hata rengi
• Pasif durum rengi

olabilir.

Renk isimleri yalnızca görsel tanımla değil, kullanım amacıyla adlandırılabilir.

Örnek:

• Primary
• Secondary
• Text Primary
• Text Secondary
• Surface
• Success
• Warning
• Error

Marka görsellerinin tutarlı kullanımı için logo ve kurumsal kimlik tasarımının önemi içeriği incelenebilir.

Tipografi Sistemi Oluşturma

Tasarımda kullanılacak yazı stilleri başlangıçta belirlenmelidir.

Örnek tipografi yapısı:

Metin türü	Kullanım alanı
Display	Büyük tanıtım başlığı
H1	Sayfa ana başlığı
H2	Bölüm başlığı
H3	Alt başlık
Body Large	Öne çıkan paragraf
Body	Standart metin
Caption	Küçük açıklama
Button	Buton metni

Her ekranda rastgele yazı boyutu kullanmak tasarım bütünlüğünü bozar.

Bileşenleri Hazırlama

Tekrar kullanılan öğeler component hâline getirilebilir.

Component örnekleri:

• Buton
• Menü
• Ürün kartı
• Blog kartı
• Form alanı
• Checkbox
• Radio button
• Sekme
• Modal
• Bildirim
• Profil alanı
• Sayfalama

Component Nedir?

Component, tasarım içerisinde tekrar kullanılabilen ana öğedir.

Örneğin sitedeki bütün “Teklif Al” butonları aynı component üzerinden oluşturulabilir.

Ana componentte yapılan değişiklik, ilgili örneklere yansıtılabilir. Böylece bütün butonları tek tek düzenlemek gerekmez.

Instance Nedir?

Instance, ana componentin tasarım içerisinde kullanılan kopyasıdır.

Bir buton componentinin farklı ekranlarda kullanılan örnekleri instance olarak değerlendirilir.

Instance üzerinde:

• Metin
• İkon
• Bazı görsel özellikler

değiştirilebilir. Temel yapı ise ana componente bağlı kalır.

Variant Nedir?

Variant, aynı bileşenin farklı durumlarını tek sistem altında toplamaya yardımcı olur.

Buton variantları:

• Primary
• Secondary
• Large
• Small
• Normal
• Hover
• Disabled
• Loading

şeklinde hazırlanabilir.

Buton Variant Örneği

Özellik	Seçenekler
Tür	Primary, Secondary
Boyut	Small, Medium, Large
Durum	Default, Hover, Disabled
İkon	Var, Yok

Bu sistem, onlarca farklı buton componenti oluşturmak yerine daha düzenli bir yapı sağlar.

Auto Layout Nedir?

Auto layout, tasarım öğelerinin içerik ve boşluklara göre otomatik biçimde düzenlenmesini sağlayan özelliktir.

Auto layout ile:

• Buton metne göre genişleyebilir.
• Kart içerisindeki öğeler düzenli sıralanabilir.
• Menü elemanları otomatik yerleşebilir.
• Liste öğeleri çoğaldığında alan genişleyebilir.
• Mobil ve masaüstü düzenleri daha kolay hazırlanabilir.

Auto layout kullanımında:

• Yön
• İç boşluk
• Öğeler arası boşluk
• Hizalama
• Sabit veya esnek genişlik
• İçeriğe göre büyüme

gibi ayarlar yapılabilir.

Auto Layout Öncesi ve Sonrası

Kriter	Auto layout kullanılmadan	Auto layout kullanılarak
Metin değişikliği	Elle düzenleme gerekir	Alan otomatik büyüyebilir
Kart yüksekliği	Sabit kalabilir	İçeriğe göre değişebilir
Boşluklar	Tek tek ayarlanır	Sistemli uygulanır
Responsive tasarım	Daha zor	Daha kontrollü
Tekrar kullanım	Sınırlı	Daha düzenli
Güncelleme	Zaman alabilir	Daha hızlı yapılabilir

Constraints Nedir?

Constraints, bir öğenin bağlı bulunduğu frame boyutu değiştiğinde nasıl davranacağını belirler.

Örnekler:

• Sola sabit
• Sağa sabit
• Ortalanmış
• Sol ve sağa bağlı
• Üste sabit
• Alta sabit
• Ölçeklenebilir

Örneğin bir menü logosu sol tarafa, iletişim butonu sağ tarafa sabitlenebilir.

Responsive Tasarım Figma’da Nasıl Yapılır?

Responsive tasarım, tek bir masaüstü ekranını küçültmek değildir. İçeriğin farklı ekranlarda yeniden düzenlenmesi gerekir.

Responsive çalışma sırasında:

• Masaüstü ekranı hazırlanır.
• Tablet düzeni kontrol edilir.
• Mobil düzen oluşturulur.
• Menü mobil yapıya dönüştürülür.
• Çok sütunlu alanlar tek sütuna indirilebilir.
• Yazı boyutları yeniden değerlendirilir.
• Görsel oranları kontrol edilir.
• Butonların dokunma alanları büyütülür.
• Formlar mobil cihazda test edilir.

Masaüstü ve Mobil Tasarım Karşılaştırması

Alan	Masaüstü	Mobil
Menü	Yatay menü	Açılır mobil menü
Sütun	İki veya daha fazla	Genellikle tek sütun
Buton	İçerik genişliğinde olabilir	Daha geniş kullanılabilir
Görseller	Yan yana gösterilebilir	Alt alta sıralanabilir
Form	Çok sütunlu olabilir	Tek sütun tercih edilebilir
Boşluk	Daha geniş olabilir	Kontrollü azaltılabilir
Yazı boyutu	Büyük başlıklar	Ekrana uygun başlıklar

Figma’da Prototip Nasıl Yapılır?

Prototip hazırlamak için ekranlar arasındaki geçişler tanımlanır.

Örnek kullanıcı akışı:

• Ana sayfa açılır.
• Kullanıcı “Ürünleri İncele” butonuna tıklar.
• Kategori sayfasına geçer.
• Ürünü seçer.
• Ürün detay sayfasını açar.
• Sepete ekler.
• Ödeme sayfasına ilerler.
• Sipariş onay ekranını görür.

Prototipte Kullanılabilecek Etkileşimler

• Tıklama
• Sürükleme
• Üzerine gelme
• Belirli süre sonra geçiş
• Ekran açıldığında işlem
• Klavye veya tuş etkileşimi

Geçiş Türleri

• Anında geçiş
• Yumuşak geçiş
• Kaydırma
• Üst pencere açılması
• Akıllı animasyon
• Geri dönüş

Animasyonlar yalnızca görsel etki amacıyla değil, kullanıcının gerçekleşen işlemi anlamasına yardımcı olmak için kullanılmalıdır.

Overlay Nedir?

Overlay, mevcut ekranın üzerinde açılan pencere veya paneldir.

Overlay örnekleri:

• Giriş penceresi
• Çerez bildirimi
• Sepet paneli
• Mobil menü
• Filtre ekranı
• Onay kutusu
• Hata mesajı

Figma ile Landing Page Tasarımı

Landing page, belirli bir kampanya veya dönüşüm hedefi için hazırlanan sayfadır.

Figma’da landing page tasarlanırken şu bölümler oluşturulabilir:

• Güçlü ana başlık
• Kısa değer önerisi
• Ürün veya hizmet görseli
• Temel faydalar
• Referanslar
• Müşteri yorumları
• Fiyat veya paketler
• Sık sorulan sorular
• Form
• CTA butonu

Dönüşüm odaklı sayfaların yapısı için landing page rehberi incelenebilir.

Figma ile Web Sitesi Tasarım Süreci

Web sitesi tasarım süreci aşağıdaki şekilde ilerleyebilir:

Aşama	Yapılan çalışma
İhtiyaç analizi	Proje hedeflerini belirlemek
Hedef kitle	Kullanıcı ihtiyaçlarını anlamak
Site haritası	Sayfa yapısını planlamak
Wireframe	Temel yerleşimleri oluşturmak
Görsel tasarım	Renk, yazı ve görselleri uygulamak
Component	Tekrar kullanılabilir öğeler hazırlamak
Responsive	Mobil ve tablet tasarımları oluşturmak
Prototip	Kullanıcı akışlarını test etmek
Onay	Müşteri ve ekip geri bildirimi almak
Teslim	Yazılım ekibine düzenli dosya sunmak

Kurumsal sitelerde tasarımın işletme açısından önemi için kurumsal web tasarım neden şirketler için hayati önem taşır? içeriği incelenebilir.

Figma’da Tasarım Sistemi Nasıl Oluşturulur?

Tasarım sistemi, bir dijital ürünün ortak görsel ve kullanım kurallarını içerir.

Tasarım sisteminde şu alanlar bulunabilir:

• Renkler
• Tipografi
• Boşluk sistemi
• Grid
• İkonlar
• Butonlar
• Formlar
• Kartlar
• Menü
• Bildirimler
• Tablolar
• Modal pencereler
• Mobil bileşenler

Boşluk Sistemi Örneği

Tasarımda rastgele boşluklar yerine belirli bir sistem kullanılabilir.

Örnek değerler:

• 4 piksel
• 8 piksel
• 12 piksel
• 16 piksel
• 24 piksel
• 32 piksel
• 48 piksel
• 64 piksel

Bu değerler proje ihtiyacına göre düzenlenebilir.

Figma Dosya Düzeni Nasıl Olmalıdır?

Düzenli dosya yapısı ekip çalışmasını kolaylaştırır.

Örnek Sayfa Yapısı

• 00 – Kapak
• 01 – Proje Notları
• 02 – Wireframe
• 03 – Masaüstü
• 04 – Tablet
• 05 – Mobil
• 06 – Componentler
• 07 – Tasarım Sistemi
• 08 – Prototip
• 09 – Arşiv

Frame İsimlendirme Örneği

Zayıf isim:

Frame 125

Daha iyi isim:

Web / Ana Sayfa / Masaüstü

Mobil ekran:

Mobil / Ürün Detay / Varsayılan

Figma’da Yorum Nasıl Yapılır?

Yorum sistemi ekip üyelerinin belirli bir tasarım alanına geri bildirim bırakmasını sağlar.

İyi yorum örneği:

Mobil görünümde bu butonun genişliğini ekran boyunca kullanabilir miyiz? Uzun metinlerde taşma oluşabilir.

Zayıf yorum örneği:

Olmamış.

Yorumlar:

• Açık
• Uygulanabilir
• Belirli bir alanla ilgili
• Gerekçeli
• Saygılı

olmalıdır.

Figma Dosyası Yazılımcıya Nasıl Teslim Edilir?

Tasarım tamamlandığında yazılım ekibinin ihtiyaç duyacağı bilgiler düzenlenmelidir.

Teslim öncesinde:

• Frame isimleri düzenlenmeli
• Katmanlar temizlenmeli
• Componentler hazırlanmalı
• Renk ve metin stilleri tanımlanmalı
• Mobil tasarımlar eklenmeli
• Hover ve hata durumları gösterilmeli
• Görseller dışa aktarılabilir olmalı
• İkonlar düzenlenmeli
• Prototip bağlantıları kontrol edilmeli
• Geliştirici notları eklenmelidir

Tasarımda Gösterilmesi Gereken Durumlar

Yalnızca normal ekran tasarımının hazırlanması yeterli olmayabilir.

Gösterilmesi gereken durumlar:

• Hover
• Active
• Disabled
• Loading
• Empty state
• Error
• Success
• Form doğrulama
• Stok yok
• Sonuç bulunamadı
• Bağlantı hatası

Yazılım geliştiricinin bu durumları tahmin etmesi beklenmemelidir.

Figma’dan Görsel Nasıl Dışa Aktarılır?

Figma’daki öğeler farklı formatlarda dışa aktarılabilir.

Format	Kullanım alanı
PNG	Şeffaflık veya yüksek kaliteli görsel
JPG	Fotoğraf ve küçük dosya ihtiyacı
SVG	İkon, logo ve vektörel öğeler
PDF	Sunum veya doküman paylaşımı

İkon ve logolarda vektörel formatlar tercih edilebilir. Fotoğrafların internet sitesine eklenmeden önce ayrıca sıkıştırılması gerekebilir.

Figma, Canva ve Photoshop Karşılaştırması

Kriter	Figma	Canva	Photoshop
Temel kullanım	Arayüz ve ürün tasarımı	Hızlı şablon tasarımları	Fotoğraf ve piksel düzenleme
Web arayüzü	Güçlü	Sınırlı olabilir	Temel kullanım amacı değildir
Prototip	Bulunur	Temel düzeydedir	Bulunmaz
Component	Gelişmiş	Sınırlı	Arayüz sistemi odaklı değildir
Ekip çalışması	Güçlü	Güçlü	Çalışma modeline göre değişebilir
Fotoğraf düzenleme	Sınırlı	Temel	Gelişmiş
Responsive düzen	Auto layout ile desteklenir	Sınırlı	Manuel
Kullanım kolaylığı	Orta seviye	Başlangıç için kolay	Öğrenme süreci gerektirir

Hangi Araç Ne Zaman Kullanılmalı?

• Figma: Web sitesi, mobil uygulama ve yazılım arayüzü tasarımında
• Canva: Hızlı sosyal medya, afiş ve şablon çalışmalarında
• Photoshop: Fotoğraf düzenleme ve piksel tabanlı görsel işlemlerde

Bu araçlar birbirinin tamamen alternatifi değildir. Aynı proje içerisinde farklı ihtiyaçlar için birlikte kullanılabilir.

Figma ve Sketch Karşılaştırması

Kriter	Figma	Sketch
Kullanım yapısı	Bulut ve ortak çalışma odaklı	Masaüstü tasarım odaklı
İşletim sistemi	Farklı sistemlerden erişim sağlanabilir	Temel olarak macOS odaklı
Ortak çalışma	Güçlü	Desteklenebilir
Prototip	Bulunur	Bulunur
Component	Bulunur	Bulunur
Dosya paylaşımı	Bağlantı üzerinden kolay	Kullanılan çalışma yapısına bağlı
Ekip tercihi	Dağıtık ekipler için uygundur	Apple odaklı ekiplerde tercih edilebilir

Araç seçimi ekibin işletim sistemi, proje yapısı, çalışma alışkanlığı ve teslim sürecine göre yapılmalıdır.

Figma Kullanırken Yapılan Hatalar

Her Öğeyi Grup İçerisine Almak

Frame ve auto layout kullanılmadığında responsive davranış oluşturmak zorlaşabilir.

Katmanları İsimlendirmemek

Dosyanın başka tasarımcı ve yazılımcılar tarafından anlaşılmasını zorlaştırır.

Component Kullanmamak

Aynı buton veya kart onlarca kez ayrı ayrı oluşturulur ve güncelleme süresi uzar.

Bütün Ekranlarda Farklı Renk Kullanmak

Tasarım sistemi bozulur ve marka bütünlüğü zayıflar.

Yalnızca Masaüstü Tasarlamak

Mobil kullanıcıların ihtiyaçları göz ardı edilir.

Durum Ekranlarını Hazırlamamak

Hata, yüklenme ve boş sonuç gibi durumlar yazılım ekibine bırakılır.

Gerçek İçerik Kullanmamak

Sürekli kısa örnek metin kullanılması, gerçek içerik eklendiğinde taşma sorunları oluşturabilir.

Grid ve Boşluk Sistemini Kullanmamak

Öğeler arasında tutarsız hizalama ve boşluklar oluşur.

Çok Büyük Görseller Kullanmak

Dosya performansı düşebilir ve teslim süreci zorlaşabilir.

Onaylanmamış Tasarımları Karıştırmak

Güncel ekranların hangileri olduğu anlaşılmaz.

İyi ve Kötü Figma Dosyası Karşılaştırması

Kötü dosya yapısı	İyi dosya yapısı
Frame isimleri belirsiz	Açıklayıcı ekran isimleri
Katmanlar karışık	Düzenli katman yapısı
Component kullanılmıyor	Tekrar eden öğeler component
Rastgele renkler	Tanımlı renk stilleri
Mobil ekran yok	Masaüstü ve mobil birlikte
Tasarım durumları eksik	Hover, hata ve yüklenme durumları mevcut
Görseller çok büyük	Optimize ve düzenli görseller
Prototip bağlantıları hatalı	Test edilmiş kullanıcı akışları
Eski ekranlar karışık	Arşiv alanı bulunuyor
Yazılımcı notları yok	Teslim açıklamaları mevcut

Figma Öğrenmek Zor mu?

Figma’nın temel araçları kısa sürede öğrenilebilir. Ancak profesyonel arayüz tasarımı yalnızca program kullanmayı bilmekten ibaret değildir.

Öğrenilmesi gereken diğer konular:

• Görsel hiyerarşi
• Tipografi
• Renk teorisi
• Grid sistemi
• Kullanıcı deneyimi
• Responsive tasarım
• Erişilebilirlik
• Tasarım sistemi
• Web teknolojilerinin temelleri
• Mobil uygulama alışkanlıkları

Aracın butonlarını bilmek iyi tasarım hazırlamak için yeterli değildir.

Figma Öğrenme Planı

Dönem	Öğrenilecek konular	Uygulama
Başlangıç	Frame, metin, şekil ve katmanlar	Basit sayfa tasarımı
Temel seviye	Grid, renk ve tipografi	Kurumsal ana sayfa
Orta seviye	Component, variant ve auto layout	Tasarım sistemi
İleri seviye	Responsive yapı ve prototip	Web veya uygulama projesi
Teslim	Dosya düzeni ve geliştirici aktarımı	Gerçek proje teslimi

Başlangıç İçin Figma Projesi Örneği

Yeni başlayan bir kullanıcı şu projeyi hazırlayabilir:

Kahve Dükkânı İnternet Sitesi

Hazırlanacak ekranlar:

• Ana sayfa
• Menü
• Ürün detay
• Hakkımızda
• Şubeler
• İletişim
• Mobil ana sayfa
• Mobil menü

Componentler:

• Buton
• Ürün kartı
• Menü öğesi
• Form alanı
• Başlık
• Alt bilgi

Prototip akışı:

• Ana sayfa
• Menü sayfası
• Ürün detayı
• Sipariş butonu
• İletişim

Figma Kontrol Listesi

Kontrol alanı	Yapılması gereken
Dosya adı	Proje adıyla açıklayıcı olmalı
Sayfalar	Tasarım türlerine göre ayrılmalı
Frame isimleri	Ekran ve cihaz bilgisi içermeli
Katmanlar	Düzenli adlandırılmalı
Grid	Hizalama sistemi kurulmalı
Renkler	Ortak stil olarak tanımlanmalı
Tipografi	Başlık ve metin stilleri oluşturulmalı
Component	Tekrar eden öğeler bileşen yapılmalı
Variant	Durum ve boyutlar birleştirilmeli
Auto layout	Dinamik öğelerde kullanılmalı
Responsive	Masaüstü, tablet ve mobil düşünülmeli
Prototip	Temel kullanıcı akışları bağlanmalı
Hata durumları	Error, empty ve loading tasarlanmalı
Yorumlar	Açık ve uygulanabilir olmalı
Görseller	Düzenli ve optimize kullanılmalı
Teslim	Yazılımcı için dosya temizlenmeli
Arşiv	Eski tasarımlar ayrı tutulmalı

Figma Hakkında Sıkça Sorulan Sorular

Figma nedir?

Figma; web sitesi, mobil uygulama ve dijital ürün arayüzlerinin tasarlanması, prototiplenmesi ve ekiplerle paylaşılması için kullanılan bir tasarım aracıdır.

Figma ne işe yarar?

Wireframe, kullanıcı arayüzü, prototip, responsive ekran ve tasarım sistemi hazırlamaya yardımcı olur.

Figma nasıl kullanılır?

Yeni dosya açılır, frame oluşturulur, grid ve tasarım kuralları belirlenir, ekranlar hazırlanır, componentler oluşturulur ve prototip bağlantıları eklenir.

Figma ücretsiz mi?

Farklı kullanıcı ve ekip ihtiyaçlarına göre plan seçenekleri bulunabilir. Ücretsiz başlangıç seçeneklerinin kapsamı ve ücretli özellikler zaman içerisinde değişebilir.

Figma bilgisayara indirilir mi?

Tarayıcı üzerinden kullanılabilir. Kullanıcının çalışma tercihine göre masaüstü uygulaması da tercih edilebilir.

Figma ile web sitesi yapılır mı?

Figma ile web sitesinin tasarımı ve prototipi hazırlanır. Çalışan internet sitesi oluşturmak için tasarımın HTML, CSS, JavaScript veya bir içerik yönetim sistemiyle kodlanması gerekir.

Figma kod yazar mı?

Figma doğrudan bütün projeyi çalışan yazılıma dönüştüren bir kodlama aracı değildir. Yazılımcılar tasarımdaki ölçü, renk ve stillerden yararlanabilir.

Figma ile mobil uygulama yapılır mı?

Mobil uygulamanın arayüzü ve prototipi hazırlanabilir. Gerçek uygulamanın çalışması için yazılım geliştirme gerekir.

Frame nedir?

Frame, ekranların ve tasarım öğelerinin yerleştirildiği temel çalışma alanıdır.

Component nedir?

Component, buton veya kart gibi tekrar kullanılabilen tasarım öğesidir.

Instance nedir?

Instance, ana componentin tasarımda kullanılan bağlı kopyasıdır.

Variant nedir?

Variant, bir componentin farklı tür, boyut ve durumlarını ortak bir sistem içerisinde düzenlemeye yardımcı olur.

Auto layout nedir?

Auto layout, tasarım öğelerinin içerik ve boşluklara göre otomatik biçimde düzenlenmesini sağlar.

Figma ile responsive tasarım yapılır mı?

Evet. Auto layout, constraint ve farklı frame boyutları kullanılarak responsive tasarımlar hazırlanabilir.

Figma prototip nedir?

Ekranların birbirine bağlanarak tıklanabilir ve test edilebilir bir ürün örneğine dönüştürülmesidir.

Figma ile logo yapılır mı?

Temel ve vektörel logo çalışmaları hazırlanabilir. Kapsamlı marka tasarımı için profesyonel vektörel tasarım araçları da kullanılabilir.

Figma ile sosyal medya tasarımı yapılır mı?

Evet. Sosyal medya gönderileri ve reklam şablonları hazırlanabilir. Ancak Figma’nın temel gücü dijital arayüz tasarımıdır.

Figma ile Canva arasındaki fark nedir?

Figma arayüz, component ve prototip tasarımına; Canva ise şablon tabanlı hızlı grafik üretimine daha fazla odaklanır.

Figma ile Photoshop arasındaki fark nedir?

Figma web ve uygulama arayüzleri için, Photoshop ise fotoğraf ve piksel tabanlı görsel düzenleme için daha uygundur.

Figma öğrenmek ne kadar sürer?

Temel araçlar kısa sürede öğrenilebilir. Profesyonel tasarım sistemi ve kullanıcı deneyimi hazırlamak düzenli uygulama gerektirir.

Figma öğrenmek için kod bilmek gerekir mi?

Hayır. Kod bilgisi zorunlu değildir. Ancak web teknolojilerinin temelini bilmek uygulanabilir tasarımlar hazırlamayı kolaylaştırır.

Figma dosyası yazılımcıya nasıl gönderilir?

Dosya paylaşım yetkisi verilerek yazılımcının ölçü, renk, tipografi ve görsel varlıkları incelemesi sağlanabilir.

Figma’da mobil tasarım gerekli mi?

Web sitesi veya uygulama mobil cihazlarda kullanılacaksa mobil ekranların ayrıca tasarlanması gerekir.

Figma’da tasarım sistemi gerekli mi?

Küçük projelerde basit bir stil sistemi yeterli olabilir. Büyük ve sürekli gelişen projelerde tasarım sistemi önemli ölçüde zaman kazandırır.

Figma dosyası neden yavaşlar?

Çok sayıda ekran, karmaşık bileşenler, büyük görseller ve düzensiz dosya yapısı performansı etkileyebilir.

Figma ile Tasarımlarınızı Planlı ve Uygulanabilir Hâle Getirin

Figma, web sitesi, mobil uygulama ve dijital ürün tasarımlarının görsel olarak hazırlanmasını sağlayan kapsamlı bir arayüz tasarım aracıdır. Wireframe aşamasından yazılım teslimine kadar farklı proje süreçlerinde kullanılabilir.

Başarılı bir Figma çalışması yalnızca güzel ekranlar hazırlamaktan ibaret değildir. Kullanıcıların sayfalar arasında nasıl hareket edeceği, formları nasıl dolduracağı, hata durumlarında ne göreceği ve farklı cihazlarda tasarımın nasıl davranacağı planlanmalıdır.

Frame, component, variant ve auto layout gibi özellikler doğru kullanıldığında tasarım süreci daha düzenli ve ölçeklenebilir hâle gelir. Aynı buton veya kartın onlarca farklı kopyasını hazırlamak yerine ortak bileşenler kullanılabilir.

Tasarım dosyasının düzenli olması ekip çalışması açısından büyük önem taşır. Sayfa, frame ve katman isimleri açık olmalı; eski tasarımlar arşivlenmeli ve onaylanan ekranlar kolayca bulunabilmelidir.

Responsive tasarım yalnızca masaüstü ekranını küçültmek olarak görülmemelidir. Mobil cihazlarda menü, sütun, görsel, buton ve form yapıları kullanıcı alışkanlıklarına göre yeniden düzenlenmelidir.

Prototip özelliği sayesinde yazılım geliştirme başlamadan önce kullanıcı akışları test edilebilir. Eksik sayfalar, karışık menüler veya uzun ödeme süreçleri erken aşamada tespit edilebilir.

Figma tasarım hazırlamayı kolaylaştırsa da profesyonel sonuç için tipografi, renk, hiyerarşi, kullanıcı deneyimi ve erişilebilirlik gibi tasarım ilkelerinin de öğrenilmesi gerekir.

Web sitesi veya dijital ürün tasarımının marka kimliği, kullanıcı deneyimi ve yazılım süreciyle birlikte profesyonel biçimde planlanması için kapsamlı kurumsal web tasarım yaklaşımından yararlanılabilir.