Figma Kod Katmanları ve Specs: Nedirler, Nasıl Çalışırlar ve Nerede Dururlar14 min read

Figma kod katmanları, çalışan kodu tuval üzerine koyar ve Figma Specs, Markdown’i de oraya koyar. Her ikisi de 15 Ekim 2026’da Config India’te açık betaya girdi; böylece bir tasarım dosyası artık çerçeveleri, çalışan bir prototipi ve bir aracının oluşturduğu yazılı planı barındırabilir.

Bu kılavuz, prototip ve spesifikasyon çalışmalarının Figma’e taşınıp taşınmayacağına karar veren tasarımcılar, Proje Yöneticileri ve ön uç mühendisler içindir. Her özelliğin ne yaptığını, nasıl başlayacağını, AI kredilerinin maliyetini ve işin Figma’i Claude, ChatGPT veya Cursor’teki ekip arkadaşlarına nerede bırakması gerektiğini kapsar.

Yapay zeka çağında tasarım koddur. Yapay zeka ile doğrudan kodla tasarım yapmak veya Figma tasarımlarınızı koda dönüştürmek için şunu kullanın: Anima Playground: bir ekranı tanımlayın veya bir Figma tasarımından başlayın, ardından önizleyebileceğiniz ve yayınlayabileceğiniz düzenlenebilir bir uygulama üzerinde yinelemeye devam edin.

Yapay Zeka ile Doğrudan Kodda Tasarım Yapın

Yapay zeka ile tasarım: Bir ekranı tanımlayın veya Figma tasarımlarını koda dönüştürün.

Figma, Config India 2026’da neyi piyasaya sürdü?

Kod katmanları ve Specs ana başlıktı, ancak etraflarında bir dizi aracı özelliğiyle birlikte geldiler. Figma’in yardım merkezindeki mevcut durum:

Her iki beta da birkaç hafta içinde yayınlanacağından bunları ekibinizin geri kalanından önce veya sonra görebilirsiniz.

Figma kod katmanları nelerdir?

Kod katmanı gerçek, çalışan kodu tutan bir katmandır. Çerçeve bağlantılarıyla etkileşimleri taklit eden bir prototip yerine, tasarımlarınızın yanında tuval üzerinde duran, çalışan, kod destekli bir prototip elde edersiniz. Takım arkadaşları üzerine tıklayabilir, yorum yapabilir ve kopyalayarak farklı bir yönü yan yana deneyebilir.

Figma, bir tanesini başlatmanız için size dört yol sunar:

• Bir tasarımdan. Çerçeveleri seçin ve Figma aracısından bunları bir kod katmanına dönüştürmesini isteyin.
• Canlı bir web sitesinden. Figma Chrome uzantısıyla bir sayfa yakalayın ve tuvale yapıştırın.
• Bir depodan. Desteklenen, hafif prototip oluşturma kod tabanını GitHub’ten veya yerel bir klasörden içe aktarın. Bir GitHub içe aktarma işlemi bu depoya bağlı kalır.
• Sıfırdan. Boş bir kod katmanı ekleyin ve aracıdan derleme yapmasını isteyin.

Ayrıca bir kodlama aracında oluşturduğunuz bir prototipi Figma MCP sunucusu aracılığıyla tuvale de getirebilirsiniz.

Düzenleme üç şekilde gerçekleşir. Aracıyı yönlendirirsiniz, değişikliğin nereye ait olduğunu göstermek için çerçevelere açıklama eklersiniz veya kod düzenleyiciyi açıp kodu kendiniz değiştirirsiniz. Görsel detayların koddan daha önemli olduğu durumlarda, Extract designs ekranları bir kod katmanından düzenlenebilir Figma karelere dönüştürür. Kod mühendisler için hazır olduğunda onu bir şubeye aktarabilir ve çekme isteği açabilirsiniz.

Figma Specs nedir?

Figma, Specs’i “bağlam için yerel bir yuva” olarak adlandırıyor. Uygulamada bu, bir Figma Design dosyasının veya FigJam kartının tuvalinde veya kendi Spec dosyası olarak yaşayan, ortak çalışmaya dayalı bir Markdown belgesidir.

Başlamak hızlıdır:

