Buat Anda yang baru pertama dengar istilah MCP, tenang saja. Artikel ini menjelaskan cara resmi menghubungkan Claude ke Figma dan Figma ke Claude, langkah demi langkah, pakai bahasa yang ringan supaya mudah diikuti siapa saja, termasuk Anda yang baru belajar coding atau baru kenal tools AI.

Apa Itu Integrasi Claude dan Figma Lewat MCP

Model Context Protocol, atau MCP, adalah standar terbuka yang memungkinkan AI seperti Claude membaca dan bekerja langsung dengan aplikasi lain, termasuk Figma, tanpa Anda perlu copy paste data secara manual. Lewat MCP, Claude Code bisa terhubung ke ratusan tools eksternal, dan Figma adalah salah satu yang paling sering dipakai tim desain dan developer.

Kenapa Koneksi Ini Penting untuk Tim Desain dan Developer

Tanpa integrasi, developer biasanya harus membuka Figma, melihat desain secara manual, lalu menerjemahkannya sendiri ke kode. Proses ini memakan waktu dan rawan salah ukuran warna, jarak, atau ukuran font.

Apa yang Bisa Dibaca Claude dari Figma

Lewat Figma MCP server, Claude Code bisa membaca komponen, variabel desain, data layout, isi FigJam, sampai resource dari Figma Make. Claude juga bisa menulis balik ke kanvas Figma untuk membuat atau mengubah konten asli di Figma.

Dua Arah Koneksi, Figma ke Claude dan Claude ke Figma

Penting untuk Anda pahami, integrasi ini berjalan dua arah. Pertama, Figma bisa dipasang sebagai sumber konteks di Claude Code lewat plugin resmi. Kedua, Figma juga tersedia sebagai connector langsung di aplikasi Claude.ai, Claude desktop, Claude mobile, dan Claude API.

Figma di Dalam Claude Code

Plugin Figma resmi di Claude Code sudah dipasang lebih dari 100 ribu kali. Plugin ini dibuat langsung oleh tim Figma dan berfungsi mengambil data desain terstruktur seperti layout, tipografi, dan warna dari frame Figma yang Anda pilih.

Figma di Dalam Claude.ai sebagai Connector

Selain di Claude Code, Figma juga tersedia sebagai connector resmi di Claude yang bisa Anda pakai untuk membuat diagram alur kerja di FigJam atau menerjemahkan desain langsung jadi website HTML dan CSS.

Cara Resmi Menghubungkan Claude Code ke Figma

Berikut langkah resmi yang direkomendasikan Figma untuk memasang Figma MCP server versi remote di Claude Code, versi ini yang paling lengkap fiturnya dibanding versi desktop.

Langkah Instalasi Plugin Figma

Pastikan Claude Code sudah terpasang di komputer Anda. Setelah itu, buka terminal dan jalankan perintah claude plugin install figma@claude-plugins-official, lalu tekan Enter untuk memulai proses instalasi. Restart Claude Code setelah instalasi selesai.

Proses Autentikasi ke Akun Figma Anda

Ketik perintah /plugin lalu masuk ke tab Installed, pilih server figma, dan tekan Enter untuk membuka halaman otorisasi. Sebuah halaman browser akan terbuka, klik Allow access supaya Claude Code diizinkan mengakses akun Figma Anda. Setelah selesai, jalankan /plugin sekali lagi untuk memastikan status figma sudah tertulis connected.

Setup Manual Figma MCP Server Versi Desktop

Figma juga menyediakan versi desktop untuk kebutuhan organisasi atau enterprise tertentu, meski Figma sendiri tetap menyarankan versi remote sebagai pilihan utama karena fiturnya lebih lengkap.

Aktifkan Dev Mode dan MCP Server di Aplikasi Figma

Buka file desain di aplikasi desktop Figma, lalu aktifkan Dev Mode lewat toggle di toolbar tanpa ada elemen yang sedang dipilih. Setelah Dev Mode aktif, klik untuk mengaktifkan MCP server di sidebar kanan, lalu salin alamat server yang muncul.

Tambahkan Server ke Claude Code Lewat Terminal

Buka terminal lalu jalankan perintah claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp. Restart Claude Code, lalu jalankan perintah /mcp untuk memastikan server figma-desktop sudah muncul dan siap dipakai.

Cara Mengaktifkan Figma sebagai Connector di Claude.ai

Kalau Anda lebih sering memakai Claude lewat aplikasi web atau mobile, bukan terminal, Figma tetap bisa dipakai lewat fitur connector bawaan Claude.

Tambahkan Figma dari Halaman Connectors

Masuk ke pengaturan connector di akun Claude Anda, cari Figma, lalu hubungkan akun Figma Anda mengikuti proses otorisasi yang muncul. Setelah terhubung, Figma akan tersedia otomatis di Claude.ai, Claude desktop, dan Claude mobile.

Gunakan untuk Diagram dan Implementasi Desain

Setelah connector aktif, Anda bisa minta Claude membuat flow chart atau diagram langsung di FigJam, mengecek variabel desain yang dipakai, atau meminta Claude mengimplementasikan desain Figma jadi kode sesuai standar codebase Anda.

Dari Claude Code Balik ke Figma, Code to Canvas

