Figma

Panduan Server MCP Figma

Server MCP Figma menghadirkan Figma langsung ke dalam alur kerja Anda dengan menyediakan informasi desain dan konteks penting kepada agen AI yang menghasilkan kode dari file desain Figma.

[!NOTE] Batas kecepatan (rate limits) berlaku untuk alat server MCP Figma yang membaca data dari Figma. Beberapa alat, seperti yang menulis ke file Figma, dikecualikan dari batas kecepatan.

Pengguna dengan paket Starter atau dengan kursi View atau Collab pada paket berbayar akan dibatasi hingga 6 panggilan alat per bulan.

Pengguna dengan kursi Dev atau Full pada paket Professional, Organization, atau Enterprise memiliki batas kecepatan per menit, yang mengikuti batas yang sama dengan Figma REST API Tier 1. Seperti halnya REST API Figma, Figma berhak mengubah batas kecepatan.

Untuk dokumentasi lengkap server MCP Figma, lihat dokumentasi pengembang kami. Dengan menggunakan server MCP Figma dan sumber daya terkait (termasuk keterampilan ini), Anda menyetujui Ketentuan Pengembang Figma. Keterampilan ini saat ini tersedia sebagai fitur Beta.

Fitur

• Menulis ke kanvas (khusus server jarak jauh): Buat dan ubah konten Figma asli langsung dari klien MCP Anda. Dengan keterampilan yang tepat, agen dapat membangun dan memperbarui frame, komponen, variabel, dan tata letak otomatis di file Figma Anda menggunakan sistem desain Anda sebagai sumber kebenaran.

  Catatan: Kami terus meningkatkan dukungan Figma untuk agen AI. Fitur tulis ke kanvas pada akhirnya akan menjadi fitur berbayar berbasis penggunaan, tetapi saat ini tersedia gratis selama periode beta.

• Hasilkan kode dari frame yang dipilih

  Pilih frame Figma dan ubah menjadi kode. Sangat bagus untuk tim produk yang membangun alur baru atau mengulangi fitur aplikasi.

• Ekstrak konteks desain

  Tarik variabel, komponen, dan data tata letak langsung ke IDE Anda. Ini sangat berguna untuk sistem desain dan alur kerja berbasis komponen.

• Buat kode lebih cerdas dengan Code Connect

  Tingkatkan kualitas keluaran dengan menggunakan kembali komponen aktual Anda. Code Connect menjaga kode yang dihasilkan tetap konsisten dengan basis kode Anda.

  Pelajari lebih lanjut tentang Code Connect →

• Hasilkan desain Figma dari halaman web (sedang diluncurkan)

  Tangkap, impor, atau ubah halaman web menjadi desain Figma langsung dari agen pengkodean AI Anda.

Instalasi & Pengaturan

Hubungkan ke server MCP Figma

Klien MCP yang berbeda memerlukan pengaturan yang sedikit berbeda. Ikuti petunjuk di bawah ini untuk klien spesifik Anda untuk terhubung ke server MCP Figma.

VS Code

1. Gunakan pintasan ⌘ Shift P untuk mencari MCP:Add Server.
2. Pilih HTTP.
3. Tempel url server https://mcp.figma.com/mcp di bilah pencarian. Lalu tekan Enter.
4. Saat Anda diminta untuk ID server, masukkan figma.
5. Pilih apakah Anda ingin menambahkan server ini secara global atau hanya untuk ruang kerja saat ini. Setelah dikonfirmasi, Anda akan melihat konfigurasi seperti ini di file mcp.json Anda:

