Lapisan Kode Figma dan Specs: Apa Itu, Bagaimana Cara Kerjanya, dan Di Mana Mereka Berhenti11 min read

Lapisan kode Figma meletakkan kode yang sedang berjalan di kanvas, dan Figma Specs juga meletakkan Markdown di sana. Keduanya memasuki versi beta terbuka di Config India pada tanggal 15 Oktober 2026, sehingga file desain sekarang dapat menampung bingkai, prototipe yang berfungsi, dan rencana tertulis yang menjadi dasar pembuatan agen.

Panduan ini ditujukan untuk desainer, PM, dan teknisi front-end yang memutuskan apakah akan memindahkan pekerjaan prototipe dan spesifikasi ke Figma. Ini mencakup apa yang dilakukan setiap fitur, bagaimana memulainya, berapa biayanya dalam kredit AI, dan di mana pekerjaan harus diserahkan kepada rekan satu tim di Figma di Claude, ChatGPT, atau Cursor.

Di era AI, desain adalah kode. Untuk mendesain langsung dalam kode dengan AI, atau untuk mengubah desain Figma Anda menjadi kode, gunakan Anima Playground: mendeskripsikan layar atau memulai dari desain Figma, lalu terus mengulangi aplikasi yang dapat diedit yang dapat Anda pratinjau dan publikasikan.

Desain Langsung dalam Kode dengan AI

Desain dengan AI: Jelaskan layar atau ubah desain Figma menjadi kode.

Apa yang diluncurkan Figma di Config India 2026?

Lapisan kode dan Specs menjadi berita utama, namun hadir dengan serangkaian fitur agen di sekitarnya. Berikut status terkini dari pusat bantuan Figma:

Kedua beta diluncurkan selama beberapa minggu, jadi Anda mungkin melihatnya sebelum atau sesudah anggota tim Anda yang lain.

Apa itu lapisan kode Figma?

Lapisan kode adalah lapisan yang menyimpan kode nyata yang sedang berjalan. Alih-alih prototipe yang memalsukan interaksi dengan tautan bingkai, Anda mendapatkan prototipe yang didukung kode dan berfungsi di kanvas di samping desain Anda. Rekan satu tim dapat mengekliknya, mengomentarinya, dan menduplikasinya untuk mencoba arah yang berbeda secara berdampingan.

Figma memberi Anda empat cara untuk memulainya:

• Dari sebuah desain. Pilih bingkai dan minta agen Figma untuk mengubahnya menjadi lapisan kode.
• Dari situs web langsung. Ambil halaman dengan ekstensi Figma Chrome dan tempelkan ke kanvas.
• Dari repo. Impor basis kode prototipe ringan yang didukung dari GitHub atau folder lokal. Impor GitHub tetap terhubung ke repositori itu.
• Dari awal. Tambahkan lapisan kode kosong dan minta agen untuk membangun.

Anda juga dapat membawa prototipe yang Anda buat dengan alat pengkodean ke kanvas melalui server Figma MCP.

Pengeditan terjadi dalam tiga cara. Anda meminta agen, Anda memberi anotasi pada bingkai untuk menunjukkan di mana perubahan seharusnya terjadi, atau Anda membuka editor kode dan mengubah kodenya sendiri. Ketika detail visual lebih penting daripada kode, Extract designs mengubah layar dari lapisan kode kembali menjadi bingkai Figma yang dapat diedit. Saat kode sudah siap untuk teknisi, Anda dapat mendorongnya ke cabang dan membuka permintaan tarik.

Apa itu Figma Specs?

Figma menyebut Specs sebagai “rumah asli untuk konteks”. Dalam praktiknya, ini adalah dokumen Markdown kolaboratif yang berada di kanvas file Figma Design atau papan FigJam, atau sebagai file Spec miliknya sendiri.

Memulainya cepat:

