Bir randevu sayfası düşünün: kişi hizmet seçiyor, saati görüyor ve talebini onaylıyor. Figma Design, bu ekranların yerleşimini ve aralarındaki geçişi yazılım geliştirmeden önce denemenizi sağlar. İlk çalışma için bütün bir uygulama çizmeniz gerekmez. Bir randevu özeti ve bir onay ekranı, aracın mantığını öğrenmek için yeterli bir başlangıçtır.
Figma Ne İçin Kullanılır?
Figma Design'ın temel işleri arayüz çizmek, ekran akışlarını denemek, tekrar kullanılan bileşenleri düzenlemek ve tasarım ayrıntılarını ekiple paylaşmaktır. Tasarımcı, geliştirici, ürün yöneticisi ve metin yazarı aynı dosyayı farklı amaçlarla inceleyebilir. Paylaşım yetkisi, plan ve kullanılan ürün; kimin ne yapabileceğini belirler.
Bir ekranın güzel görünmesi, kullanıcının istediğini kolayca yapacağı anlamına gelmez. UX ve UI ayrımını bilmek burada işe yarar: butonun görünüşü arayüz kararıdır; hangi aşamada hangi bilgiyi istediğiniz ise deneyimin daha geniş bir parçasıdır. Figma bu kararları görselleştirir, doğru kararı sizin yerinize garanti etmez.
Figma Design, FigJam ve Figma Make Aynı Şey mi?
Tüm sütunlar için tabloyu yana kaydırın. Klavyeyle tabloya odaklanıp ok tuşlarını kullanabilirsiniz.
| Araç | Öncelikli İş | Başlangıçta Ne İçin Seçilir? |
|---|---|---|
| Figma Design | Arayüz düzenleme ve prototip | Ekranları kendiniz çizip geçişlerini denemek |
| FigJam | Ortak beyaz tahta | Fikirleri, kullanıcı adımlarını ve notları düzenlemek |
| Figma Make | Yapay zeka ile çalışan prototip ve uygulama üretimi | Komut veya mevcut tasarımdan etkileşimli bir deneme geliştirmek |
| Figma Sites | Web sitesi tasarlama ve yayınlama | Desteklenen yayın özellikleriyle bir site oluşturmak |
Figma'nın ürün açıklamaları bu araçları ayrı ele alır. Dolayısıyla “Figma yalnız resim çizer” veya “her Figma dosyası doğrudan çalışan sitedir” ifadelerinin ikisi de eksiktir. Aşağıdaki alıştırma, yapay zeka komutu gerektirmeyen Figma Design akışını kullanır.
Figma Ücretsiz mi?
Evet. 2 Ekim 2026 kontrolünde Starter planında sınırsız kişisel taslak bulunuyor. Takımın tek klasöründe toplam üç Figma Design/Figma Sites dosyası sınırı var; FigJam ve Slides için ayrı üçer dosya sınırı belirtiliyor. Ücretsiz taslaklara davet edilen kişiler görüntüleme yetkisiyle katılabiliyor. Dosyalar arası takım kütüphanesi ve Dev Mode gibi özellikler Starter kapsamına dahil değil.
Öğrenme çalışmanız için önce ücretsiz planın yeterli olup olmadığını değerlendirin. Ücretli kullanımda planın yanında seat (kullanıcı koltuğu) türünü de seçersiniz: Full tasarım araçlarına, Dev geliştirici işlerine, Collab ise ilgili ortak çalışma araçlarına yönelik erişimler sunar. Yalnız inceleme ve yorum için her kişiye Full koltuk vermeniz gerekmez.
Güncel fiyatlandırmayı ülke, vergi, koltuk sayısı ve aylık/yıllık ödeme seçimiyle birlikte kontrol edin. Yıllık taahhüdün aylık karşılığı, aylık ödeme fiyatıyla aynı değildir. Make kullanımı için yapay zeka kredilerini, Sites için yayın hakkını ayrıca inceleyin; ücretsiz hesap bütün ürünlerde sınırsız kullanım anlamına gelmez.
İlk Tasarım: İki Ekranlı Randevu Prototipi
Alıştırmanın hedefi: Kullanıcı önceden belirlenmiş örnek saati görüp “Devam Et” düğmesine bastığında onay ekranını görsün. Saat seçimi, gerçek randevu kaydı, ödeme veya kişisel bilgi toplama yapılmayacak. Ölçüler ve metinler öğrenme örneğidir.
1. Bir Design Dosyası ve İki Frame Oluşturun
Figma hesabınızda yeni bir Design dosyası açın. Frame aracını araç çubuğundan veya F tuşuyla seçin. Yan yana iki üst düzey frame oluşturup “Randevu” ve “Onay” diye adlandırın. Örneğin ikisini de 390 × 844 ölçüsünde kurabilirsiniz; bu ölçü evrensel bir telefon standardı değildir. Frame, metin ve görselleri içinde tutan bir kapsayıcıdır; yalnız kenarlık çizmekten farklıdır.
2. Önce İçeriği Yerleştirin
İlk ekrana bir başlık, örnek hizmet adı, “14.00” saat etiketi ve “Devam Et” düğmesi ekleyin. İkinci ekrana “Talebiniz Alındı” başlığı, seçilen saatin özeti ve geri dönüş bağlantısı koyun. Başlangıçta fotoğraf ve süslemelerle uğraşmayın; kullanıcı hangi seçimi yaptığını ve sonraki adımı anlayabilsin. Metin boyutları ve satır düzeni için tipografi ilkelerinden yararlanın.
3. Düğmeyi Auto Layout ile Kurun
Düğme etiketini seçip Shift + A ile auto layout ekleyin. Dolgu rengini ve iç boşlukları belirleyin; genişliği içeriğe göre büyüten Hug contents ayarını kullanın. Etiketi “Randevu Talebini Gönder” olarak uzatın. Yazı kutunun dışına taşıyorsa boyutlandırma ve boşluk ayarlarını yeniden inceleyin. Auto layout içerik değiştiğinde yerleşimi düzenler; canlı sitenin mobil uyumunu otomatik olarak tamamlamaz.
4. Düğmeden Onay Ekranına Bağlantı Kurun
Prototype sekmesinde düğmeyi seçin ve bağlantısını “Onay” frame'ine taşıyın. Tetikleyiciyi On click, eylemi Navigate to olarak ayarlayın. Hedef, ana tuvalde duran ikinci frame olmalı. İlk denemede basit bir geçiş yeterlidir. Figma'nın prototip belgesi başlangıç noktası, hedef ve etkileşim ayrımını açıklar.
5. Akışı Bir Başkasına Denetin
Onay ekranındaki geri dönüş bağlantısını da aynı yöntemle “Randevu” frame'ine bağlayın. Önizlemeyi “Randevu” ekranından başlatıp gidiş ve dönüşü kontrol edin. Ardından bir kişiden, nereye basacağını söylemeden, gösterilen saat için örnek talebi tamamlamasını isteyin. Hangi öğeye yöneldiğini, takıldığı noktayı ve kullandığı ifadeyi kaydedin; yalnız “beğendin mi?” sorusuyla yetinmeyin.
Component ve Kütüphane Ne İşe Yarar?
Aynı düğmeyi birçok ekranda kullanacaksanız bir component oluşturup bağlı örneklerini (instance) kullanabilirsiniz. Ana bileşen ortak özellikleri yönetir; örneklerde yapılan yerel değişiklikler ve koparılmış bağlantılar sonucu etkileyebilir. Her kopyanın otomatik olarak bileşen örneği olduğunu varsaymayın.
Dosyalar arasında paylaşım için yayınlanan kütüphaneler kullanılır. Ana dosyadaki değişikliğin diğer dosyalara ulaşması, kütüphane güncellemesinin yayınlanması ve ilgili dosyada uygulanmasıyla ilgilidir. “Bir düğmeyi değiştirdim, bütün projeler kendiliğinden güncellendi” varsayımıyla teslim yapmayın.
Figma mı Canva mı, Photoshop mu?
Ekran durumları, bileşenler ve tıklanabilir akışlar üzerinde çalışacaksanız Figma Design'ı değerlendirin. Hazır şablonlardan sosyal medya görseli veya sunum üretmek öncelikliyse Canva'nın kullanım alanlarına bakın. Ayrıntılı fotoğraf rötuşunda ise bir piksel düzenleyicisinin araçlarına ihtiyaç duyabilirsiniz. Bir ekibin farklı işler için birden fazla araç kullanması olağandır; Figma kullanmak bütün tasarım işlerinde zorunluluk değildir.
Geliştiriciye Ne Teslim Edilir?
Yalnız ekran görüntüsü yerine adlandırılmış ekranlar, çalışan prototip bağlantısı, bileşen durumları ve kullanım notları hazırlayın. Boş liste, hata, yüklenme ve uzun metin durumlarını belirtin. Design prototipinde bir düğmenin çalışması; kimlik doğrulama, veri kaydı, erişilebilirlik ve güvenliğin tamamlandığını göstermez. Dev Mode tasarımı incelemeyi destekler; ürünün geliştirilmesi ve test edilmesi ayrıca gerekir.
Statik bir çıktı gerekiyorsa ilgili frame veya nesneyi seçip Export ayarlarını kullanın. PNG, JPG, SVG ve PDF farklı teslim ihtiyaçlarına yöneliktir. Özellikle ikon ile fotoğrafın vektör ve raster yapısını karıştırmayın; her şeyi dev boyutlu PNG olarak göndermek gerekmez.
İlk alıştırmayı bitirdiğinizde elinizde iki anlaşılır ekran, çalışan bir geçiş ve gözleme dayalı bir düzeltme listesi olsun. Tasarım sürecindeki araştırma, deneme ve revize mantığını bu küçük çalışmada kurmak, çok sayıda aracı ezberlemekten daha somut bir başlangıç sağlar.