Selain membaca desain dari Figma, Claude Code juga bisa mengirim hasil kerjanya kembali ke Figma. Fitur ini cocok untuk Anda yang suka membangun prototipe lewat kode terlebih dulu.

Tangkap Tampilan dari Browser Jadi Frame Figma

Tampilan UI yang sedang berjalan di production, staging, atau localhost bisa ditangkap dan diubah jadi frame Figma yang bisa diedit. Anda bahkan bisa menangkap beberapa layar sekaligus dalam satu sesi, sehingga urutan alur tetap tersimpan rapi.

Roundtrip Kembali ke Claude Code

Setelah tim desain memberi catatan dan revisi di Figma, Anda bisa membawa hasilnya kembali ke Claude Code hanya dengan menyertakan link frame Figma dalam prompt, lalu Claude akan melanjutkan proses development dari titik itu.

Claude Design dan Ekosistem Integrasi Figma Lainnya

Selain Claude Code dan connector, Anthropic juga merilis Claude Design, produk Anthropic Labs yang memungkinkan Anda membuat prototipe visual langsung dari percakapan dengan Claude, lalu hasilnya bisa diekspor ke Canva, PDF, PPTX, atau file HTML.

Figma sendiri menyediakan katalog lengkap MCP client yang didukung, termasuk Claude Code, lewat halaman MCP catalog resmi Figma, supaya Anda bisa cek tools agentic mana saja yang kompatibel.

Kesalahan Umum dan Tips Optimasi Integrasi Claude dan Figma

Supaya proses koneksi Anda lancar, kenali dulu kesalahan yang paling sering terjadi.

Lupa Restart Claude Code Setelah Instalasi

Plugin Figma tidak akan langsung aktif kalau Claude Code tidak direstart setelah instalasi. Ini kesalahan paling umum yang membuat perintah figma tidak muncul di menu plugin.

Salah Pilih Versi Server

Kalau Anda bukan bagian dari tim enterprise dengan kebutuhan khusus, gunakan versi remote, bukan versi desktop. Versi remote lebih lengkap fiturnya dan tidak butuh Figma desktop app tetap terbuka.

Tidak Menyertakan Annotation Saat Generate Kode

Saat meminta Claude mengambil kode dari seleksi Figma, sertakan catatan atau annotation pada desain Anda supaya hasil kode lebih akurat dan sesuai standar codebase tim Anda.

FAQ: Pertanyaan yang Sering Diajukan

Q1: Apakah integrasi Claude dan Figma ini gratis?
A1: Plugin Figma di Claude Code bisa dipasang gratis, tapi penggunaan Claude Code sendiri tetap mengikuti paket langganan Claude yang Anda pakai.

Q2: Apa bedanya Figma MCP server versi remote dan desktop?
A2: Versi remote berjalan lewat cloud dan punya fitur paling lengkap, sementara versi desktop dipakai untuk kebutuhan organisasi tertentu dan butuh aplikasi Figma desktop tetap terbuka.

Q3: Apakah saya harus bisa coding untuk memakai integrasi ini?
A3: Untuk Claude Code, Anda perlu sedikit familiar dengan terminal. Tapi kalau lewat connector di Claude.ai, Anda cukup mengetik perintah dalam bahasa biasa tanpa perlu menulis kode.

Q4: Bisakah Claude membuat desain baru di Figma, bukan cuma membaca?
A4: Bisa. Lewat Figma MCP server, Claude bisa menulis langsung ke kanvas untuk membuat atau mengubah konten asli di file Figma Anda.

Q5: Apa itu Code Connect dalam konteks integrasi ini?
A5: Code Connect adalah fitur yang menghubungkan komponen di Figma dengan komponen yang sudah ada di codebase Anda, supaya Claude tahu komponen mana yang harus dipakai ulang, bukan dibuat dari nol.

Q6: Apakah hasil dari Claude Code bisa dibawa kembali ke Figma untuk direview tim desain?
A6: Bisa. Tampilan yang sudah dibangun di Claude Code bisa ditangkap dan diubah jadi frame Figma yang bisa diedit, dikomentari, dan direview tim secara kolaboratif.

Q7: Apakah integrasi ini aman untuk data desain perusahaan?
A7: Proses otorisasi memakai sistem login resmi Figma, jadi Claude hanya bisa mengakses file yang Anda izinkan lewat proses Allow access saat setup.

Penutup

Menghubungkan Claude ke Figma dan Figma ke Claude sebenarnya tidak rumit kalau Anda mengikuti langkah resminya satu per satu. Mulai dari instalasi plugin, autentikasi akun, sampai memakai fitur code to canvas, semuanya bisa membantu tim desain dan developer bekerja lebih cepat tanpa banyak proses manual.

Kalau Anda ingin workflow AI di tim Anda berjalan lebih rapi, mulai dari riset konten sampai eksekusi produk, hubungi Olakses lewat halaman kontak kami untuk konsultasi gratis.

Muhammad Dwiki Septianto

Muhammad Dwiki Septianto is an SEO Specialist at Olakses with a background in Informatics Engineering from UIN Bandung. Certified in Digital Marketing (BNSP), he specializes in on-page and technical SEO, content optimization, and cross-functional coordination between content and development teams.