# 🎯 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

```bash
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:

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

## 📝 Step-by-Step Installation Guide

### STEP 1: Cek Environment

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

### STEP 2: Buat Config Directory

```bash
mkdir -p ~/.config/devin
```

### STEP 3: Buat MCP Config File

```bash
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

```bash
# 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

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

### STEP 7: Test Koneksi Figma

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

### STEP 8: Baca Figma Design

```bash
# 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

```bash
# 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:

```bash
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:

```bash
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

```bash
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:

```bash
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:

```bash
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:

```bash
# 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

```bash
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

```bash
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:

```bash
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

```bash
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:**

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

### Langkah 13: Verifikasi Autentikasi Berhasil

```bash
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

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

Mengambil panduan workflow untuk konversi design ke code.

### Langkah 15: Baca Figma Design

```bash
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:

```bash
# 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

```bash
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

| Timeline | Deskripsi | Status |
|----------|-----------|--------|
| 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!

---

## Quick Reference Commands

```bash
# Cek MCP server status
claude mcp list

# Tambah Figma MCP server
claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

# Hapus MCP server
claude mcp remove figma -s user

# Test koneksi Figma
curl -I https://mcp.figma.com/mcp
nc -zv mcp.figma.com 443

# Cek akun Figma yang terautentikasi
mcp_call_tool whoami

# Baca Figma design
mcp_call_tool get_design_context --fileKey="FILE_KEY" --nodeId="NODE_ID"
```

---

## Troubleshooting Common Issues

### Issue: "! Needs authentication"
**Solution:** Authenticate melalui Devin Desktop interface, bukan lewat CLI.

### Issue: Wrong Figma account
**Solution:** Logout dari Figma di browser, clear cookies, re-authenticate dengan akun yang benar.

### Issue: Config file not found
**Solution:** Pastikan menggunakan `~/.config/devin/mcp_config.json` untuk Devin Desktop.

### Issue: Network connectivity failed
**Solution:** Test koneksi dengan `curl -I https://mcp.figma.com/mcp` dan cek firewall/proxy settings.

### Issue: File access denied
**Solution:** Pastikan akun Figma memiliki akses ke file yang ingin dibaca (edit atau view permissions).

---

## Additional Resources

- [Figma MCP Server Documentation](https://developers.figma.com/docs/figma-mcp-server/)
- [Devin Documentation](https://devin.ai/docs)
- [MCP Specification](https://modelcontextprotocol.io/)

---

*Last updated: August 24, 2026*