1. Dosya tarayıcısından bağımsız bir Spec oluşturun veya şuraya gidin: figma.com/spec/new.
2. Bir Tasarım dosyasının veya FigJam kartının içinde araç çubuğunda Spec öğesine tıklayın veya tuşuna basın. D.
3. Zaten var .md dosya? Bunu tuvalin üzerine sürüklediğinizde bir spesifikasyon haline gelir.
4. Zaten bildiğiniz Markdown ile yazın: # başlıklar için, - mermiler için, [] yapılacaklar için, > tırnak işaretleri için, kod için üç geri tıklama. Tür / görüntüler için Figma yerleştirmeleri ve bölücüler.

Bir spesifikasyonu Markdown dosyasından daha üstün kılan şey, metnin etrafında yer alan şeydir. Kanvastan bir çerçeve, bir FigJam kartı veya herhangi bir düğümü gömebilirsiniz, böylece gereksinim ve tanımladığı tasarım yan yana kalır. Takım arkadaşları bu yorumlara yorum yapar ve Figma temsilcisi bu yorumları okuyup yanıtlayabilir.

Specs ayrıca Figma dışında da çalışır. Figma MCP sunucusuna bağlı kodlama aracıları, özellikleri kullanarak özellikleri okuyabilir, oluşturabilir ve güncelleyebilir. figma-spec yetenek. Birini teslim etmek için, spesifikasyon bağlantısını kodlama aracınızın istemine kopyalarsınız ve bağlantılı çerçeveler, diyagramlar, kod katmanları ve Code Connect parçacıkları onunla birlikte gelir.

Markdown neden devredilen format haline geldi?

Figma’in kendi lansman gönderisi bunu açıkça söylüyor: Markdown artık aracılarla bağlam paylaşımı için fiili format. Her kodlama aracısı bunu okur. Çoğu ürün ekibi halihazırda planları, PRD’leri ve temsilci talimatlarını saklıyor. .md dosyalar.

Benim okumam, Specs’in Figma olduğu, bir temsilciye devredilmenin metin olduğunu kabul ettiği ve ardından bu metni çok oyunculu hale getirdiği yönünde. Yerel AGENTS.md veya PRD format nedeniyle hiçbir zaman başarısız olmadı. Başarısız oldu çünkü yalnızca bir kişi düzenledi, tasarımlardan uzaklaştı ve kimse temsilcinin hangi sürümü kullandığını göremedi.

Figma’in içindeki Specs bunu düzeltir. Açık soru onun dışında ne olduğudur. Eklemeler, yorumlar ve canlı tasarım referansları Figma özellikleridir ve aracılar bunlara Figma MCP kataloğunda listelenen istemciler aracılığıyla ulaşır. Mühendisleriniz, Başbakanınız ChatGPT ve pazarlama ekibinizin Claude’u aynı plana ihtiyaç duyuyorsa, yine de paylaşılan kopyanın nerede olacağına karar vermeniz gerekir.

Pratik bir iş akışı: PRD’ten kod katmanına ve çekme isteğine

Yalnızca Figma’in bugün belgelediklerini kullanarak, iki özelliğin gerçek bir özellik üzerinde nasıl bir araya geldiğini burada bulabilirsiniz.

1. PRD’inizi tuvalin üzerine sürükleyin. Mevcut .md dosya bir spesifikasyon haline gelir. Hiçbir şey yeniden yazılmaz ve elle düzenlemek hiçbir yapay zeka kredisi gerektirmez.
2. Bahsettiği çerçeveleri yerleştirin. Kullanım / PRD’in tanımladığı akışları eklemek için. Gözden geçirenler artık gereksinimi ve ekranı birlikte görüyor.
3. Anahtar kareleri bir kod katmanına dönüştürün. Bunları seçin ve temsilciye bilgi verin. Zaten bir prototip deponuz varsa, bunun yerine onu GitHub’ten içe aktarın.
4. Tek bir yerde inceleyin. Spesifikasyon ve kod katmanına ilişkin yorumları toplayın. İnsanlar aynı konuları tartışırken, Figma temsilcisinden her açık yoruma önerilen bir düzeltmeyle yanıt vermesini isteyin.
5. Spesifikasyonu bırakın. Spesifikasyon bağlantısını Figma MCP sunucusuna bağlı Codex, Claude Code veya Cursor’e yapıştırın. Temsilci, Markdown’e ek olarak bağlantılı tasarım bağlamını alır.
6. Prototip kodunu gönderin. Kod katmanındaki değişiklikleri bir şubeye aktarın ve bir çekme isteği açarak mühendislerin birleştirmeden önce incelemesini sağlayın.

