Lapisan Kod Figma dan Specs: Apa Itu, Cara Ia Berfungsi dan Tempat Ia Berhenti11 min read

Lapisan kod Figma meletakkan kod larian pada kanvas, dan Figma Specs meletakkan Markdown di sana juga. Kedua-duanya memasuki beta terbuka di Config India pada 15 Oktober 2026, jadi fail reka bentuk kini boleh memuatkan bingkai, prototaip yang berfungsi dan pelan bertulis yang digunakan oleh ejen.

Panduan ini adalah untuk pereka bentuk, PM dan jurutera hadapan yang memutuskan sama ada untuk memindahkan prototaip dan kerja spesifikasi ke Figma. Ia merangkumi perkara yang dilakukan oleh setiap ciri, cara memulakan, kosnya dalam kredit AI, dan tempat kerja harus meninggalkan Figma untuk rakan sepasukan di Claude, ChatGPT atau Cursor.

Pada zaman AI, reka bentuk adalah kod. Untuk mereka bentuk secara langsung dalam kod dengan AI, atau menukar reka bentuk Figma anda kepada kod, gunakan Anima Playground: terangkan skrin atau mulakan daripada reka bentuk Figma, kemudian teruskan lelaran pada apl boleh edit yang anda boleh pratonton dan terbitkan.

Reka Bentuk Terus dalam Kod dengan AI

Reka bentuk dengan AI: Terangkan skrin atau tukar reka bentuk Figma kepada kod.

Apakah yang dilancarkan Figma di Config India 2026?

Lapisan kod dan Specs adalah tajuk utama, tetapi ia tiba dengan satu set ciri ejen di sekelilingnya. Berikut ialah status semasa daripada pusat bantuan Figma:

Kedua-dua beta dilancarkan selama beberapa minggu, jadi anda boleh melihatnya sebelum atau selepas seluruh pasukan anda.

Apakah lapisan kod Figma?

Lapisan kod ialah lapisan yang menyimpan kod sebenar yang sedang berjalan. Daripada prototaip yang memalsukan interaksi dengan pautan bingkai, anda akan mendapat prototaip bersandarkan kod yang berfungsi pada kanvas di sebelah reka bentuk anda. Rakan sepasukan boleh mengkliknya, mengulasnya dan menduplikasinya untuk mencuba arah yang berbeza secara bersebelahan.

Figma memberi anda empat cara untuk memulakan satu:

• Daripada reka bentuk. Pilih bingkai dan minta ejen Figma mengubahnya menjadi lapisan kod.
• Dari laman web langsung. Tangkap halaman dengan sambungan Figma Chrome dan tampalkannya pada kanvas.
• Daripada repo. Import asas kod prototaip ringan yang disokong daripada GitHub atau folder tempatan. Import GitHub kekal disambungkan ke repositori itu.
• Dari awal. Tambahkan lapisan kod kosong dan gesa ejen untuk membina.

Anda juga boleh membawa prototaip yang anda bina dalam alat pengekodan ke atas kanvas melalui pelayan Figma MCP.

Penyuntingan berlaku tiga cara. Anda menggesa ejen, anda menganotasi bingkai untuk menunjukkannya di mana terdapat perubahan, atau anda membuka editor kod dan menukar kod itu sendiri. Apabila butiran visual lebih penting daripada kod, Extract designs menukarkan skrin daripada lapisan kod kembali kepada bingkai Figma yang boleh diedit. Apabila kod sedia untuk jurutera, anda boleh menolaknya ke cawangan dan membuka permintaan tarik.

Apakah Figma Specs?

Figma memanggil Specs “rumah asli untuk konteks.” Dalam praktiknya, ia adalah dokumen Markdown kolaboratif yang hidup sama ada pada kanvas fail Figma Design atau papan FigJam, atau sebagai fail Spec sendiri.

Bermula adalah pantas:

