🚀 Figma MCP Hub & Devin Skill: Unduh skill resmi untuk Devin AI & Salin Config

🏠 Main Hub 📥 Download SKILL.md

🎯 Panduan Lengkap Setup Figma MCP Server

Dari kendala hingga berhasil - studi kasus integrasi Figma dengan Devin AI

📋 Tujuan Awal

Menginstall Figma MCP Server untuk membaca design context dari file Figma dan mengconvertnya menjadi code HTML.

🎯 Prompt Awal Instalasi

📝 Copy-paste prompt ini untuk memulai instalasi Figma MCP:

Saya ingin menginstall Figma MCP Server untuk membaca design context dari file Figma dan mengconvertnya menjadi code. Tolong bantu saya setup Figma MCP Server di Devin Desktop, mulai dari instalasi hingga bisa membaca file Figma dan convert ke HTML/CSS.

✅ Checklist Persiapan Sebelum Memulai

Software & Tools yang Dibutuhkan:

Devin Desktop terinstall (versi terbaru disarankan)

Akun Figma dengan akses ke file yang ingin dibaca

Koneksi internet yang stabil

Browser default untuk OAuth authentication

Akses ke file Figma URL yang ingin diproses

Informasi yang Dibutuhkan:

Email Figma yang akan digunakan untuk autentikasi

Figma file URL dengan node-id spesifik

Target output format (HTML/CSS, React, dll)

Environment Check:

Pastikan menggunakan Devin Desktop (bukan Claude Code CLI)

Logout dari Figma di browser sebelum memulai

Clear cookies Figma di browser untuk fresh session

⚠️ Need to Check - Daftar Kendala yang Dihadapi

Kendala yang Sering Terjadi & Cara Cek:

Environment Mismatch: Cek apakah menggunakan Claude Code CLI atau Devin Desktop dengan command claude --version
Config File Location: Pastikan menggunakan ~/.config/devin/mcp_config.json untuk Devin Desktop
OAuth Authentication: Cek status MCP server dengan claude mcp list
Wrong Figma Account: Verifikasi akun yang terautentikasi dengan mcp_call_tool whoami
Browser Session Cache: Logout dari Figma di browser dan clear cookies
File Access Permissions: Pastikan akun Figma punya akses ke file yang ingin dibaca
Network Connectivity: Test koneksi dengan curl -I https://mcp.figma.com/mcp
Port Blocking: Cek port 443 dengan nc -zv mcp.figma.com 443

📝 Step-by-Step Installation Guide

STEP 1: Cek Environment

claude --version # Pastikan output menunjukkan Claude Code # Cek Devin Desktop dengan: ps aux | grep -i devin

STEP 2: Buat Config Directory

mkdir -p ~/.config/devin

STEP 3: Buat MCP Config File

cat > ~/.config/devin/mcp_config.json << 'EOF' { "mcpServers": { "figma": { "serverUrl": "https://mcp.figma.com/mcp" } } } EOF

STEP 4: Refresh/Restart Devin Desktop

Buka Devin Desktop dan refresh MCP servers atau restart aplikasi

STEP 5: Authenticate Figma MCP

# Di Devin Desktop: # 1. Buka Settings → Tools → Manage MCPs # 2. Cari server "figma" # 3. Click "Authenticate" atau "Connect" # 4. Login dengan akun Figma yang benar # 5. Click "Allow Access"

STEP 6: Verifikasi Autentikasi

# Gunakan MCP tool untuk cek akun: mcp_call_tool whoami # Pastikan email yang ditampilkan adalah akun yang benar

STEP 7: Test Koneksi Figma

curl -I https://mcp.figma.com/mcp nc -zv mcp.figma.com 443 ping -c 3 mcp.figma.com

STEP 8: Baca Figma Design

# Load design-to-code guidance: mcp_read_resource skill://figma/figma-design-to-code/SKILL.md # Baca design: mcp_call_tool get_design_context # Parameter: fileKey dan nodeId dari URL Figma

STEP 9: Convert ke Target Format

# Adapt reference code (React + Tailwind) ke target stack # Contoh: HTML/CSS, Vue, framework lainnya