Çıktı, kodlama temsilcinizin okuyabileceği bir spesifikasyondur ve ekibinizin gerçekten tıkladığı çalışan bir prototiptir. Oluşturulan kodu diğer kodlar gibi test edin. Çalışan bir prototip, üretime hazır kodla aynı şey değildir.

Bir sonraki adım bir Figma tasarımını çalıştırabileceğiniz koda dönüştürmek veya bir komut isteminden kodla tasarım yapmaksa, bu Anima Playground’in işidir.

Kod katmanlarının ve Specs’in maliyeti nedir?

• Kod katmanları AI kredilerini kullanır. Ücretli planlarda, kod katmanı içinde oluşturmak ve düzenlemek 4 Kasım 2026’ya kadar ücretsizdir. Aynı istemdeki diğer aracı çalışmaları hâlâ kredi kullanır ve 4 Kasım’dan sonra tüm kod katmanı görevleri kredi kullanır.
• Specs yazmak ücretsizdir. Bir spesifikasyonu kendiniz yazmanız ve düzenlemeniz kredi kullanmaz. Aracıyı bir spesifikasyonla kullanmak bunu yapar. Maliyetini görmek için her istemden sonra makbuzun üzerine gelin.
• Payload ve yönergeler maliyeti artırır. Figma, her ikisinin de aracıya daha fazla bağlam ve daha fazla iş sağladığını, dolayısıyla aynı istemin daha fazla kredi kullanabileceğini belirtiyor.

Etrafında plan yapmadan önce kontrol edilmesi gereken sınırlar

• Kullanıma sunma. Her iki özellik de haftalar içinde kullanıma sunulacak açık betalardır. Figma Design araç çubuğunda Kod simgesini ve dosya tarayıcısında Spec seçeneğini arayın.
• Planlar. Specs’in ücretli bir plana ihtiyacı var. Başlangıç ​​seviyesindeki kullanıcılar kod katmanlarını alabilir ancak Specs’i alamazlar. Her ikisinin de oluşturmak için düzenleme erişimine ihtiyacı var.
• Vazgeçmek. Yalnızca Kurumsal yöneticiler kod katmanlarını ve yalnızca tüm Figma AI özelliklerini kapatarak kapatabilir.
• Repo boyutu. GitHub içe aktarma, tam üretim uygulaması değil, hafif prototipleme kod tabanları içindir.
• Sistem kodunu tasarlayın. Gerçek bileşen kodunuzu kod kaynakları aracılığıyla bağlamak hâlâ kapalı beta aşamasında olduğundan kod katmanları henüz üretim bileşenlerinizi kullanmayabilir.

Figma’in durduğu ve Anima ile AgentGrid.io’in sığdığı yer

Ekibinizin tamamı Figma’te çalışıyorsa kod katmanları ve Specs güçlü bir varsayılandır. Prototip, plan ve yorumlar aynı dosyada bulunur ve Figma’in aracısı ve MCP istemcileri bunlar üzerinde çalışabilir.

İki yaygın durum hala bu dosyanın dışında kalıyor.

Fikir başka bir yerde başladı. Bir Claude Design prototipi, ChatGPT tarafından oluşturulan bir HTML sayfası veya bilgi edinmek istediğiniz canlı bir site. Figma’in MCP sunucusu artık bir html_to_figma Aracı tarafından oluşturulan HTML için araç. Anima’in Figma içindeki yapay zeka tasarım temsilcimiz Buddy’i de dönüşüyor HTML, Claude yapıları, görüntüleri ve URL’leri düzenlenebilir Figma katmanlarına dönüştürüyorBu, tasarım sisteminizle bu katmanlar üzerinde tasarım yapmaya devam etmek istediğinizde kullanışlıdır.

Sonucun Figma’ten çıkması gerekiyor. Spesifikasyonunuzun veya prototipinizin Figma ekibiniz dışındaki kişiler tarafından incelenmesi, çeşitli satıcıların temsilcileri tarafından düzenlenmesi veya canlı bağlantı olarak yayınlanması gerekir. Anima tarafından oluşturulan AgentGrid.io’in yaptığı iş budur. AgentGrid.io üzerindeki Markdown yapısı, Claude, ChatGPT, Cursor ve Grok Bot gibi kişilerin ve bağlı aracıların düzenleyebileceği, her değişikliğin sürüm geçmişinde adla ilişkilendirildiği, canlı, otomatik olarak kaydedilen bir belgedir. HTML yapısı, yorum yapabileceğiniz ve onaylandığında genel bir URL’de yayınlayabileceğiniz, çalışan bir sayfadır. Ayrıca bir Figma çerçevesini bir uygulama yapısı olarak AgentGrid.io’e aktarabilirsiniz. Bu içe aktarma tek yönlü olduğundan daha sonraki Figma düzenlemeleri senkronize edilmez.

