Skip to main content
Glama
Sign In
figma-mcp

figma-mcp

by tioramadhn
OverviewSchemaSourceRelated ServersDiscussionsAdmin
JavaScript
Remote

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.

  1. Verifikasi:

cd ~/mcp-figma && npm run check

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

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

Related MCP server: Figma MCP

Tools

Tool

Fungsi

figma_whoami

Cek token valid + info akun. Panggil duluan kalau ada error auth.

figma_get_file

Ringkasan struktur file: halaman + pohon layer (default depth 3). Orientasi awal.

figma_find_nodes

Cari layer berdasarkan nama dan/atau tipe. Balikin id + path.

figma_inspect_node

Tool utama. Properti visual siap-implementasi: ukuran, HEX fill/stroke, radius, shadow, auto-layout, properti teks.

figma_get_node_raw

JSON Figma mentah. Cuma kalau inspect_node kurang. Output besar.

figma_export_images

Render node ke PNG/JPG/SVG/PDF. saveDir untuk sekalian download ke disk.

figma_get_styles

Style lokal (FILL/TEXT/EFFECT/GRID) + nilainya → design token.

figma_get_components

Daftar komponen & component set.

figma_get_variables

Variable lokal. Enterprise only, plan lain balas 403.

figma_get_comments

Baca komentar di file.

figma_post_comment

Tulis komentar. Satu-satunya tool yang menulis ke Figma dan kelihatan tim.

figma_list_files

teamId → daftar project, projectId → daftar file.

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

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

Loading tool schema changelog…

    This server cannot be deployed

    Claude Code, inside the Godot 4 editorFlockbay puts an AI agent in the real Godot 4 editor: it writes GDScript, runs your game and fixes what breaks. Free, or bring your own Claude Code or Codex.flockbay.comAd

    Maintenance

    ActivityInactive
    ResponsivenessNo recent community issues

    Resources

    Related MCP Connectors

    Related MCP Servers

    • figma-mcp

      chisanucha-suwan
      A
      license
      Not graded
      quality
      D
      maintenance
      Read-only Figma MCP server that enables design-to-code workflows by talking to the Figma REST API with a personal access token, for use with Claude Code and GitHub Copilot.
      2,341 npm
      MIT

    • ai-sdlc-figma-mcp-server

      vjackk
      F
      license
      Not graded
      quality
      D
      maintenance
      Read-only MCP server that wraps the Figma REST API, providing tools like get file metadata, list frames, and export node image URLs for AI SDLC agents.
      -

    • figma-comments-mcp

      ejun-9
      A
      license
      Not graded
      quality
      C
      maintenance
      An MCP server that lets Claude read Figma file comments directly, with tools to list comment threads scoped to a frame or file and render images of pinned nodes.
      15 npm
      4
      ISC