🔍 Tahap 1: Investigasi Lingkungan (Studi Kasus)

Langkah 1: Cek Lingkungan yang Tersedia

Memeriksa apakah user menggunakan Claude Code CLI atau Devin Desktop:

claude --version # Output: 2.1.138 (Claude Code)

❌ Masalah Ditemukan

Awalnya menggunakan Claude Code CLI, tapi panduan yang diberikan khusus untuk Devin Desktop.

Langkah 2: Cek Devin Desktop Installation

Memeriksa apakah Devin Desktop terinstall:

ps aux | grep -i devin # Output: Devin Desktop sedang berjalan

✅ Solusi

Devin Desktop terinstall dan berjalan di /Users/dekurniawa02/Documents/Own App/Devin.app

⚙️ Tahap 2: Konfigurasi Awal (Studi Kasus)

Langkah 3: Install Plugin Figma untuk Claude Code CLI

claude plugin install figma@claude-plugins-official

Status: Plugin berhasil terinstall Connected

Langkah 4: Setup MCP Server Configuration

Mencoba menambahkan Figma MCP server melalui CLI:

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

❌ Masalah: Server Butuh Autentikasi

Status: "! Needs authentication" - Server terinstall tapi butuh OAuth flow yang tidak bisa dilakukan lewat CLI.

🔧 Tahap 3: Mengatasi Kendala Autentikasi (Studi Kasus)

Langkah 5: Coba Alternatif Server

Mencoba menggunakan figma-intelligence-layer server yang sudah terhubung:

❌ Masalah: Butuh Plugin Bridge

Error: "Figma plugin is not connected. Open Figma and run the Intelligence Bridge plugin."

Langkah 6: Coba Token Figma API

Mencoba menggunakan token Figma yang ada di konfigurasi:

curl -H "X-Figma-Token: figd_..." https://api.figma.com/v1/files/pDZFdbWxAOYiVlWDLj8UPB

❌ Masalah: Token Kadaluarsa

Error: "Token expired" - Token yang ada sudah tidak valid.

🎯 Tahap 4: Beralih ke Devin Desktop (Studi Kasus)

Langkah 7: Setup Konfigurasi Devin Desktop

Mengikuti panduan untuk Devin Desktop dengan membuat config file:

# Lokasi config yang salah (awalnya) ~/.codeium/mcp_config.json # Lokasi config yang benar untuk Devin Desktop ~/.config/devin/mcp_config.json

💡 Key Learning: Lokasi config file berbeda antara Claude Code CLI (~/.claude.json) dan Devin Desktop (~/.config/devin/mcp_config.json)

Langkah 8: Buat Config File yang Benar

mkdir -p ~/.config/devin cat > ~/.config/devin/mcp_config.json << 'EOF' { "mcpServers": { "figma": { "serverUrl": "https://mcp.figma.com/mcp" } } } EOF

🔐 Tahap 5: Masalah Autentikasi Akun (Studi Kasus)

Langkah 9: Cek Akun yang Terautentikasi

mcp_call_tool whoami # Output: deni.kurniawan2@wingscorp.com

❌ Masalah: Akun Figma Salah

Server terautentikasi dengan akun kerja (deni.kurniawan2@wingscorp.com), tapi user ingin menggunakan akun personal (sdenikurniawan@gmail.com).

Langkah 10: Coba Re-authenticate

Mencoba me-reset konfigurasi dan autentikasi ulang:

claude mcp remove figma -s user claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

❌ Masalah: OAuth Session Cache

Autentikasi masih menggunakan akun yang sama karena session browser Figma ter-cache.

Langkah 11: Clear Cache dan Re-authenticate

rm -rf ~/.claude/plugins/cache/claude-plugins-official/figma claude mcp remove figma -s user claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

❌ Masalah: Masih Cache di Browser

Cache di level browser Figma masih aktif, perlu logout dari Figma di browser.

✅ Tahap 6: Solusi Berhasil (Studi Kasus)

Langkah 12: Re-authenticate dengan Akun yang Benar

✅ Solusi Akhir

Logout dari Figma di browser
Clear cookies Figma di browser
Re-authenticate melalui Devin Desktop interface
Login dengan akun sdenikurniawan@gmail.com
Click "Allow Access"