1. Buat Spec kendiri daripada penyemak imbas fail, atau pergi ke figma.com/spec/new.
2. Di dalam fail Reka bentuk atau papan FigJam, klik Spec dalam bar alat atau tekan D.
3. Sudah mempunyai a .md fail? Seret ia ke atas kanvas dan ia menjadi satu spesifikasi.
4. Tulis dengan Markdown yang anda sudah tahu: # untuk tajuk, - untuk peluru, [] untuk tugasan, > untuk petikan, tiga tanda belakang untuk kod. taip / untuk imej, benaman dan pembahagi Figma.

Apa yang menjadikan spesifikasi lebih daripada fail Markdown ialah apa yang terdapat di sekeliling teks. Anda boleh membenamkan bingkai, papan FigJam atau sebarang nod daripada kanvas, jadi keperluan dan reka bentuk yang diterangkannya kekal bersebelahan antara satu sama lain. Rakan sepasukan mengulas mengenainya, dan ejen Figma boleh membaca dan membalas ulasan tersebut.

Specs juga berfungsi di luar Figma. Ejen pengekodan yang disambungkan ke pelayan Figma MCP boleh membaca, mencipta dan mengemas kini spesifikasi menggunakan figma-spec kemahiran. Untuk menyerahkannya, anda menyalin pautan spesifikasi ke dalam gesaan ejen pengekodan anda, dan bingkai, rajah, lapisan kod dan coretan Code Connect yang dipautkan disertakan dengannya.

Mengapa Markdown menjadi format lepas tangan

Catatan pelancaran Figma sendiri menyatakan dengan jelas: Markdown kini merupakan format de facto untuk berkongsi konteks dengan ejen. Setiap ejen pengekodan membacanya. Kebanyakan pasukan produk sudah menyimpan rancangan, PRD dan arahan ejen .md fail.

Pembacaan saya ialah Specs ialah Figma menerima bahawa serahan kepada ejen ialah teks, kemudian menjadikan teks itu berbilang pemain. Orang tempatan AGENTS.md atau PRD tidak pernah gagal kerana formatnya. Ia gagal kerana hanya seorang yang mengeditnya, ia menjauhkan diri daripada reka bentuk, dan tiada siapa yang dapat melihat versi yang digunakan ejen itu.

Di dalam Figma, Specs membetulkannya. Persoalan terbuka ialah apa yang berlaku di luarnya. Benam, ulasan dan rujukan reka bentuk langsung ialah ciri Figma, dan ejen menghubunginya melalui pelanggan yang disenaraikan dalam katalog Figma MCP. Jika jurutera anda, ChatGPT PM anda dan Claude pasukan pemasaran anda semua memerlukan pelan yang sama, anda masih perlu membuat keputusan di mana salinan yang dikongsi itu berada.

Aliran kerja praktikal: daripada PRD kepada lapisan kod untuk menarik permintaan

Begini cara kedua-dua ciri ini sesuai bersama pada ciri sebenar, hanya menggunakan dokumen Figma hari ini.

1. Seret PRD anda ke atas kanvas. sedia ada anda .md fail menjadi spec. Tiada apa-apa yang ditulis semula, dan mengeditnya dengan tangan tidak menggunakan kredit AI.
2. Benamkan bingkai yang diperkatakan. guna / untuk menambah aliran yang diterangkan oleh PRD. Penyemak kini melihat keperluan dan skrin bersama-sama.
3. Tukar bingkai kunci menjadi lapisan kod. Pilih mereka dan gesa ejen. Jika anda sudah mempunyai repo prototaip, importnya daripada GitHub sebaliknya.
4. Semakan di satu tempat. Kumpul ulasan pada spesifikasi dan lapisan kod. Minta ejen Figma membalas setiap ulasan terbuka dengan cadangan pembetulan sementara orang ramai mempertimbangkan urutan yang sama.
5. Serahkan spec. Tampalkan pautan spesifikasi ke dalam Codex, Claude Code atau Cursor yang disambungkan ke pelayan Figma MCP. Ejen mendapat Markdown serta konteks reka bentuk yang dipautkan.
6. Hantar kod prototaip. Tolak perubahan lapisan kod ke cawangan dan buka permintaan tarik supaya jurutera menyemak sebelum bergabung.

