UI/UX Tasarım Programları: Hangi İş İçin Hangi Araç?

Kısa cevap: UI/UX tasarım programları tek bir "en doğru" uygulamadan değil, projenin aşamasına göre seçilen bir araç setinden oluşur; Ekim 2026 itibarıyla arayüz ve prototipte Figma yaygın ortak dosya olarak öne çıkarken araştırma, beyaz tahta, ileri prototip ve test için ayrı araçlar kullanılır.

Ben Selçuk Aker; Marmara Üniversitesi Güzel Sanatlar Fakültesi Grafik Tasarım mezunuyum ve 19 yılı aşkın süredir marka, basılı iş ve dijital arayüz tasarımı yapıyorum. Öğrencilerden de işverenlerden de en sık gelen sorulardan biri "Hangi programı öğrenmeliyim?" ya da "Tasarımcı hangi programda çalışmalı?" oluyor. Bu rehberde araçları marka listesi olarak değil, işin hangi adımında hangi ihtiyacı karşıladıklarına göre anlatıyorum. Ürünlerin plan, fiyat ve özellik bilgileri sık değiştiği için her araç için üreticinin kendi sayfasını kontrol etmenizi öneririm; aşağıdaki durum bilgileri Ekim 2026 itibarıyla yazılmıştır.

Araç seçimi aşamaya göre yapılır

Bir UI/UX projesi araştırmadan geliştirici devrine kadar farklı işler içerir. Her işte ihtiyaç başka olduğu için tek bir programın her işte aynı ölçüde güçlü olmasını beklemek gerçekçi değildir. Önce aşamayı, sonra ihtiyacı, en son aracı seçmek daha sağlıklı bir yoldur.

Bu tablo bir zorunluluk listesi değildir. Küçük bir projede araştırma notları bir belgeye, akışlar arayüz dosyasının bir sayfasına sığabilir. Önemli olan her aşamanın çıktısının kaybolmaması ve ekipteki herkesin aynı dosyaya ulaşabilmesidir.

Figma: arayüz ve prototipte ortak dosya

Figma tarayıcıda ve masaüstü uygulamasında çalışan, aynı dosya üzerinde birden çok kişinin eş zamanlı çalışabildiği bir arayüz tasarım aracıdır. Yaygınlaşmasının pratik nedeni, tasarımcı, ürün yöneticisi ve geliştiricinin aynı bağlantıyı açıp yorum bırakabilmesidir. Dosya gönderip sürüm karıştırma sorunu büyük ölçüde ortadan kalkar.

Arayüz tasarımında işe yarayan başlıca özellikler şunlardır:

• Bileşen ve varyant: Bir butonu bir kez tanımlayıp boyut, durum ve tür seçenekleriyle her ekranda aynı kaynaktan kullanmak.
• Auto layout: İçerik uzadığında ya da kısaldığında kutunun kendini ayarlaması. Türkçe metinlerin İngilizceden uzun olduğu durumlarda bu çok işe yarar.
• Değişkenler ve stiller: Renk, aralık ve yazı ölçülerini isimli değerler olarak tutmak; açık ve koyu temayı yönetmek.
• Prototip modu: Ekranları bağlayıp geçiş, kaydırma ve basit etkileşimlerle tıklanabilir akış kurmak.
• Dev Mode: Geliştiricinin ölçü, renk değeri ve bileşen bilgisini inceleyebildiği görünüm.

Ekim 2026 itibarıyla Figma'nın fiyat sayfasında ücretsiz bir başlangıç planı (Starter) ve ücretli planlar yer alıyor; ücretsiz planda kullanım sınırları var. Plan adları ve sınırlar değişebildiği için güncel bilgiyi Figma fiyat sayfasından kontrol edin. Figma'da profesyonel bir ekran sürecinin nasıl ilerlediğini Figma ile UI tasarım süreci yazısında da anlattım.

Alternatif ve tamamlayıcı arayüz araçları

Figma yaygın olsa da tek seçenek değil. Ekibin işletim sistemi, veri saklama tercihi ve bütçesi farklı bir aracı daha mantıklı kılabilir.

• Sketch: macOS için geliştirilen yerel bir masaüstü uygulamasıdır. Ekim 2026 itibarıyla üretici sitesi uygulamanın yalnız macOS'ta çalıştığını belirtiyor; Windows kullanan ekip üyeleri dosyayı düzenleyemez. Mac ağırlıklı ve uzun süredir Sketch kullanan ekiplerde hâlâ tercih ediliyor.
• Penpot: Açık kaynaklı, tarayıcıda çalışan bir tasarım aracıdır. Kendi sunucusuna kurulabilmesi, verisini dışarıda tutmak istemeyen kurumlar için ilgi çekici olabilir.
• Framer: Tasarımı doğrudan yayına alınabilen web sitesine dönüştürmeye odaklanır. Uygulama arayüzünden çok tanıtım sitesi ve açılış sayfası için kullanılır. Bu tür hazır yayın araçlarının ve yapay zekâ destekli site üreticilerinin sınırlarını yapay zekâ ile web sitesi yapılır mı rehberinde ele aldım.
• Adobe XD: Adobe, XD'yi 2023'te bakım moduna aldığını açıkladı. Yeni özellik geliştirilmiyor ve uygulama tek başına yeni kullanıcılara satılmıyor. Ayrıntı aşağıdaki sık sorulan sorular bölümünde.