Langkah 13: Verifikasi Autentikasi Berhasil

mcp_call_tool whoami # Output: # { # "handle": "Deni Kurniawan", # "email": "sdenikurniawan@gmail.com", # "plans": [...] # }

Status: ✅ Berhasil terautentikasi dengan akun yang benar Connected

🎨 Tahap 7: Membaca Design Figma (Studi Kasus)

Langkah 14: Load Design-to-Code Guidance

mcp_read_resource skill://figma/figma-design-to-code/SKILL.md

Mengambil panduan workflow untuk konversi design ke code.

Langkah 15: Baca Figma Design

mcp_call_tool get_design_context # File Key: pDZFdbWxAOYiVlWDLj8UPB # Node ID: 87-151

✅ Berhasil!

Design berhasil dibaca dan menghasilkan React + Tailwind code sebagai reference.

Langkah 16: Convert ke HTML/CSS

Mengconvert React + Tailwind reference ke plain HTML/CSS:

# Membuat file: bse-in-numbers.html # Features: # - Exact design conversion # - Responsive design # - Clean HTML structure # - Parkinsans font dari Google Fonts

✅ HTML File Berhasil Dibuat

File: /Users/dekurniawa02/Documents/Web Project/learn/figma-test/bse-in-numbers.html

🔍 Tahap 8: Testing Koneksi (Studi Kasus)

Langkah 17: Test Network Connectivity

curl -I https://mcp.figma.com/mcp # ✅ HTTP/2 405 nc -zv mcp.figma.com 443 # ✅ Connection succeeded ping -c 3 mcp.figma.com # ✅ 23ms latency, 0% loss nslookup mcp.figma.com # ✅ DNS resolution OK

✅ Semua Koneksi Berhasil

Tidak ada port yang tertutup, semua network test passed.

📊 Timeline Kendala dan Solusi

Awal

Setup Figma MCP di Claude Code CLI

Environment Mismatch

Kendala 1

OAuth autentikasi tidak bisa lewat CLI

Failed

Solusi 1

Beralih ke Devin Desktop

Platform Switch

Kendala 2

Config file lokasi salah

Config Error

Solusi 2

Gunakan ~/.config/devin/mcp_config.json

Fixed Config

Kendala 3

Autentikasi dengan akun Figma salah

Wrong Account

Solusi 3

Logout Figma browser + re-authenticate

Account Fixed

Hasil Akhir

Berhasil baca Figma design dan convert ke HTML

Success!

📝 Ringkasan Pembelajaran

1. Environment Matters: Claude Code CLI dan Devin Desktop punya sistem konfigurasi yang berbeda.

2. Config File Locations:

Claude Code CLI: ~/.claude.json
Devin Desktop: ~/.config/devin/mcp_config.json
Windsurf (old): ~/.codeium/mcp_config.json

3. OAuth Authentication: Autentikasi Figma MCP memerlukan browser flow dan cache session di browser Figma.

4. Account Management: Penting untuk memastikan autentikasi menggunakan akun Figma yang memiliki akses ke file yang ingin diakses.

5. Design-to-Code Workflow: Figma MCP menyediakan reference code (React + Tailwind) yang perlu diadaptasi ke target stack.

🎯 Final Result

✅ SETUP BERHASIL SELESAI!

Achievements:

✅ Figma MCP Server terinstall dan terautentikasi
✅ Menggunakan akun Figma yang benar (sdenikurniawan@gmail.com)
✅ Berhasil membaca design context dari file Figma
✅ Convert design ke HTML/CSS yang responsive
✅ Semua network connection berfungsi normal

Files Created:

📄 /Users/dekurniawa02/.config/devin/mcp_config.json (MCP configuration)
📄 /Users/dekurniawa02/Documents/Web Project/learn/figma-test/bse-in-numbers.html (HTML output)

Next Steps:

🔄 File HTML siap untuk dikembangkan lebih lanjut
🎨 Bisa membaca design Figma lainnya dengan workflow yang sama
⚙️ MCP server siap digunakan untuk project berikutnya

🚀 Setup Figma MCP Berhasil - Siap untuk Production!