MCP untuk Desainer: Menghubungkan Figma, Token dan Kode ke Claude dan Cursor

Apa itu MCP, dengan kata sederhana

Dokumentasi resmi MCP menjelaskannya sebagai standar sumber terbuka untuk menghubungkan aplikasi AI ke sistem eksternal, seperti file, database, dan alat. Salah satu contohnya adalah Claude Code yang menghasilkan seluruh aplikasi web dari desain Figma. Bagi seorang desainer, bagian pentingnya adalah: AI tidak lagi harus menebak seperti apa desain Anda. Bisa menanyakan langsung ke alat desainnya.

Alat desain dengan server MCP saat ini

Pada Oktober 2026:

• Figma: server MCP yang memberikan konteks desain agen (variabel, komponen, tata letak) untuk pembuatan kode, dan dapat menulis konten asli kembali ke kanvas. Figma mencantumkannya pada paket Pemula dan berbayar; penulisan kanvas gratis selama versi beta.
• Penpot: server MCP gratis dan terbuka yang berfungsi dengan klien MCP apa pun, termasuk Claude, Cursor, VS Code, dan OpenAI Codex, dan dapat dihosting sendiri.
• ExodeUI (kami membuatnya): server MCP yang memungkinkan alat pengkodean AI membuat dan mengedit animasi interaktif dengan status dan fisika pegas.
• Desain token: jika token Anda berada di repositori sebagai JSON, alat pengkodean AI sudah dapat membacanya sebagai file; server khusus hanya diperlukan untuk token yang disimpan di dalam alat.

Bagaimana sebenarnya desainer menggunakannya

Alur kerja yang paling umum bersifat praktis, bukan ajaib. Pengembang memilih bingkai dan meminta AI untuk mengimplementasikannya dengan pustaka komponen yang ada. Desainer meminta AI untuk memeriksa apakah layar berkode cocok dengan desain dan daftar perbedaannya. Tim meminta AI untuk memperbarui token komponen di seluruh basis kode. Dan semakin banyak desainer yang menggunakan AI untuk merancang varian langsung di kanvas, lalu menyempurnakannya dengan tangan.

Menghubungkan server

Claude Code menambahkan server dengan perintah claude mcp add atau melalui file .mcp.json dalam proyek, dan mendukung server HTTP jarak jauh serta server lokal. Cursor mengelola server MCP dalam pengaturannya dan mendukung server lokal (stdio) dan jarak jauh. Server jarak jauh biasanya meminta Anda masuk sekali dengan OAuth. Setiap vendor mendokumentasikan perintah atau URL yang tepat untuk servernya.

Apa yang harus diwaspadai

MCP memberikan akses nyata pada alat AI, jadi perlakukan itu seperti integrasi apa pun:

• Izin: agen yang bisa menulis ke kanvas atau repositori juga bisa membuat kesalahan. Gunakan riwayat versi dan tinjau perubahan.
• Privasi: periksa ke mana data desain pergi dan apakah paket Anda mengizinkannya.
• Biaya: beberapa fitur tulis gratis dalam versi beta dan direncanakan berbasis penggunaan.
• Kualitas: Keluaran AI mengikuti sistem desain Anda hanya jika sistem tersebut terstruktur dengan baik, dengan komponen dan token yang diberi nama.