{
  "servers": {
    "figma": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

6. Buka bilah alat obrolan menggunakan ⌥⌘B atau ⌃⌘I dan beralih ke mode Agen.
7. Dengan obrolan terbuka, ketik #get_design_context untuk mengonfirmasi bahwa alat server MCP Figma tersedia. Jika tidak ada alat yang terdaftar, mulai ulang VS Code.

[!NOTE] Anda harus memiliki GitHub Copilot yang diaktifkan di akun Anda untuk menggunakan MCP di VS Code.

Untuk informasi lebih lanjut, lihat dokumentasi resmi VS Code.

Cursor

Cara yang disarankan untuk menyiapkan server MCP Figma di Cursor adalah dengan menginstal Plugin Figma, yang mencakup pengaturan server MCP serta Keterampilan Agen untuk alur kerja umum.

Instal plugin dengan mengetik perintah berikut di obrolan agen Cursor:

/add-plugin figma

Plugin ini mencakup:

• Konfigurasi server MCP untuk server MCP Figma
• Keterampilan untuk mengimplementasikan desain, menghubungkan komponen melalui Code Connect, dan membuat aturan sistem desain
• Aturan untuk penanganan aset yang tepat dari server MCP Figma

{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

Claude Code

Cara yang disarankan untuk menyiapkan server MCP Figma di Claude Code adalah dengan menginstal Plugin Figma, yang mencakup pengaturan server MCP serta Keterampilan Agen untuk alur kerja umum.

Jalankan perintah berikut untuk menginstal plugin dari pasar plugin resmi Anthropic.

claude plugin install figma@claude-plugins-official

Pelajari lebih lanjut tentang Plugin Claude Code dan Keterampilan Agen dari Anthropic.

claude mcp add --transport http figma https://mcp.figma.com/mcp

Gemini CLI

Instal ekstensi Figma untuk Gemini CLI dengan menjalankan perintah berikut:

gemini extensions install https://github.com/figma/mcp-server-guide

Setelah terinstal, autentikasi dengan Figma dengan menjalankan gemini lalu jalankan perintah berikut di dalam CLI:

/mcp auth figma

Untuk menghapus instalan ekstensi:

gemini extensions uninstall figma

Editor lainnya

Editor kode dan alat lain yang mendukung Streamable HTTP juga dapat terhubung ke server MCP Figma.

Jika Anda menggunakan editor atau alat yang berbeda, periksa dokumentasinya untuk memastikan bahwa editor atau alat tersebut mendukung komunikasi berbasis Streamable HTTP. Jika ya, Anda dapat menambahkan server MCP Figma secara manual menggunakan konfigurasi ini:

{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

Memberi perintah pada klien MCP Anda

Server MCP Figma memperkenalkan serangkaian alat yang membantu LLM menerjemahkan desain di Figma. Setelah terhubung, Anda dapat memberi perintah pada klien MCP Anda untuk mengakses node desain tertentu.

Untuk memberikan konteks desain Figma ke klien AI Anda:

1. Salin tautan ke frame atau lapisan di Figma.
2. Beri perintah pada klien Anda untuk membantu Anda mengimplementasikan desain di URL yang dipilih.

[!NOTE] Klien Anda tidak akan dapat menavigasi ke URL yang dipilih, tetapi klien akan mengekstrak node-id yang diperlukan agar server MCP dapat mengidentifikasi objek mana yang akan mengembalikan informasi.

Alat dan keterampilan

Figma memelihara daftar alat yang disediakan oleh server MCP Figma di dokumentasi pengembang.

Anda juga dapat mempelajari lebih lanjut tentang keterampilan yang disertakan dengan plugin Figma untuk agen yang didukung di Pusat Bantuan Figma. Tergantung pada agennya, Anda mungkin juga melihat istilah connector, extension, atau power; ini mencakup kumpulan keterampilan yang sama.

Repositori ini juga berisi keterampilan alur kerja mandiri yang tidak dibundel dengan plugin Figma:

• workflow-skills/video-interaction-mapper: Mengubah rekaman UI menjadi papan cerita Figma beranotasi
• workflow-skills/generate-project-plan: Ubah PRD (plus landasan basis kode opsional) menjadi papan rencana proyek FigJam

Praktik terbaik MCP

Kualitas kode yang dihasilkan bergantung pada beberapa faktor. Beberapa dikendalikan oleh Anda, dan beberapa oleh alat yang Anda gunakan. Berikut adalah beberapa saran untuk keluaran yang bersih dan konsisten.

Strukturkan file Figma Anda untuk kode yang lebih baik

Berikan konteks terbaik untuk niat desain Anda, sehingga MCP dan asisten AI Anda dapat menghasilkan kode yang jelas, konsisten, dan selaras dengan sistem Anda.

• Gunakan komponen untuk apa pun yang digunakan kembali (tombol, kartu, input, dll.)
• Hubungkan komponen ke basis kode Anda melalui Code Connect. Ini adalah cara terbaik untuk mendapatkan penggunaan kembali komponen yang konsisten dalam kode. Tanpa ini, model hanya menebak.
• Gunakan variabel untuk jarak, warna, radius, dan tipografi.
• Beri nama lapisan secara semantik (misalnya CardContainer, bukan Group 5)
• Gunakan tata letak otomatis untuk mengomunikasikan niat responsif.

[!TIP] Ubah ukuran frame di Figma untuk memeriksa bahwa frame berperilaku seperti yang diharapkan sebelum menghasilkan kode.

• Gunakan anotasi dan sumber daya pengembang untuk menyampaikan niat desain yang sulit ditangkap hanya dari visual, seperti bagaimana sesuatu harus berperilaku, sejajar, atau merespons.

Tulis perintah yang efektif untuk memandu AI

MCP memberikan data Figma terstruktur kepada asisten AI Anda, tetapi perintah Anda yang mendorong hasilnya. Perintah yang baik dapat:

• Menyelaraskan hasil dengan kerangka kerja atau sistem gaya Anda
• Mengikuti struktur file dan konvensi penamaan
• Menambahkan kode ke jalur tertentu (misalnya src/components/ui)
• Menambahkan atau memodifikasi kode di file yang ada alih-alih membuat yang baru
• Mengikuti sistem tata letak tertentu (misalnya grid, flexbox, absolute)

Contoh:

• "Hasilkan kode iOS SwiftUI dari frame ini"
• "Gunakan Chakra UI untuk tata letak ini"
• "Gunakan komponen src/components/ui"
• "Tambahkan ini ke src/components/marketing/PricingCard.tsx"
• "Gunakan komponen tata letak Stack kami"

Anggap perintah seperti brief untuk rekan satu tim. Niat yang jelas menghasilkan hasil yang lebih baik.

Picu alat tertentu saat diperlukan

MCP mendukung berbagai alat, dan masing-masing memberikan jenis konteks terstruktur yang berbeda kepada asisten AI Anda. Terkadang, asisten tidak otomatis memilih yang tepat, terutama karena semakin banyak alat yang tersedia. Jika hasilnya tidak sesuai, coba bersikap eksplisit dalam perintah Anda.

• get_design_context menyediakan representasi React + Tailwind terstruktur dari pilihan Figma Anda. Ini adalah titik awal yang dapat diterjemahkan oleh asisten AI Anda ke dalam kerangka kerja atau gaya kode apa pun, tergantung pada perintah Anda.
• get_variable_defs mengekstrak variabel dan gaya yang digunakan dalam pilihan Anda (warna, jarak, tipografi, dll.). Ini membantu model mereferensikan token Anda secara langsung dalam kode yang dihasilkan.

Misalnya, jika Anda mendapatkan kode mentah alih-alih token, coba sesuatu seperti:

• "Dapatkan nama dan nilai variabel yang digunakan dalam frame ini."

Tambahkan aturan kustom

Tetapkan panduan tingkat proyek untuk menjaga keluaran tetap konsisten—seperti catatan orientasi untuk pengembang baru. Ini adalah hal-hal seperti:

• Primitif tata letak yang disukai
• Organisasi file
• Pola penamaan
• Apa yang tidak boleh di-hardcode

Anda dapat menyediakan ini dalam format apa pun yang digunakan klien MCP Anda untuk file instruksi.

Contoh:

Pastikan keluaran yang baik secara konsisten

## Figma MCP Integration Rules
These rules define how to translate Figma inputs into code for this project and must be followed for every Figma-driven change.

### Required flow (do not skip)
1. Run get_design_context first to fetch the structured representation for the exact node(s).
2. If the response is too large or truncated, run get_metadata to get the high‑level node map and then re‑fetch only the required node(s) with get_design_context.
3. Run get_screenshot for a visual reference of the node variant being implemented.
4. Only after you have both get_design_context and get_screenshot, download any assets needed and start implementation.
5. Translate the output (usually React + Tailwind) into this project's conventions, styles and framework.  Reuse the project's color tokens, components, and typography wherever possible.
6. Validate against Figma for 1:1 look and behavior before marking complete.

### Implementation rules
- Treat the Figma MCP output (React + Tailwind) as a representation of design and behavior, not as final code style.
- Replace Tailwind utility classes with the project's preferred utilities/design‑system tokens when applicable.
- Reuse existing components (e.g., buttons, inputs, typography, icon wrappers) instead of duplicating functionality.
- Use the project's color system, typography scale, and spacing tokens consistently.
- Respect existing routing, state management, and data‑fetch patterns already adopted in the repo.
- Strive for 1:1 visual parity with the Figma design. When conflicts arise, prefer design‑system tokens and adjust spacing or sizes minimally to match visuals.
- Validate the final UI against the Figma screenshot for both look and behavior.

Cursor

---
description: Figma MCP server rules
globs:
alwaysApply: true
---
- The Figma MCP server provides an assets endpoint which can serve image and SVG assets
- IMPORTANT: If the Figma MCP server returns a localhost source for an image or an SVG, use that image or SVG source directly
- IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload
- IMPORTANT: do NOT use or create placeholders if a localhost source is provided

Claude Code

# MCP Servers

## Figma MCP server rules

- The Figma MCP server provides an assets endpoint which can serve image and SVG assets
- IMPORTANT: If the Figma MCP server returns a localhost source for an image or an SVG, use that image or SVG source directly
- IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload
- IMPORTANT: do NOT use or create placeholders if a localhost source is provided

Aturan kualitas umum

- IMPORTANT: Always use components from `/path_to_your_design_system` when possible
- Prioritize Figma fidelity to match designs exactly
- Avoid hardcoded values, use design tokens from Figma where available
- Follow WCAG requirements for accessibility
- Add component documentation
- Place UI components in `/path_to_your_design_system`; avoid inline styles unless truly necessary

Menambahkan ini sekali dapat secara drastis mengurangi kebutuhan akan perintah yang berulang dan memastikan bahwa rekan satu tim atau agen secara konsisten mengikuti ekspektasi yang sama.

Pastikan untuk memeriksa dokumentasi IDE atau klien MCP Anda untuk mengetahui cara menyusun aturan, dan bereksperimenlah untuk menemukan yang terbaik untuk tim Anda. Panduan yang jelas dan konsisten sering kali menghasilkan kode yang lebih baik dan lebih dapat digunakan kembali dengan lebih sedikit bolak-balik.

Pecah pilihan besar

Pecah layar menjadi bagian-bagian yang lebih kecil (seperti komponen atau bagian logis) untuk hasil yang lebih cepat dan lebih andal.

Pilihan besar dapat memperlambat alat, menyebabkan kesalahan, atau menghasilkan respons yang tidak lengkap, terutama ketika ada terlalu banyak konteks untuk diproses model. Sebagai gantinya:

1. Hasilkan kode untuk bagian yang lebih kecil atau komponen individual (misalnya Kartu, Header, Sidebar)
2. Jika terasa lambat atau macet, kurangi ukuran pilihan Anda

Ini membantu menjaga konteks tetap mudah dikelola dan hasil lebih dapat diprediksi, baik untuk Anda maupun untuk model.

Jika ada sesuatu dalam keluaran yang terlihat tidak tepat, biasanya membantu untuk meninjau kembali dasar-dasarnya: bagaimana file Figma disusun, bagaimana perintah ditulis, dan konteks apa yang dikirim. Mengikuti praktik terbaik di atas dapat membuat perbedaan besar, dan sering kali menghasilkan kode yang lebih konsisten dan dapat digunakan kembali.

Membawa konteks Make ke agen Anda

Integrasi Make + MCP memudahkan untuk membawa prototipe dari desain ke produksi. Dengan menghubungkan proyek Make langsung ke agen Anda melalui MCP, Anda dapat mengekstrak sumber daya dan menggunakannya kembali di codebase Anda. Ini mengurangi hambatan saat memperluas prototipe menjadi aplikasi nyata, dan memastikan bahwa niat desain diteruskan dengan setia ke implementasi.

Dengan integrasi ini, Anda dapat:

• Mengambil konteks proyek langsung dari Make (file individual atau seluruh proyek)
• Meminta penggunaan komponen kode yang ada alih-alih memulai dari awal
• Memperluas prototipe dengan data nyata untuk memvalidasi dan memproduksikan desain lebih cepat

Cara kerjanya

[!NOTE] Integrasi ini memanfaatkan kemampuan resources MCP, yang memungkinkan agen Anda mengambil konteks langsung dari proyek Make. Ini hanya tersedia di klien yang mendukung resources MCP.

Langkah-langkah untuk mengambil resources dari Make

1. Minta agen Anda untuk mengambil konteks dengan memberikan tautan Make yang valid
2. Terima daftar file yang tersedia dari proyek Make Anda
3. Unduh file yang ingin Anda ambil saat diminta

Contoh alur kerja

Tujuan: Menerapkan komponen popup di codebase produksi Anda yang sesuai dengan desain dan perilaku yang didefinisikan di Make.

1. Bagikan tautan proyek Make Anda dengan agen Anda.
2. Minta agen: "Saya ingin mendapatkan perilaku dan gaya komponen popup dari file Make ini dan menerapkannya menggunakan komponen popup saya."

Agen Anda akan mengambil konteks yang relevan dari Make dan memandu Anda dalam memperluas komponen popup yang ada dengan fungsionalitas dan gaya prototipe.

Pedoman Ikon

Lihat Pedoman Penggunaan Merek Figma untuk menampilkan ikon apa pun yang terdapat di repositori ini.