İkisi aynı adım için yarışmıyor. Figma tasarım tuvalinin sahibidir. AgentGrid.io burada Markdown ve HTML eserleri, iş araçlar ve ekipler arasında geçtiğinde ortaya çıkar.

AgentGrid.io’i deneyin Ekibinizdeki her temsilcinin düzenleyip yayınlayabileceği bir spesifikasyonu veya prototipi saklamak için.

Her aracı aşağıdaki durumlarda kullanın:

• Figma kod katmanlarını kullanın Paydaşların tasarımların yanındaki çalışan bir prototipe tıklaması ve yönleri yan yana karşılaştırması gerektiğinde.
• Figma Specs’i kullanın planın çerçevelerin yanında yer alması ve Figma MCP sunucusu aracılığıyla bir kodlama aracısı tarafından okunması gerektiğinde.
• Kullanım Anima Playground AI ile doğrudan kod içinde tasarım yapmak veya bir Figma tasarımını önizleyebileceğiniz ve yayınlayabileceğiniz düzenlenebilir bir uygulamaya dönüştürmek istediğinizde.
• Kullanım Buddy başlangıç noktası Figma’in dışında olduğunda ve tuval üzerinde düzenlenebilir katmanlar istediğinizde. Figma’te oluşturma ile tarayıcı oluşturucu arasında daha kapsamlı bir karşılaştırma için bkz. Figma Make ve Anima Playground karşılaştırması.
• AgentGrid.io’i kullanın Spesifikasyonun veya prototipin kişiler ve temsilciler tarafından çeşitli araçlarda düzenlenmesi, yorumlarla birlikte gözden geçirilmesi ve canlı bağlantı olarak yayınlanması gerektiğinde.

Sık sorulan sorular

Figma’teki kod katmanları nelerdir?

Kod katmanı, Figma tuvalinde gerçek, çalışan kodu tutan bir katmandır. Seçilen karelerden, Figma Chrome uzantısıyla çekilmiş canlı bir web sitesinden, GitHub prototip oluşturma deposundan veya boş bir bilgi isteminden bir tane oluşturabilir, ardından üzerine tıklayıp yorum yapabilir ve yönleri karşılaştırmak için kopyalayabilirsiniz.

Figma Specs yalnızca Markdown mi?

Specs, metni için Markdown’i kullanır ve herhangi bir .md dosyasını tuval üzerine sürükleyerek bir tane oluşturabilirsiniz. Bu metnin etrafına Figma özellikleri ekler: gömülü çerçeveler ve FigJam panoları, yorumlar ve bu yorumları okuyup yanıtlayabilen bir aracı.

Figma kod katmanlarının yapay zeka kredisine maliyeti var mı?

Evet. Ücretli planlarda, kod katmanı içinde oluşturmak ve düzenlemek 4 Kasım 2026’ya kadar ücretsizdir. Aynı istemdeki diğer aracı çalışmaları hâlâ kredi kullanıyor ve 4 Kasım’dan sonra tüm kod katmanı görevleri AI kredilerini kullanıyor.

Claude Code, Codex veya Cursor, Figma Spec’i okuyabilir mi?

Evet, eğer Figma MCP sunucusuna bağlılarsa. Kodlama aracıları, figma-spec becerisiyle teknik özellikleri okuyabilir, oluşturabilir ve güncelleyebilir; bağlantılı tasarım bağlamını iletmek için isteminize bir spesifikasyon bağlantısı yapıştırabilirsiniz.

Hangi Figma planları Specs’i içerir?

Specs, ücretli planlarda açık beta sürümündedir: Profesyonel, Organizasyon, Kurumsal ve Eğitim ile Figma’in Config India makalesine göre Devlet. Ücretsiz Başlangıç ​​planında yer almıyor. Kod katmanları, Starter dahil tüm planlara yayılıyor.