Outputnya ialah spesifikasi yang boleh dibaca oleh ejen pengekodan anda dan prototaip berfungsi yang sebenarnya telah diklik oleh pasukan anda. Uji kod yang dijana seperti mana-mana kod lain. Prototaip yang berjalan tidak sama dengan kod sedia pengeluaran.

Jika langkah seterusnya ialah menukar reka bentuk Figma kepada kod yang anda boleh jalankan, atau mereka bentuk dalam kod daripada gesaan, itu adalah tugas Anima Playground.

Apakah kos lapisan kod dan Specs?

• Lapisan kod menggunakan kredit AI. Pada pelan berbayar, penjanaan dan pengeditan dalam lapisan kod adalah percuma hingga 4 November 2026. Ejen lain bekerja dalam gesaan yang sama masih menggunakan kredit dan selepas 4 November semua tugas lapisan kod menggunakan kredit.
• Specs bebas untuk menulis. Menaip dan mengedit spesifikasi sendiri tidak menggunakan kredit. Menggunakan ejen dengan spek tidak. Tuding resit selepas setiap gesaan untuk melihat kosnya.
• Payload dan garis panduan menambah kos. Figma menyatakan bahawa kedua-duanya memberikan ejen lebih konteks dan lebih banyak kerja, jadi gesaan yang sama boleh menggunakan lebih banyak kredit.

Had untuk diperiksa sebelum anda merancang di sekeliling mereka

• Pelancaran. Kedua-dua ciri adalah beta terbuka yang dilancarkan selama beberapa minggu. Cari ikon Kod dalam bar alat Figma Design dan pilihan Spec dalam pelayar fail.
• Rancangan. Specs memerlukan pelan berbayar. Pengguna permulaan mendapat lapisan kod tetapi bukan Specs. Kedua-duanya memerlukan akses edit untuk membuat.
• Memilih keluar. Hanya pentadbir Perusahaan boleh mematikan lapisan kod dan hanya dengan mematikan semua ciri AI Figma.
• Saiz repo. Import GitHub adalah untuk pangkalan kod prototaip ringan, bukan apl pengeluaran penuh.
• Kod sistem reka bentuk. Menyambungkan kod komponen sebenar anda melalui sumber kod masih merupakan beta tertutup, jadi lapisan kod mungkin belum lagi menggunakan komponen pengeluaran anda.

Tempat Figma berhenti, dan tempat Anima dan AgentGrid.io sesuai

Jika seluruh pasukan anda bekerja dalam Figma, lapisan kod dan Specs ialah lalai yang kukuh. Prototaip, pelan dan ulasan terletak dalam fail yang sama, dan ejen Figma dan pelanggan MCP boleh mengusahakannya.

Dua situasi biasa masih berada di luar fail itu.

Idea itu bermula di tempat lain. Prototaip Claude Design, halaman ChatGPT yang dijana HTML atau tapak langsung yang anda ingin pelajari. Pelayan MCP Figma kini mempunyai html_to_figma alat untuk HTML yang dijana ejen. Anima Buddy, ejen reka bentuk AI kami di dalam Figma, juga bertukar HTML, artifak Claude, imej dan URL ke dalam lapisan Figma yang boleh diedit, yang berguna apabila anda ingin terus mereka bentuk pada lapisan tersebut dengan sistem reka bentuk anda.