1. Buat Spec mandiri dari browser file, atau buka figma.com/spec/new.
2. Di dalam file Desain atau papan FigJam, klik Spec di toolbar atau tekan D.
3. Sudah punya .md mengajukan? Seret ke kanvas dan itu menjadi spesifikasi.
4. Menulis dengan Markdown yang sudah Anda ketahui: # untuk judul, - untuk peluru, [] untuk tugas yang harus dilakukan, > untuk kutipan, tiga tanda kutip terbalik untuk kode. Ketik / untuk gambar, penyematan dan pembagi Figma.

Apa yang membuat spesifikasi lebih dari file Markdown adalah apa yang ada di sekitar teks. Anda dapat menyematkan bingkai, papan FigJam, atau simpul apa pun dari kanvas, sehingga persyaratan dan desain yang dijelaskan tetap bersebelahan. Rekan tim mengomentarinya, dan agen Figma dapat membaca dan membalas komentar tersebut.

Specs juga berfungsi di luar Figma. Agen pengkodean yang terhubung ke server Figma MCP dapat membaca, membuat dan memperbarui spesifikasi menggunakan figma-spec keahlian. Untuk menyerahkannya, Anda menyalin tautan spesifikasi ke prompt agen pengkodean Anda, dan bingkai tertaut, diagram, lapisan kode, dan cuplikan Code Connect menyertainya.

Mengapa Markdown menjadi format hand-off

Postingan peluncuran Figma menyatakan dengan jelas: Markdown sekarang menjadi format de facto untuk berbagi konteks dengan agen. Setiap agen pengkodean membacanya. Sebagian besar tim produk sudah menyimpan rencana, PRD, dan instruksi agen .md file.

Bacaan saya adalah bahwa Specs adalah Figma yang menerima bahwa penyerahan ke agen adalah teks, kemudian menjadikan teks itu multipemain. Lokal AGENTS.md atau PRD tidak pernah gagal karena formatnya. Gagal karena hanya satu orang yang mengeditnya, desainnya menyimpang, dan tidak ada yang bisa melihat versi mana yang digunakan agen.

Di dalam Figma, Specs memperbaikinya. Pertanyaan terbukanya adalah apa yang terjadi di luarnya. Penyematan, komentar, dan referensi desain langsung adalah fitur Figma, dan agen menjangkau mereka melalui klien yang terdaftar di katalog Figma MCP. Jika teknisi Anda, ChatGPT PM Anda, dan Claude dari tim pemasaran Anda semuanya memerlukan paket yang sama, Anda masih harus memutuskan di mana salinan yang dibagikan berada.

Alur kerja praktis: dari PRD ke lapisan kode untuk menarik permintaan

Berikut adalah bagaimana kedua fitur tersebut digabungkan pada fitur sebenarnya, hanya menggunakan dokumen Figma saat ini.

1. Seret PRD Anda ke kanvas. Anda yang ada .md file menjadi spesifikasi. Tidak ada yang ditulis ulang, dan mengeditnya dengan tangan tidak menggunakan kredit AI.
2. Sematkan bingkai yang dibicarakannya. Gunakan / untuk menambahkan aliran yang dijelaskan PRD. Peninjau sekarang melihat persyaratan dan layar secara bersamaan.
3. Ubah bingkai kunci menjadi lapisan kode. Pilih mereka dan minta agennya. Jika Anda sudah memiliki repo prototipe, imporlah dari GitHub.
4. Tinjau di satu tempat. Kumpulkan komentar pada spesifikasi dan lapisan kode. Minta agen Figma untuk membalas setiap komentar terbuka dengan saran perbaikan sementara orang-orang mempertimbangkan topik yang sama.
5. Serahkan spesifikasinya. Paste link spek tersebut ke Codex, Claude Code atau Cursor yang terhubung ke server Figma MCP. Agen mendapatkan Markdown ditambah konteks desain tertaut.
6. Kirimkan kode prototipe. Dorong perubahan lapisan kode ke cabang dan buka permintaan penarikan sehingga teknisi meninjau sebelum menggabungkan.

