Figma AI yalnızca ona verdiğiniz talimatlar kadar iyi çalışır. Belirsiz istekler, baştan yeniden oluşturmanız gereken jenerik düzenler üretir. Ekran türü, bölümler, bileşenler, çerçeve boyutu ve boşlukları içeren spesifik istekler — rutin olarak tek seferde %70–85 üretime hazır çıktı üretir. Bu 15 şablon Figma'nın 2026 AI yığını için yapılandırılmıştır: Design Agent, Figma Make, Skills ve sıfır kredi maliyeti olan ücretsiz özellikler (otomatik düzen, katmanları yeniden adlandır, içeriği değiştir).

Herhangi bir şablonu kopyalayın, köşeli parantez içindeki yer tutucuları ürününüzle değiştirin ve daha sıkı kısıtlamalar istiyorsanız ücretsiz Prompt Optimizer'dan geçirin. Agent talimatlarını hazırlarken ChatGPT, Claude ve Gemini içinde tek tıkla optimizasyon için, TresPrompt kenar çubuğunuza ICCSSE tarzı yapı ekler.

Temel Çıkarım

Her güçlü Figma AI istemi dört şeyi adlandırır: hangi ekranı oluşturduğunuz, hangi yayınlanmış bileşenleri kullanacağınız, çerçeve boyutu ve boşluk kuralları. Negatif kısıtlamalar ekleyin ("adsız çerçeveler kullanma," "lorem ipsum yok") ve agent tahmin etmeyi bırakır. Skills bu kalıpları kodlar böylece her oturumda tekrar yazmanız gerekmez.

Design Agent Şablonları (Kanvas Üzerinde Ekranlar)

1 Mobil ayarlar sayfası
Bir mobil ayarlar sayfası (390×844) oluştur: 1. Hesap — avatar, isim, e-posta, düzenleme butonları 2. Bildirimler — e-posta, push, SMS için geçiş butonları 3. Görünüm — karanlık mod geçişi, yazı tipi boyutu seçici 4. Güvenlik — şifre değiştir, 2FA geçişi 5. Alt bilgi — yıkıcı çıkış yap butonu, uygulama sürüm metni Sadece yayınlanmış bileşenleri kullan. Otomatik düzen: 16px öğe boşluğu, bölümler arası 32px. Grup etiketleri için Section Header bileşeni.
2 Dashboard genel bakış (masaüstü)
Bir masaüstü analitik dashboard'u (1440×900) oluştur: - Üst navigasyon: logo, arama, kullanıcı menüsü - Sol kenar çubuğu: 5 navigasyon öğesi, "Genel Bakış"ta aktif durum - Ana alan: sıralı 4 KPI kartı, altında çizgi grafik, son aktivite tablosu (5 satır) Renk ve boşluk için tasarım sistemi değişkenlerini kullan. KPI'lar için Card bileşeni. Aktivite için Table bileşeni. "Series 1" gibi yer tutucu grafik veri etiketleri kullanma.
3 Onboarding akışı (3 çerçeve)
3 mobil onboarding ekranı (390×844) oluştur, soldan sağa: 1. Hoş geldiniz — başlık, alt metin, birincil CTA "Başlayın" 2. İzinler — geçiş butonlarıyla bildirimler + konum listesi 3. Başarı — onay işareti illüstrasyon alanı, "Hazırsınız" CTA Primary Button ve Secondary Button bileşenlerini kullan. 1/3, 2/3, 3/3 adımlarını gösteren ilerleme göstergesi. Tüm çerçevelerde tutarlı 24px yatay dolgu.
4 Boş durum + hata durumu
İki mobil çerçeve (390×844) oluştur: Çerçeve A — Boş arama sonuçları: ikon alanı, başlık "Sonuç bulunamadı", gövde metni, ikincil "Filtreleri temizle" butonu Çerçeve B — Hata: uyarı ikonu, "Bir şeyler yanlış gitti", birincil "Tekrar dene", üçüncül "Destek ile iletişim" Mevcutsa yayınlanmış Empty State ve Alert bileşenlerini kullan. Orta hizalı içerik, metin bloğu için maksimum 280px genişlik.
5 Erişilebilir ayarlar (agent + a11y)
Erişilebilirlik gereksinimleriyle bir mobil ayarlar sayfası (390×844) oluştur: - Etkileşimli öğeler minimum 44×44px dokunma hedefleri - Metin kontrastı minimum 4.5:1 (tasarım sistemi metin renklerini kullan) - Başlık hiyerarşisi H1 → H2, atlanan seviye yok - Geçiş butonları görünür metin etiketleri içerir (sadece ikon değil) - Hata durumları renk VE metin kullanır (sadece renk değil) Yayınlanmış bileşenleri kullan. Otomatik düzen 16px / 32px boşluk.

