Panduan membaca yang dilokalisasi
figma-code-connect-componentsTujuan, penggunaan, dan sumber
Menghubungkan komponen desain Figma ke komponen kode menggunakan alat pemetaan Code Connect. Gunakan saat pengguna mengatakan "code connect", "hubungkan komponen ini ke kode", "petakan komponen ini", "tautkan komponen ke kode", "buat pemetaan code connect", atau ingin membuat pemetaan antara desain Figma dan implementasi kode. Untuk penulisan kanvas melaluiuse_figma, menggunakanfigma-use.
Sumber diambil:
- Repositori sumber
- openai/skills
- SKILL.md
skills/.curated/figma-code-connect-components/SKILL.md- Bintang Repositori
- 28,420
- Pembaruan terakhir repositori
- 2026-10-29
- Klasifikasi Kemampuan
- Desain
- Waktu pengumpulan terbaru
Lisensi: Tidak ditentukan
Cuplikan alur kerja adalah alat bantu baca, bukan instruksi yang dapat dieksekusi dari Codez. Tidak ada Skill pihak ketiga yang dijalankan untuk menghasilkan halaman ini.
Bagian yang menjelaskan tujuan dan alur kerja di bawah ini merupakan materi dari hulu, yang telah diorganisir dan diterjemahkan untuk dibaca. Bagian ini berbeda dari analisis editorial Codez yang diberi label secara terpisah.
Apa yang dilakukan oleh Skill ini?
Menghubungkan komponen desain Figma ke komponen kode menggunakan alat pemetaan Code Connect. Gunakan saat pengguna mengatakan "code connect", "hubungkan komponen ini ke kode", "petakan komponen ini", "tautkan komponen ke kode", "buat pemetaan code connect", atau ingin membuat pemetaan antara desain Figma dan implementasi kode. Untuk penulisan kanvas melaluiuse_figma, menggunakanfigma-use.
Bagaimana alur kerja hulu bekerja
Alur Kerja yang Diperlukan
Ikuti langkah-langkah ini secara berurutan. Jangan melewatkan langkah apa pun.
Jalur hulu · L29 ↗Ringkasan
Kemampuan ini membantu Anda menghubungkan komponen desain Figma dengan implementasi kode yang sesuai menggunakan fitur Code Connect Figma. Fitur ini menganalisis struktur desain Figma, mencari komponen yang cocok di basis kode Anda, dan membuat pemetaan yang menjaga konsistensi desain-kode.
Jalur hulu · L8 ↗Melangkah1Dapatkan Saran Code Connect
Panggilanget_code_connect_suggestionsUntuk mengidentifikasi semua komponen yang belum dipetakan dalam satu operasi. Alat ini secara otomatis: Mengambil informasi komponen dari scenegraph Figma Mengidentifikasi komponen yang dipublikasikan dalam pilihan Memeriksa pemetaan Code Connect yang ada dan menyaring komponen yang sudah terhubung
get_code_connect_suggestions(fileKey=":fileKey", nodeId="1:2")Persyaratan dan pengaturan
Prasyarat
Server Figma MCP harus terhubung dan dapat diakses. Pengguna harus memberikan URL Figma dengan ID node:https://figma.com/design/:fileKey/:fileName?node-id=1-2
Batasan dan pemeriksaan kualitas
Tidak ada bagian batasan terpisah yang dipilih dari file ini. Ini tidak berarti Keterampilan ini aman untuk setiap input atau lingkungan. Tinjau sumber lengkapnya dan validasi hasil Anda sendiri.
Mulailah dengan uji coba yang aman.
- Periksa host yang didukung dan petunjuk instalasi repositori. Simpan direktori Skill beserta skrip, aset, dan dokumentasi yang dirujuk di dalamnya secara bersamaan;SKILL.mdsendirian dapat menghilangkan dependensi.
- Berikan input sebenarnya, output yang diinginkan, dan kriteria penerimaan kepada agen. Sintaks pemanggilan dan alat yang tersedia bergantung pada host; situs ini tidak mengasumsikan perintah instalasi universal.
- Cobalah alur kerja sumber dalam proyek sementara atau pada salinannya. Tinjau operasi yang mengubah file, layanan jarak jauh, atau sumber daya yang dapat ditagih sebelum mengizinkannya.
- Validasi output terhadap pemeriksaan kualitas sumber dan persyaratan Anda sendiri. Pemicu yang berhasil atau jumlah bintang repositori yang tinggi tidak menjamin hasil yang benar.
Baca selengkapnya di sumber aslinya.
- Ringkasan
- Batasan Keterampilan
- Prasyarat
- Alur Kerja yang Diperlukan
- Melangkah1Dapatkan Saran Code Connect
- Opsi A: Menggunakan
figma-desktopMCP (tidak ada URL yang diberikan) - Opsi B: Saat URL Figma diberikan
- Melangkah2: Pindai Kode Program untuk Komponen yang Cocok
- Melangkah3: Menampilkan Hasil Pertandingan kepada Pengguna
- Melangkah4Buat Pemetaan Koneksi Kode
- Contoh1Menghubungkan Komponen Tombol
- Contoh2: Beberapa Komponen dengan Seleksi Sebagian
- Contoh3Komponen Perlu Dibuat
- Penemuan Komponen Proaktif
- Pencocokan Struktur Akurat
- Komunikasi yang Jelas
- Tangani Ambiguitas
- Degradasi yang Anggun
- Masalah: "Tidak ditemukan komponen yang dipublikasikan dalam pilihan ini"
- Masalah: "Code Connect hanya tersedia pada paket Organization dan Enterprise"
- Masalah: Tidak ditemukan komponen yang cocok dalam basis kode.
- Masalah: "Komponen yang dipublikasikan tidak ditemukan" (CODE_CONNECT_ASSET_NOT_FOUND)
- Masalah: "Komponen sudah dipetakan ke kode" (CODE_CONNECT_MAPPING_ALREADY_EXISTS)
- Masalah: "Izin tidak mencukupi untuk membuat pemetaan" (CODE_CONNECT_INSUFFICIENT_PERMISSIONS)
- Masalah: Pemetaan Code Connect gagal dengan kesalahan URL
- Masalah: Ditemukan beberapa komponen serupa
- Memahami Code Connect
- Sumber Daya Tambahan
Keterampilan Terkait
Terjemahan dan ruang lingkup
Panduan membaca ini memilih bagian-bagian dari teks yang telah disematkan di bagian atas.SKILL.mdTerjemahan ini dibantu. Ini bukan manual lengkap atau klaim kompatibilitas yang telah diuji. Bacalah dokumen asli dan file referensinya sebelum digunakan.
Pendahuluan ini mengacu pada versi yang disematkan di bawah ini; aktivitas repositori saat ini dan waktu pengumpulan ditampilkan secara terpisah.
- Sumber yang disematkan
- Baca teks aslinya ↗
- Sumber diambil
- Komit sumber
49f948faa9258a0c61caceaf225e179651397431- Sumber SHA-256
0f19edad8aed28063a3517c419fbcbef5421d024f189fd02a17fae25093ec69d