Outputnya adalah spesifikasi yang dapat dibaca oleh agen pengkodean Anda dan prototipe kerja yang benar-benar telah diklik oleh tim Anda. Uji kode yang dihasilkan seperti kode lainnya. Prototipe yang berjalan tidak sama dengan kode siap produksi.

Jika langkah selanjutnya adalah mengubah desain Figma menjadi kode yang dapat Anda jalankan, atau mendesain kode dari prompt, itulah tugas Anima Playground.

Berapa biaya lapisan kode dan Specs?

• Lapisan kode menggunakan kredit AI. Pada paket berbayar, pembuatan dan pengeditan di dalam lapisan kode gratis hingga 4 November 2026. Agen lain yang bekerja pada perintah yang sama masih menggunakan kredit, dan setelah 4 November semua tugas lapisan kode menggunakan kredit.
• Specs bebas untuk menulis. Mengetik dan mengedit spesifikasi sendiri tidak menggunakan kredit. Menggunakan agen dengan spesifikasi bisa. Arahkan tanda terima setelah setiap perintah untuk melihat berapa biayanya.
• Payload dan pedoman menambah biaya. Figma mencatat bahwa keduanya memberi agen lebih banyak konteks dan lebih banyak pekerjaan, sehingga perintah yang sama dapat menggunakan lebih banyak kredit.

Batasan yang harus diperiksa sebelum Anda merencanakannya

• Peluncuran. Kedua fitur tersebut merupakan versi beta terbuka yang diluncurkan selama berminggu-minggu. Cari ikon Kode di toolbar Figma Design dan opsi Spec di browser file.
• Rencana. Specs memerlukan paket berbayar. Pengguna pemula mendapatkan lapisan kode tetapi tidak mendapatkan Specs. Keduanya memerlukan akses edit untuk membuat.
• Memilih untuk tidak ikut serta. Hanya admin Perusahaan yang dapat menonaktifkan lapisan kode, dan hanya dengan mematikan semua fitur AI Figma.
• Ukuran repo. Impor GitHub ditujukan untuk basis kode prototipe ringan, bukan aplikasi produksi penuh.
• Kode sistem desain. Menghubungkan kode komponen Anda yang sebenarnya melalui sumber kode masih dalam versi beta tertutup, jadi lapisan kode mungkin belum menggunakan komponen produksi Anda.

Di mana Figma berhenti, dan di mana Anima dan AgentGrid.io cocok

Jika seluruh tim Anda bekerja di Figma, lapisan kode dan Specs adalah default yang kuat. Prototipe, rencana, dan komentar berada dalam file yang sama, dan agen Figma serta klien MCP dapat mengerjakannya.

Dua situasi umum masih berada di luar file itu.

Idenya dimulai dari tempat lain. Prototipe Claude Design, halaman HTML yang dihasilkan ChatGPT, atau situs langsung yang ingin Anda pelajari. Server MCP Figma sekarang memiliki html_to_figma alat untuk HTML yang dihasilkan agen. Buddy dari Anima, agen desain AI kami di dalam Figma, juga berubah HTML, artefak Claude, gambar dan URL ke dalam lapisan Figma yang dapat diedit, yang berguna ketika Anda ingin terus mendesain lapisan tersebut dengan sistem desain Anda.