📬 Bundan değer mi alıyorsunuz?

Haftada bir uygulanabilir AI içgörüsü. Ayrıca abone olduğunuzda ücretsiz prompt paketi.

Ücretsiz abone ol →

Figma Make Şablonları (Prototip / Kod)

6 Pazarlama landing (Make)
Bu Figma çerçevesinden tek sayfalık bir pazarlama sitesi oluştur: - Hero: başlık, alt başlık, e-posta yakalama + CTA - İkonlu 3 özellik sütunu - Sosyal kanıt logoları sırası - Linkli footer Seçilen çerçevedeki boşluk ve renkleri eşleştir. Mobil uyumlu. Çerçeve notlarında belirtilmedikçe harici kütüphane yok.
7 Etkileşimli prototip (Make)
[Çerçeve adlarını listele] çerçevelerinden tıklanabilir bir prototip oluştur: - "Kaydol"a tıklamak kayıt formu çerçevesine yönlendirir - Gönder başarı toast durumunu gösterir - "Geri" önceki ekrana döner Dosyadaki bileşenleri kullan. Birincil butonlarda hover durumlarını koru. Tasarım dosyasında olmayan yeni ekranlar ekleme.

Skills Şablonları (Yeniden Kullanılabilir Agent Talimatları)

Bunları Skills markdown dosyaları olarak kaydedin böylece agent her seferinde takım kurallarını takip etsin.

8 Skill: /settings-page
Ayarlar ekranları oluştururken: - Her zaman Section Header + gruplanmış liste kalıbını kullan - Uygulama sürümü (başlık stili) ve yıkıcı çıkış yapla footer ekle - Kullanıcı masaüstü belirtmedikçe mobil varsayılan 390×844 - Boolean ayarlar için Toggle bileşeni kullan, asla özel checkbox'lar değil - Boşluk: gruplar içinde 16px, gruplar arası 32px, ekran dolgusunda 24px
9 Skill: /data-table
Tablo oluştururken: - Table/Header ve Table/Row bileşenlerini kullan - Sadece kullanıcı isterse sıralama ikon sütunu ekle - Dokunma için minimum 48px satır yüksekliği - Uzun metni üç nokta ile kes, hücrelerde asla 2 satırdan fazla sarma - Sıfır satır varsa tablonun altında boş durum

Ücretsiz Özellikler (Sıfır Kredi)

10 İçerik Değiştir (toplu)
Seçilen çerçevedeki tüm lorem ipsum'u gerçekçi [B2B SaaS / e-ticaret / sağlık] metniyle değiştir. İsimler: çeşitli, makul. Adresler: ABD formatı. Ürün adları: kurgusal ama profesyonel. Düzen bozulmasın diye karakter sayılarını yer tutuculara benzer tut.
11 Katmanları yeniden adlandır (teslim hazırlığı)
Bu sayfadaki tüm katmanları şu kalıbı kullanarak yeniden adlandır: [Bölüm]/[Bileşen]/[Durum] Örnek: Settings/NotificationRow/Default Kilitli arka plan çerçevelerini yeniden adlandırma. Gizli katmanları atla.

MCP + Kod Teslim İstemleri (Claude Code / Cursor)

12 Figma çerçevesinden React
Seçilen Figma çerçevesini MCP aracılığıyla oku. [Tailwind / bizim Shadcn kütüphanemizi] kullanarak bir React bileşeni oluştur: - Dosyadaki tasarım token'larından boşluk ve renkleri eşleştir - Semantik HTML kullan (nav, main, section) - 768px ve 1024px'te duyarlı kırılma noktaları ekle - Kullanıcı verisi için tipli prop'larla SettingsPage.tsx olarak dışa aktar Hex değerlerini sabit kodlama — Figma değişkenlerinden token adlarını kullan.

