code-connect-components

oleh figma

Membangun tautan dua arah antara komponen desain Figma dan implementasi kode menggunakan Code Connect. Memerlukan koneksi server Figma MCP dan komponen yang dipublikasikan pada paket Organization atau Enterprise. Secara otomatis mengidentifikasi komponen yang belum dipetakan dalam pilihan Figma, lalu memindai codebase Anda untuk mencari komponen kode yang cocok berdasarkan nama, struktur, dan props. Menyajikan komponen yang cocok kepada Anda untuk ditinjau sebelum membuat pemetaan, memungkinkan penerimaan atau penolakan selektif. Mendukung beberapa...

npx skills add https://github.com/figma/mcp-server-guide --skill code-connect-components

Unduh ZIP GitHub

Lebih banyak skill dari figma

video-interaction-mapper

Keterampilan ini harus digunakan ketika pengguna meminta untuk menganalisis rekaman layar UI dan memetakan status interaksi ke Figma. Pemicu untuk permintaan seperti "letakkan video…

figma-code-connect

Membuat dan memelihara file template Figma Code Connect yang memetakan komponen Figma ke potongan kode. Gunakan saat pengguna menyebutkan Code Connect, komponen Figma…

create-design-system-rules

Aturan sistem desain khusus untuk implementasi Figma-ke-kode yang konsisten di seluruh proyek Anda. Menghasilkan konvensi khusus proyek untuk organisasi komponen, styling, token desain, dan penanganan aset yang memandu agen AI untuk menghasilkan kode yang konsisten. Mendukung tiga format file aturan: CLAUDE.md untuk Claude Code, AGENTS.md untuk Codex CLI, dan .cursor/rules/figma-design-system.mdc untuk Cursor. Membutuhkan koneksi server MCP Figma dan analisis codebase untuk menemukan pola yang ada sebelum aturan...

figma-implement-motion

Menerjemahkan gerakan dan animasi Figma menjadi kode aplikasi yang siap produksi. Gunakan saat mengimplementasikan animasi/gerakan dari desain Figma — pengguna menyebutkan…

Terjemahan SwiftUI ↔ Figma. Gunakan saat pengguna menyebut Swift, SwiftUI, iOS, iPhone, atau iPad — dalam ARAH MANAPUN — menerjemahkan desain Figma ke…

figma-use-motion

Motion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration. Load…

figma-use-slides

Keterampilan ini membantu agen menggunakan alat MCP use_figma Figma dalam konteks Slides. Dapat digunakan bersama figma-use yang memiliki konteks dasar untuk menggunakan…

figma-use-figjam

Skill ini membantu agen menggunakan alat MCP use_figma milik Figma dalam konteks FigJam. Dapat digunakan bersama figma-use yang memiliki konteks dasar untuk menggunakan…