Figma Make Nedir?
Figma Make, Figma'nın yapay zeka destekli prompt-to-app (komutla uygulama) aracıdır[1]. Bir fikri metinle tanımlarsınız, isterseniz bir Figma çerçevesi veya görsel eklersiniz; o da dakikalar içinde işlevsel ve etkileşimli bir prototip üretir. Tasarım becerisine de kodlamaya da gerek yok.
Figma Make, Figma ekosistemi içinde çalışır ve yayınlayabileceğiniz veya devredebileceğiniz gerçek uygulama kodları üretir.
Prompt-to-Prototype'ı Ücretsiz Deneyin >
Figma Make ile Uygulama Geliştirme Adımları
Figma Make kullanımını göstermek için, Duolingo arayüzünü temel alarak sıfırdan bir çocuk kodlama eğitim uygulaması geliştireceğim; süreci hızlandırmak için de Figma Agent gibi diğer yapay zeka özelliklerini kullanacağım.
Not: Bu rehberde Figma Pro[2] kullanıyorum. Ancak Figma AI Ücretsiz planını kullansanız bile adımlar tamamen aynı olacaktır.
Figma Make'i Açın ve Kurun
Figma panelini açtığınızda, en üstte etkileşimli bir arama çubuğu şeklinde Figma Make banner'ını göreceksiniz. Buradan veya direkt ‘www.figma.com/make’ adresinden başlayabilirsiniz; ben ikincisini tercih ediyorum.
Burada, uygulamanızın fikrini sade bir dille yazıyorsunuz. Ayrıca görsel, arayüz referansları, Tasarım MD dosyası, PRD veya bir Figma tasarım karesinin linkini ekleyebilirsiniz. İşin en heyecan verici yanı, uygulamanızı hangi yapay zeka modelinin güçlendireceğini seçebilmeniz: Gemini, GPT veya Claude. Ben tasarıma öncelik veren model olan Gemini 3.1 PRO'yu seçiyorum.
Gemini 3.1 PRO ile Web Tasarımı Nasıl Yapılır >
Metin komutunu girin ve/veya referansları yükleyin
Komut alanında tek bir ekrandan veya tüm akıştan bahsedebilirsiniz. Stili yapay zekaya bırakabilir ya da ona görsel-metinsel referanslar sunabilirsiniz. Ciddi bir kodlama çalışması için önerim olabildiğince detay vermenizdir.
Uygulamam için (adı Coddly olacak) soru-cevap ekranına yönelik bir komut yazıp, referans için de birkaç Duolingo ekranı yüklüyorum:
"Coddly adında, çocuklar için bir kodlama eğitimi uygulaması geliştir. Kilitli ve açık seviyeleri olan bir öğrenme yolunun bulunduğu ana ekran ile başla. Ardından 2 soru tipli bir ders ekranı tasarla: (1) programlama dili açıklamasına göre doğru görseli seçme, (2) kelime butonlarına basarak kod yazma. Sonunda ise kazanılan XP'yi gösteren başarı tamamlama ekranı koy.
Yüklediğim Duolingo arayüzünden esinlenen oyunlaştırılmış, eğlenceli bir UI kullan. Renk paleti mor-sarı, kartlar yuvarlatılmış olsun; maskot, üstte ilerleme çubuğu ve alt navigasyon ekle."
İstek işlenirken yapay zekanın mantık yürütme adımlarını canlı görebilirsiniz. Sayfa açık olduğu sürece çalışır ve bittiğinde size haber verir. Detaylı bilgi vermediğim halde soru-cevap ekranını bağlama uygun şekilde harika tasarladı.
İstemin tamamlanması yaklaşık 4 dakika sürdü ve 54 AI kredisi harcadı. Çıktıda, tam hayal ettiğim akış ve stilde, 4 ekrandan oluşan etkileşimli bir uygulama elde ettim.
Manuel ve Yapay Zeka ile Ekran Düzenleme
Şimdi tasarlanmış uygun bir maskot olmasını, 'Ünite 1' yerine 'Coddly' yazmasını ve her iki öğenin tüm ekranların üst bilgisinde bulunmasını istiyorum. İşte burada Figma Make’in çift yönlü düzenleme özelliği devreye giriyor:
i) Manuel seç ve düzenle
Chatbar altındaki Manuel Düzenleme (Manual Edit) seçeneğini seçtim. Düzenlemek istediğim (metin) öğesine tıklayıp istediğimi yazdım.
Figma Make'te manuel düzenlemeler kredi harcamaz. Ekrandaki tek seferlik ufak değişiklikler için son derece pratiktir.
ii) Yapay zeka ile düzenleme
Daha karmaşık olan veya tüm ekranları etkileyen değişiklikler için chatbot'a doğrudan komut vermek en hızlı yoldur:
“Giriş ve bitiş ekranındaki mevcut logoyu istemde ekli olan maskot görseliyle değiştir. Ayrıca tüm ekran başlıklarını ana ekranla aynı yap.”
*Not: Maskotu, Figma Weave'in text-to-vector (metinden vektöre) aracını kullanarak tasarladım.
Ve sadece 4 dakika ve 90 kredi karşılığında, maskot tam istediğim gibi 4 ekranın hepsinde yerini aldı.
Lovable ile Benzersiz UI Nasıl Üretilir >
İstemle yeni bir ekran ekleyin
Mevcut ekranlardan memnun olduğumuza göre, şimdi de 'Seri Takibi' (Streak Log) için yeni bir ekran ekleyelim. Figma uygulama yapıcıya sade bir dille bunu sorduğumuzda, Duolingo referansı vermesek bile mevcut ekranların stilini ve mantığını izleyecektir.
“Mevcut uygulamayla uyumlu bir ‘Seri Takibi ve Görevler’ ekranı ekle. Alt navigasyondaki hedef ikonu üzerinden erişilebilir olsun.”
2 dakikada tamamlandı, 56 kredi harcadı ve tam isabet oldu.
Manuel ekran tasarımıyla kıyaslandığında; şablon, ekran arayüzleri ve bağlantıları üretirken Figma Make'in ne kadar büyük bir zaman kazandırdığını tahmin edebilirsiniz.
2026'nın En İyi AI Kodlama Araçlarını Test Ettim >
Etkileşimleri test modunda deneyin
Son olarak, arka uç, API entegrasyonu ve uygulamanın yayına alınmasına geçmeden önce, Figma Make önizlemesinde uygulamanın etkileşimini kontrol etmelisiniz. Sağ üst köşedeki oynat simgesine tıklamanız yeterlidir; önizleme yeni bir pencerede açılır.
Önizleme sonucundan çok memnunum; akış doğru kurulmuş, butonlar çalışıyor, soru-cevap bölümlerinin doğru/yanlış durumları sorunsuz çalışıyor ve mikro animasyonlar çok eğlenceli. Önizleme yapmak elbette kredi harcamaz.
Görüntüleme bağlantısını herkesle paylaşabilirsiniz. Ya da Figma Make üst menüsündeki 'Yayınla' (Publish) seçeneğiyle doğrudan canlı erişime açabilirsiniz.
Figma Make ile Geliştirdiğim Coddly Uygulamasını Önizleyin >
Figma Make Uygulamasını Koda Aktarma
5 ekranlı Coddly uygulaması hazır ve test edilmiş olduğuna göre, artık kodları devretme zamanı geldi. Figma Make bunun için iki harika yol sunuyor.
Birincisi, kod görünümüne geçip indir simgesine basmaktır; tüm kod dosyalarının zip formatındaki halini anında alırsınız. Paketin içinde Tailwind CSS, Vite konfigürasyonu ve her ekranın kendi bileşeni (Home.tsx, Lesson.tsx, Celebration.tsx, StreakAndChallenges.tsx) olan düzgün bir React + TypeScript projesi bulunur. Ayrıca BottomNav ve Header gibi ortak bileşenler otomatik olarak ayrıştırılmıştır. Görseller paketlenmiş, yönlendirmeler bağlanmıştır. VS Code'a atın ve hemen çalıştırın.
İkinci yol ise, Figma Make'in GitHub ve Supabase ile entegre yerleşik IDE'sidir; böylece tarayıcıdan çıkmadan repoya kod gönderebilir ve gerçek bir veri tabanı bağlayabilirsiniz.
Ayrıca Claude Code veya Cursor gibi yapay zeka kodlama araçlarının Figma dosyalarınızı doğrudan okumasını sağlayan bir Figma MCP sunucusu da var. Bu, Figma'dan koda devretme süreçlerini çok daha hassas hale getiriyor.
Ek olarak, geliştirme yaparken ürün verilerini çekmek isterseniz, Figma Make'in Bağlayıcıları Notion, Slack, Monday.com, Marvin ve Sprig'i destekler.
Ücretsiz Figma-to-Code Yapay Zekaları Karşılaştırması >
Figma Make Kullanmak İçin İpuçlarım
Figma Make entegre aracı, tıpkı tüm Figma AI araç kiti gibi hızlı ve son derece yeteneklidir. Ancak krediler hızlı tükenebilir, bazen komutlar yanlış anlaşılabilir veya jenerik çıktılar üretebilir. Bunların her yapay zeka uygulama geliştiricide olabileceğini bilerek, Figma Make'ten en iyi şekilde yararlanmak için birkaç ipucu derledim:
İlk istemde çok spesifik olun: Make, en iyi işi ilk adımda çıkarır. Ekran sayısını, akış mantığını, kullanıcı arayüzü stilini, renk paletini ve etkileşimleri baştan detaylandırın. İlk komut ne kadar detaylı olursa, sonradan düzeltmek için o kadar az kredi harcarsınız.
Kararsız kaldıysanız ve fikir fırtınası yapmak istiyorsanız, kurulum sırasında 'Build' (Geliştir) yerine 'Plan' (Planla) modunu kullanın.
Küçük düzeltmeler için manuel araçları kullanın: Tıklayıp manuel düzenlemek sıfır kredi harcar. Yapay zeka istemlerini yalnızca yeni ekran ekleme, düzen değişiklikleri ve yönlendirme mantığı gibi yapısal değişiklikler için saklayın. Basit bir etiket değişikliği için kredinizi yakmayın.
Yapay zekadan aynı anda sadece tek bir şey isteyin: Tek bir istemde birden fazla değişiklik istemek, eksik yürütmeye veya talebin yanlış anlaşılmasına neden olabilir. Bu nedenle her seferinde tek bir net talimat vermek en iyisidir.
Hızlı düzeltmeler için kod sekmesini kullanın: Yanlış renk veya kötü dolgular (padding) gibi küçük hataları doğrudan kod sekmesinden düzeltmek, yapay zekaya tekrar istem yazmaktan çok daha hızlıdır.
Kodlamadan Önce Tasarımı Tasarlayın (Vibe Design): Figma Make'in tasarım çıktıları bazen jenerik kalabilir. Bu durumu şıklıkla, hızla ve bütçe dostu şekilde aşmak için kodlamaya geçmeden önce tasarımı Banani AI ile şekillendirmenizi öneririm.
Aşağıda, Banani'nin aynı istemlerle aynı uygulama ekranlarını nasıl tasarlayacağını görebilirsiniz.
Banani’nin Geliştirdiği Coddly Arayüzünü İnceleyin ve Düzenleyin >
Figma Make'i Diğer Figma AI Araçlarıyla Birlikte Kullanma
Figma Make, 2026 yılındaki Figma AI ekosisteminin önemli bir parçasıdır. Uçtan uca ürün geliştirme iş akışı için diğer yapay zekalarla eşleştirilebilir. Bir uygulama geliştirmek için önce Figma Weave ile arayüz görselleri üretebilir, ardından bunları tasarım tuvalinde Figma Agent kullanarak birleştirebilirsiniz. Tasarımdan memnun kaldığınızda, kodlama ve arka uç bağlantıları için ekranları Figma Make'e aktarın. Son olarak, Figma Sites tek adımda uygulamanızı canlı bir web sitesi olarak yayınlayabilir.
Bununla birlikte, bu Figma AI paketi henüz beta aşamasındadır ve krediler hızlıca biter. Figma entegrasyonu derin olan, tasarımdan koda özel tasarlanmış bir yapay zeka arıyorsanız Banani AI'ı deneyin.
Figma Make Yapay Zekası Hakkında SSS
Figma Make hangi AI modelini kullanıyor?
Figma Make birden fazla modeli destekler: Claude Sonnet 4.6 & Opus, Gemini 3 Flash & 3.1 Pro ve GPT-5.5. Oluşturmadan önce istediğiniz modeli seçebilirsiniz.
Figma Make hangi kodlama dilini kullanıyor?
Figma Make, Tailwind CSS ile stillendirilmiş React ve TypeScript kodları üretir. Standart Vite tabanlı bir proje çıktısı verir.
Figma AI, tasarım bileşenlerinden kodu nasıl üretiyor?
Figma Make, yazdığınız istemleri ve eklediğiniz görsel referansları okur; seçtiğiniz AI modelini kullanarak belirtilen düzen, etkileşim ve stile birebir uyan bileşen düzeyinde kodlar oluşturur.
Figma Make ile Figma Sites arasındaki fark nedir?
Figma Make, istemlerden işlevsel, kodlanmış web uygulamaları oluşturur; yani altında gerçek kod çalışan etkileşimli prototipler üretmek içindir. Figma Sites ise Figma tasarımlarınızı doğrudan canlı, duyarlı web siteleri olarak yayınlar.
Uygulama tasarımı için en iyi Figma Make alternatifi hangisidir?
Uçtan uca tam kodlama çalışmaları için Lovable ve Bolt.new güçlü seçeneklerdir. Ancak kullanıcı arayüzü (UI) odaklı hızlı prototipleme için Figma Make'in en iyi alternatifi Banani AI’dır.
Referanslar
[1] https://www.figma.com/make
[2] https://help.figma.com/hc/en-us/articles/31304412302231-Explore-Figma-Make