Keşif ve Karşılaştırma Şablonları

13 Üç düzen yönü
[Ekran türü] için masaüstü 1440×900'de 3 farklı düzen yaklaşımı oluştur: A — kenar çubuğu navigasyonu B — üst sekme navigasyonu C — kart tabanlı hub Üçünde de aynı içerik. Yayınlanmış bileşenleri kullan. Çerçeveleri 80px boşlukla yan yana yerleştir. Her çerçeveyi küçük başlık metninde "Yön A/B/C" olarak etiketle.
14 Tasarım sistemi denetim istemi
Seçilen sayfayı gözden geçir ve listele: - Yayınlanmış kütüphaneden olmayan bileşenler ("ayrılmış" olarak işaretle) - Değişken kullanmayan renkler - Metin stilleri kullanmayan metinler - 4/8/16/24/32 olmayan otomatik düzen boşlukları Çerçeve notlarında kontrol listesi olarak çıktı ver. Otomatik düzeltme yapma — sadece rapor et.
15 İyileştirme geçişi (ikinci istem)
Oluşturulan çerçevede sadece bu düzeltmeleri uygula: 1. Bölümler arası dikey boşluğu 32px'e artır 2. Birincil butonu Button/Primary/Large varyantıyla değiştir 3. E-posta alanının altına yardımcı metin ekle: "E-postanızı asla paylaşmayız" 4. Liste satırlarındaki tüm ikonları 24×24'e hizala Düzeni yeniden yapılandırma. Yeni bölümler ekleme.

Şablonlar Nasıl Zincirlenir

Üretim iş akışı: Şablon 13 (keşfet) → yön seç → Şablon 1 veya 2 (tam ekran) → Şablon 15 (iyileştir) → Şablon 11 (yeniden adlandır) → Şablon 12 (MCP'den koda). Her adım agent'ı karıştıran dev bir talimat yerine odaklanmış bir istem kullanır.

Tam Figma AI ekosistemi (Agent, Make, MCP, Skills, Sites) için kapsamlı 2026 rehberimize bakın. Adım adım agent kurulumu için Design Agent nasıl kullanılır bölümüne bakın. Kredi bütçelemesi için Figma AI kredileri açıklandı bölümüne bakın.

Sıkça Sorulan Sorular

Bunlar ücretsiz Figma planında çalışır mı?

Şablon 10–11 (İçerik Değiştir, yeniden adlandır) ücretsiz planlarda çalışır. Design Agent ve Make ücretli planlar ve beta erişimi gerektirir. MCP, koltuğunuz için Dev Mode / MCP'yi etkinleştirebilen herhangi bir planla çalışır.

Tüm şablonu yapıştırmalı mıyım yoksa kısaltmalı mıyım?

Tam şablonla başlayın. Agent'ın hangi satırları görmezden geldiğini gördükten sonra kısaltın. Kısa istemler ancak tasarım sisteminizin gerçekte hangi kısıtlamalara ihtiyaç duyduğunu öğrendikten sonra çalışır.

Aynı istemi Make ve Design Agent için kullanabilir miyim?

Hayır — Make oluşturma/prototip dili bekler ve kredileri farklı tüketir. Kanvas katmanları için Design Agent şablonlarını, etkileşimli çıktı için Make şablonlarını kullanın. Bunları karıştırmak karışık sonuçlar üretir.

İstemleri Skills olarak nasıl kaydederim?

Şablon 8–9'u takımınızın Skills kütüphanesindeki Skill markdown dosyalarına kopyalayın. Agent panelinde /skill-adı ile çağırın. Bileşen adlarınız değiştiğinde Skills'i güncelleyin — Skills rehberimize bakın.

Açıklama: Bu makaledeki bazı linkler affiliate linkleridir. Sadece kişisel olarak test ettiğimiz ve düzenli kullandığımız araçları öneriyoruz. Tam açıklama politikamıza bakın.