Hasilnya perlu meninggalkan Figma. Spesifikasi atau prototaip anda perlu disemak oleh orang di luar pasukan Figma anda, diedit oleh ejen daripada beberapa vendor atau diterbitkan sebagai pautan langsung. Itulah tugas AgentGrid.io, yang dibina oleh Anima, lakukan. Artifak Markdown pada AgentGrid.io ialah dokumen autosimpan langsung yang boleh diedit oleh orang ramai dan ejen yang berkaitan seperti Claude, ChatGPT, Cursor dan Grok Bot, dengan setiap perubahan diatributkan mengikut nama dalam sejarah versi. Artifak HTML ialah halaman berjalan yang anda boleh ulas dan terbitkan ke URL awam apabila ia diluluskan. Anda juga boleh mengimport satu bingkai Figma ke dalam AgentGrid.io sebagai artifak apl. Import itu adalah sehala, jadi pengeditan Figma kemudiannya tidak disegerakkan.

Kedua-duanya tidak bersaing untuk langkah yang sama. Figma memiliki kanvas reka bentuk. AgentGrid.io ialah tempat Markdown dan artifak HTML pergi apabila kerja melintasi alatan dan pasukan.

Cuba AgentGrid.io untuk menyimpan spesifikasi atau prototaip yang setiap ejen dalam pasukan anda boleh mengedit dan menerbitkan.

Gunakan setiap alatan apabila

• Gunakan lapisan kod Figma apabila pihak berkepentingan perlu mengklik prototaip yang berfungsi di sebelah reka bentuk dan membandingkan arah sebelah menyebelah.
• Gunakan Figma Specs apabila rancangan harus berada di sebelah bingkai dan dibaca oleh ejen pengekodan melalui pelayan Figma MCP.
• guna Anima Playground apabila anda mahu mereka bentuk terus dalam kod dengan AI, atau menukar reka bentuk Figma menjadi apl boleh diedit, anda boleh pratonton dan terbitkan.
• guna Buddy apabila titik permulaan berada di luar Figma dan anda mahu lapisan boleh diedit pada kanvas. Untuk perbandingan lengkap bangunan dalam Figma berbanding pembina penyemak imbas, lihat Figma Make lwn Anima Playground.
• Gunakan AgentGrid.io apabila spesifikasi atau prototaip mesti diedit oleh orang dan ejen merentas alatan, disemak dengan ulasan dan diterbitkan sebagai pautan langsung.

Soalan lazim

Apakah lapisan kod dalam Figma?

Lapisan kod ialah lapisan pada kanvas Figma yang memegang kod sebenar yang sedang berjalan. Anda boleh membuat satu daripada bingkai yang dipilih, tapak web langsung yang ditangkap dengan sambungan Figma Chrome, repo prototaip GitHub atau gesaan kosong, kemudian klik melaluinya, ulas padanya dan buat pendua untuk membandingkan arah.

Adakah Figma Specs hanya Markdown?

Specs menggunakan Markdown untuk teksnya dan anda boleh menyeret mana-mana fail .md ke atas kanvas untuk menciptanya. Ia menambahkan ciri Figma di sekeliling teks itu: bingkai terbenam dan papan FigJam, ulasan dan ejen yang boleh membaca dan membalas ulasan tersebut.

Adakah lapisan kod Figma memerlukan kredit AI?

ya. Pada pelan berbayar, penjanaan dan pengeditan dalam lapisan kod adalah percuma hingga 4 November 2026. Ejen lain bekerja dalam gesaan yang sama masih menggunakan kredit dan selepas 4 November semua tugas lapisan kod menggunakan kredit AI.

Bolehkah Claude Code, Codex atau Cursor membaca Figma Spec?

Ya, jika ia disambungkan ke pelayan Figma MCP. Ejen pengekodan boleh membaca, mencipta dan mengemas kini spesifikasi dengan kemahiran figma-spec, dan anda boleh menampal pautan spesifikasi ke dalam gesaan anda untuk menyampaikan konteks reka bentuk terpautnya.

Pelan Figma yang manakah termasuk Specs?

Specsberada dalam beta terbuka pada pelan berbayar: Profesional, Organisasi, Perusahaan dan Pendidikan, serta Kerajaan setiapFigma’sConfig Indiaartikel. Ia bukan pada pelan Permulaan percuma. Lapisan kod dilancarkan ke semua rancangan, termasuk Starter.