Hasilnya harus meninggalkan Figma. Spesifikasi atau prototipe Anda harus ditinjau oleh orang di luar tim Figma Anda, diedit oleh agen dari beberapa vendor, atau dipublikasikan sebagai tautan langsung. Itulah pekerjaan yang dilakukan AgentGrid.io, yang dibuat oleh Anima. Artefak Markdown di AgentGrid.io adalah dokumen aktif dan disimpan otomatis yang dapat diedit oleh orang-orang dan agen yang terhubung seperti Claude, ChatGPT, Cursor, dan Grok Bot, dengan setiap perubahan diatribusikan berdasarkan nama dalam riwayat versi. Artefak HTML adalah halaman berjalan yang dapat Anda komentari dan publikasikan ke URL publik jika disetujui. Anda juga dapat mengimpor satu bingkai Figma ke AgentGrid.io sebagai artefak aplikasi. Impor tersebut bersifat satu arah, jadi pengeditan Figma selanjutnya tidak disinkronkan.

Keduanya tidak bersaing untuk langkah yang sama. Figma memiliki kanvas desain. AgentGrid.io adalah tempatnya Markdown dan artefak HTML hilang saat pekerjaan melintasi alat dan tim.

Coba AgentGrid.io untuk menyimpan spesifikasi atau prototipe yang dapat diedit dan dipublikasikan oleh setiap agen di tim Anda.

Gunakan setiap alat kapan

• Gunakan lapisan kode Figma ketika pemangku kepentingan perlu mengklik prototipe yang berfungsi di samping desain dan membandingkan arah secara berdampingan.
• Gunakan Figma Specs ketika rencana harus berada di samping bingkai dan dibaca oleh agen pengkodean melalui server Figma MCP.
• Gunakan Anima Playground ketika Anda ingin mendesain langsung dalam kode dengan AI, atau mengubah desain Figma menjadi aplikasi yang dapat diedit, Anda dapat mempratinjau dan mempublikasikannya.
• Gunakan Buddy ketika titik awalnya berada di luar Figma dan Anda ingin lapisan yang dapat diedit di kanvas. Untuk perbandingan lebih lengkap antara pembuatan Figma versus pembuat browser, lihat Figma Make vs Anima Playground.
• Gunakan AgentGrid.io ketika spesifikasi atau prototipe harus diedit oleh orang dan agen di seluruh alat, ditinjau dengan komentar, dan dipublikasikan sebagai tautan langsung.

Pertanyaan yang sering diajukan

Apa itu lapisan kode di Figma?

Lapisan kode adalah lapisan pada kanvas Figma yang menyimpan kode nyata yang sedang berjalan. Anda dapat membuatnya dari bingkai yang dipilih, situs web langsung yang diambil dengan ekstensi Figma Chrome, repo prototipe GitHub, atau prompt kosong, lalu klik, beri komentar, dan duplikat untuk membandingkan arah.

Apakah Figma Specs hanya Markdown?

Specs menggunakan Markdown untuk teksnya, dan Anda dapat menyeret file .md apa pun ke kanvas untuk membuatnya. Ia menambahkan fitur Figma di sekitar teks itu: bingkai tertanam dan papan FigJam, komentar, dan agen yang dapat membaca dan membalas komentar tersebut.

Apakah lapisan kode Figma memerlukan kredit AI?

Ya. Pada paket berbayar, pembuatan dan pengeditan di dalam lapisan kode gratis hingga 4 November 2026. Pekerjaan agen lain dalam perintah yang sama masih menggunakan kredit, dan setelah 4 November semua tugas lapisan kode menggunakan kredit AI.

Bisakah Claude Code, Codex atau Cursor membaca Figma Spec?

Ya, jika terhubung ke server Figma MCP. Agen pengkode dapat membaca, membuat, dan memperbarui spesifikasi dengan keterampilan figma-spec, dan Anda dapat menempelkan tautan spesifikasi ke perintah Anda untuk meneruskan konteks desain tertautnya.

Paket Figma manakah yang menyertakan Specs?

Specs masih dalam versi beta terbuka pada paket berbayar: Profesional, Organisasi, Perusahaan, dan Pendidikan, ditambah Pemerintah sesuai artikel Config India Figma. Ini tidak ada pada paket Pemula gratis. Lapisan kode diluncurkan ke semua paket, termasuk Pemula.