figma-mcp

MCP server custom untuk Figma REST API. Sudah terdaftar di Claude Code (user scope) sebagai figma.

Setup token (wajib, sekali saja)

1. Buka Figma → Settings → Security → Personal access tokens → Generate new token.

2. Scope minimal: File content (read). Tambahkan kalau perlu:

   • Comments (write) → untuk figma_post_comment

   • File variables (read) → untuk figma_get_variables (Enterprise saja)

3. Simpan tokennya:

printf '%s' 'figd_XXXXXXXXXXXX' > ~/.figma-token && chmod 600 ~/.figma-token

Alternatifnya set env FIGMA_TOKEN. Env menang atas file.

4. Verifikasi:

cd ~/mcp-figma && npm run check

Harusnya keluar OK — token valid, login sebagai <handle>.

5. Restart Claude Code supaya server ke-load, lalu cek dengan /mcp.

Related MCP server: Figma MCP

Tools

Semua tool yang butuh file menerima file key mentah atau URL Figma lengkap. Kalau URL-nya mengandung ?node-id=12-34, figma_inspect_node dan figma_export_images otomatis pakai node itu tanpa perlu isi nodeIds.

Contoh pemakaian

"Inspect https://www.figma.com/design/AbC123/App?node-id=45-678 lalu bikinin komponen React-nya"
"Cari semua layer bertipe COMPONENT di file AbC123"
"Export frame 45:678 dari AbC123 ke PNG 2x, simpan ke ./assets"
"Ambil semua color style dari AbC123 dan jadikan CSS custom properties"

Catatan

• Response dipotong di 40.000 karakter supaya context tidak meledak. Ubah lewat env FIGMA_MAX_CHARS.

• URL gambar hasil figma_export_images kedaluwarsa ~30 hari. Pakai saveDir kalau mau permanen.

• Rate limit Figma cukup ketat untuk endpoint /images; render banyak node sekaligus dalam satu panggilan, jangan satu-satu.

• Server ini read-only kecuali figma_post_comment. Untuk bikin/ubah node langsung di canvas Figma butuh arsitektur lain (plugin Figma + WebSocket bridge), tidak tercakup di sini.

Test

npm test