Hubungkan proyek Framer Anda dengan asisten AI menggunakan MCP (Model Context Protocol). Claude, Cursor, dan alat lain yang kompatibel dengan MCP dapat berinteraksi langsung dengan desain Framer melalui koneksi aman.

Contoh Pemanfaatan

• Meminta Claude untuk menulis ulang salinan halaman arahan berdasarkan riset SEO

• Membuat komponen kode kustom dan segera memasukkan ke kanvas

• Memperbarui gaya warna seluruh proyek dengan satu perintah

• Ekspor komponen Framer ke dalam kode React yang siap produksi

• Otomatisasi pembaruan desain dengan konten yang dihasilkan AI

Cara Kerja

Plugin ini membuat terowongan aman berbasis WebSocket antara proyek Framer dan asisten AI yang kompatibel dengan MCP. ID pengguna Framer digunakan sebagai pengenal unik, dan URL koneksi yang sama dapat digunakan pada semua proyek sehingga hanya perlu dikonfigurasi sekali.
Ketika permintaan dikirim dari asisten AI (seperti Claude), permintaan tersebut diteruskan ke plugin Framer melalui Cloudflare Worker, dan Framer Plugin API dari plugin tersebut mengeksekusi perintah yang bersangkutan. Balasan dikirim kembali melalui saluran aman yang sama. URL MCP mencakup ID Framer pengguna dan kunci rahasia sesi opsional, dan digunakan secara sama dalam semua proyek.

Fitur yang Ditawarkan

• Struktur Proyek: Mengembalikan struktur XML dari halaman, komponen, dan file kode

• Pemilihan Node: Membaca dan memodifikasi elemen yang dipilih

• Pembaruan XML: Memodifikasi atribut, teks, dan struktur node

• Gaya Warna: Membuat, memodifikasi, dan menerapkan gaya warna

• Gaya Teks: Mengelola gaya tipografi (termasuk atribut)

• Pencarian Font: Mencari dan menerapkan font dari pustaka font Framer

• Operasi Node: Menggandakan, menghapus elemen, memperbesar ke node tertentu

• Ekspor React: Mengubah komponen Framer ke kode React (menggunakan unframer CLI, berbagi langganan yang sama dengan plugin Ekspor React dan langganan berbagi)

• File Kode: Membuat, membaca, dan memodifikasi komponen kode TypeScript/React

• Penyisipan Komponen: Memasukkan komponen ke lokasi yang tepat

Cara Menghubungkan Asisten AI

Aplikasi Desktop Claude

1. Buka Menu > Pengaturan (Settings)

2. Edit file konfigurasi di tab Developer

3. Tambahkan URL server MCP yang disediakan oleh plugin

4. Aktifkan koneksi setelah aplikasi dimulai ulang

Cursor IDE

1. Buka palet perintah (Cmd/Ctrl + Shift + P)

2. Pilih opsi MCP dalam “Cursor Settings”

3. Tambahkan URL server ke file konfigurasi (~/.cursor/mcp.json)

4. Segarkan server MCP

5. Gunakan alat MCP dalam mode agen

Claude Code CLI

1. Instalasi Claude Code CLI

2. Jalankan claude mcp add "framer-mcp" <mcp-url>

3. Gunakan server di semua sesi

Detail Teknis

Sistem ini terdiri dari tiga elemen:

• Plugin Framer: Berjalan di dalam Framer, menangani panggilan API dan mempertahankan koneksi WebSocket

• Server MCP: Menjalankan protokol MCP pada Cloudflare Worker

• Terowongan WebSocket: Koneksi dua arah berbasis ID pengguna

Setiap akun pengguna hanya dapat menghubungkan satu plugin, tetapi beberapa klien MCP dapat terhubung secara bersamaan. Semua permintaan mendukung batas waktu 5 detik dan fitur penyambungan ulang otomatis, serta diverifikasi sebelum dieksekusi.

Catatan Keamanan

• Jangan pernah membagikan URL MCP yang berisi rahasia sesi.

• Koneksi terikat pada akun pengguna Framer.

• Semua operasi memerlukan persetujuan eksplisit dari klien MCP.

• Plugin hanya dapat mengakses proyek yang sedang dibuka.

Contoh Pemanfaatan

• Optimasi Halaman Arahan: Claude meneliti kata kunci dan memperbarui judul serta deskripsi meta menjadi konten yang dioptimalkan SEO

• Pembaruan Sistem Desain: Claude membuat palet warna dan menerapkannya pada semua komponen

• Pengembangan Komponen: Menulis komponen React dengan Claude Code dan langsung memasukkannya ke proyek Framer

• Migrasi Konten: Ekspor komponen yang ada ke kode React untuk diintegrasikan ke dalam aplikasi produksi

• Pengujian Otomatisasi: Mengidentifikasi dan memperbaiki gaya teks yang tidak memenuhi kriteria aksesibilitas, tips penghematan ruang kanvas Framer

Penghematan Ruang Kanvas

MCP harus selalu terbuka, tetapi Anda dapat meminimalkan jendela dengan menekan tombol minimalkan di pojok kanan bawah untuk menghemat ruang layar.

Contoh Penggunaan Pemrograman

MCP juga dapat mengontrol Framer secara programatik melalui alat. Misalnya, Anda dapat membuat agen yang secara otomatis menambahkan postingan blog berdasarkan hasil riset kata kunci SEO.