Bir araç değiştirirken en büyük maliyet genellikle lisans değil, bileşen kütüphanesinin ve eski dosyaların taşınmasıdır. Bu yüzden yeni projeye başlarken "ekip bu dosyayı iki yıl sonra da açabilecek mi?" sorusu sorulmalıdır.

Wireframe ve beyaz tahta araçları

Fikir aşamasında piksel hassasiyeti gerekmez. Bu aşamada amaç ekipçe akışı konuşmak, yapışkan notlarla görevleri sıralamak ve eksik adımları görmektir.

• FigJam: Figma'nın beyaz tahta ürünü. Akış şeması, kullanıcı yolculuğu ve atölye çalışmaları için kullanılır; arayüz dosyasıyla aynı ortamda durması avantajdır.
• Miro: Bağımsız bir dijital beyaz tahta. Tasarım dışı ekiplerin de alışkın olduğu bir araç olduğu için çok paydaşlı atölyelerde sık tercih edilir.
• Kâğıt ve kalem: Hâlâ en hızlı wireframe aracıdır. İlk yerleşim fikirlerini kâğıtta tüketmek, arayüz dosyasında gereksiz ayrıntıya erken girmeyi önler.

Ayrı bir wireframe programı çoğu projede şart değildir; arayüz aracında gri kutularla da wireframe çizilir. Wireframe ile prototipte hangi kararların sınanması gerektiğini wireframe ve prototip kararları yazısında ayrıntılandırdım.

İleri prototip ve hareket

Figma'nın prototip modu çoğu akış için yeterlidir. Ancak bazı durumlarda daha gerçekçi davranış gerekir: metin alanına gerçekten yazı girilmesi, koşula göre farklı ekranın açılması, telefon sensörlerinin kullanılması gibi.

• ProtoPie: Değişken, koşul ve cihaz sensörleriyle çalışan yüksek ayrıntılı prototipler kurmaya odaklanır. Kullanıcı testinde gerçek uygulamaya yakın davranış gereken akışlarda işe yarar.
• After Effects ve Lottie: Hareket tasarımı After Effects gibi araçlarda yapılıp Lottie biçiminde dışa aktarılabilir. Yükleme animasyonu, boş durum illüstrasyonu ya da tanıtım ekranı için kullanılır.

İleri prototip pahalı bir zamandır. Her ekran için değil, belirsizliğin en yüksek olduğu bir iki akış için kurulmalıdır.

Illustrator ve Photoshop'un rolü

Illustrator ve Photoshop arayüz sistemini kurmak için değil, arayüzde kullanılacak varlıkları hazırlamak için kullanılır. İkon setinin vektör çizimi, özel illüstrasyonlar ve logo dosyaları Illustrator'da; ürün fotoğrafı rötuşu, arka plan temizliği ve kampanya görselleri Photoshop'ta hazırlanabilir. Ekranlar, bileşenler ve durumlar ise arayüz aracında kurulur.

Photoshop ile ekran tasarlamak teknik olarak mümkündür ama bileşen, auto layout ve prototip gibi araçlar olmadığı için her değişiklik elle tekrarlanır ve geliştiriciye devir zorlaşır. Basılı ve marka işleri için araç seçimini grafik tasarım programları rehberinde ve hangi iş için hangi araç yazısında ayrıca ele aldım.

Araştırma ve test araçları

UX araştırmasında araçtan önce yöntem seçilir: görüşme mi, gözlem mi, anket mi, kullanılabilirlik testi mi? Araç bu kararı takip eder.

• Görüşme ve gözlem: Görüntülü görüşme araçlarının kayıt özelliği, not şablonu ve izin metni yeterlidir.
• Anket: Kısa, tek konuya odaklı form araçları. Soru yazımı araçtan daha önemlidir.
• Uzaktan kullanılabilirlik testi: Maze gibi platformlar prototip üzerinde görev verip tamamlama oranını, tıklama yollarını ve yorumları toplar. Moderatörsüz test hızlıdır ama kullanıcının neden zorlandığını anlamak için birkaç moderatörlü görüşmeyle desteklenmelidir.
• Analitik ve oturum kaydı: Yayındaki ürünün nerede terk edildiğini gösterir. Neden terk edildiğini tek başına söylemez.

Türkiye'de katılımcı kaydı, ekran görüntüsü ve kişisel veri içeren her araç KVKK açısından değerlendirilmelidir. Aydınlatma metni, açık rıza ve verinin hangi ülkede saklandığı araç seçmeden önce netleşmelidir. Bu genel bir hatırlatmadır, hukuki görüş yerine geçmez. Araştırma kapsamı için UX araştırma hizmeti sayfasına bakabilirsiniz.

Geliştirici devri: inceleme, token ve dışa aktarma

Tasarım dosyası geliştiriciye ulaştığında ekranın görüntüsü değil, davranışı ve kuralları da aktarılmalıdır. Araçlar burada üç şekilde yardımcı olur:

1. İnceleme modu: Ölçü, renk, yazı stili ve aralık değerlerinin okunması.
2. Tasarım token'ları: Renk, aralık ve tipografi değerlerinin isimli değişkenler olarak dışa aktarılması. Böylece kodda da aynı isimler kullanılır.
3. Varlık dışa aktarımı: İkonların SVG, görsellerin uygun çözünürlükte çıktısı.

Araç ne kadar gelişmiş olursa olsun boş, hata, yükleme ve izin durumları tasarlanmamışsa devir eksik kalır. Bileşenlerin yanında hangi notların teslim edilmesi gerektiğini design system teslimi ve HTML, CSS ve JavaScript teslimi yazılarında anlattım. Bileşen kütüphanesi kurulması gereken projeler için design system hizmeti sayfası var.

Yapay zekâ araçları: neye yardımcı olur, neyi çözmez?

Ekim 2026 itibarıyla birçok tasarım aracı metinden ekran taslağı üretme, içerik doldurma ya da katmanları adlandırma gibi yapay zekâ özellikleri sunuyor; ayrıca sohbetle arayüz üreten bağımsız araçlar da var. Bunlar hızlı fikir taslağı ve varyasyon için yararlı olabilir.

Ancak bir ekranın hangi kullanıcı görevine hizmet ettiğini, akışta hangi adımın gereksiz olduğunu ve tasarım sisteminin tutarlı kalıp kalmadığını araç kendi başına bilemez. Üretilen ekranın erişilebilirlik ve durum kontrolleri yine insan tarafından yapılmalıdır. Bu konuyu yapay zekâ ile web ve UI/UX tasarımı yazısında ve yapay zekâ ile uygulama yapılır mı rehberinde ayrıntılı ele aldım.

Öğrenmeye hangi araçla başlamalı?

Yeni başlayan biri için mantıklı sıra şudur: önce kâğıtta akış ve wireframe, sonra yaygın bir arayüz aracında bileşen, auto layout ve prototip, ardından küçük bir kullanılabilirlik testi. Program öğrenmek birkaç haftalık iştir; hiyerarşi, tipografi ve akış kurma becerisi ise yıllar içinde gelişir. Yol haritasını UI/UX tasarımcı nasıl olunur rehberinde, araçların ötesindeki yetkinlikleri UI/UX tasarımcı becerileri sayfasında bulabilirsiniz.

Benim çalışma akışım

Arayüz projelerimde ekran, bileşen ve prototip dosyasını Figma'da hazırlıyorum; ekip başka bir araç kullanıyorsa öncelik ortak dosyanın korunmasıdır. İkon ve illüstrasyon gibi varlıkları vektör araçlarında hazırlayıp arayüz dosyasına aktarıyorum. Danone ve ERP Software projelerinde rolüm arayüz tasarımıydı; Yatcim'de ise web sitesinin tamamını hazırladım. Uygulamanın kodlanması ve yayına alınması ayrı bir sorumluluktur; teklifte bu ayrımı açıkça yazarım. Süreç adımları için UX tasarımı nedir ve mobil uygulama nasıl tasarlanır rehberlerine, alanın bütününe UI/UX tasarım ana sayfasından ulaşabilirsiniz.

Özet ve kontrol listesi

• Aracı aşamaya göre seçin: akış, arayüz, prototip, test ve devir farklı ihtiyaçlardır.
• Ekipte herkesin açabileceği tek bir ana arayüz dosyası belirleyin.
• Bakım modundaki ya da tek işletim sistemine bağlı araçları uzun projelerde dikkatle değerlendirin.
• İleri prototipi yalnız en belirsiz akışlar için kurun.
• Araştırma araçlarını seçmeden önce KVKK ve veri saklama konusunu netleştirin.
• Devirde ekran görüntüsü değil, durumlar, token'lar ve davranış notları teslim edin.
• Plan ve fiyat bilgisini her zaman üreticinin güncel sayfasından doğrulayın.