Figma ke Claude Code — Konteks Desain Terstruktur untuk CLI Anthropic

Claude Code adalah agen pengkodean yang andal. Beri ia screenshot layar Figma dan ia akan menghasilkan sesuatu yang terlihat agak benar. Beri ia bundel konteks terstruktur — token desain bertipe, IR layout, render referensi, dan spesifikasi yang dapat dibaca mesin — dan ia menghasilkan kode yang benar-benar dapat Anda kirim.

figmascope menghasilkan bundel itu di sisi klien, sepenuhnya di browser Anda. Tidak ada backend, tidak ada unggahan, tidak ada layanan perantara dengan akses ke file Figma Anda. Panduan ini membahas alur kerja Figma → figmascope → Claude Code lengkap dengan contoh CLI nyata. Jika Anda menggunakan Cursor alih-alih Claude Code, lihat Figma ke Cursor untuk alur kerja khusus Cursor.

Prasyarat

• Claude Code terpasang: npm install -g @anthropic-ai/claude-code (atau metode instalasi terkini per docs.anthropic.com/claude-code)
• URL file Figma
• Figma Personal Access Token dengan cakupan File content: read-only

Ekspor bundel konteks dari figmascope

Buka figmascope.dev, tempel URL file Figma dan token Anda, klik Export Context Bundle. Anda akan mendapatkan zip seperti figmascope-ABC123.zip.

Unzip ke direktori design/ di proyek Anda:

unzip figmascope-ABC123.zip -d design/

Pohon yang dihasilkan:

design/
├── CONTEXT.md
├── tokens.json
├── _meta.json
├── components/
│   └── inventory.json
├── screens/
│   ├── Home.json
│   ├── Home.png
│   ├── Settings.json
│   └── Settings.png
└── strings.json

Commit ke source control. Manifes _meta.json mencatat stempel waktu ekspor dan kunci file Figma, sehingga tim selalu tahu versi desain mana yang sesuai dengan bundel.

Cara Claude Code membaca bundel konteks

CONTEXT.md adalah titik masuk. Ini adalah dokumen spesifikasi terstruktur yang memberi tahu agen:

• Frame mana yang diekspor dan dalam urutan apa
• Konvensi penamaan token yang digunakan
• Catatan cakupan — mis. layar mana yang di luar cakupan karena bukan node frame, atau komponen mana yang dikecualikan
• Contoh kerja yang menunjukkan cara referensi token seperti { "$ref": "color.accent" } diselesaikan ke nilai di tokens.json
• Peringatan apa pun yang dipancarkan selama ekspor (tabrakan dalam kunci string, mode layout yang disimpulkan pada kontainer)

Claude Code membaca file sebelum bertindak. Memulai sesi dengan CONTEXT.md mengorientasikan agen sebelum menyentuh JSON layar apa pun.

Memulai sesi Claude Code

Pendekatan paling langsung — luncurkan claude di root proyek Anda dan arahkan ke direktori desain:

claude

Kemudian dalam sesi interaktif:

Baca design/CONTEXT.md, lalu implementasikan layar Home sebagai komponen React.

Gunakan:
- design/tokens.json untuk semua nilai token desain
- design/screens/Home.json untuk pohon layout
- design/screens/Home.png sebagai referensi visual
- design/strings.json untuk semua teks (gunakan kunci dot-notation sebagai pengenal i18n)

Batasan:
- Tailwind CSS untuk gaya, petakan nilai token ke konfigurasi tema
- TypeScript
- Tidak ada nilai warna atau spasi yang di-hardcode — semua nilai harus berasal dari token

Claude Code akan membaca file secara berurutan, menyelesaikan referensi token dari IR, dan menghasilkan komponen yang mencerminkan sistem desain Anda yang sebenarnya bukan perkiraan generik.

Prompt satu kali dengan --print

Untuk pipeline CI atau codegen berbasis skrip, gunakan mode non-interaktif --print:

claude --print "$(cat <<'EOF'
Baca design/CONTEXT.md. Kemudian implementasikan design/screens/Home.json sebagai
src/screens/Home.tsx (React + Tailwind + TypeScript).
- Semua token dari design/tokens.json
- Semua string dari design/strings.json menggunakan kunci dot-notation
- Referensi visual: design/screens/Home.png
- Nama komponen dari design/components/inventory.json
EOF
)"

Heredoc membuat prompt tetap dapat dibaca dalam skrip shell. --print menulis respons Claude ke stdout, sehingga Anda dapat menyalurkan atau menangkapnya sesuai kebutuhan.

Claude Code bekerja paling baik ketika Anda memberinya satu layar dalam satu waktu. IR layout untuk satu layar sudah padat; jaga agar sesi tetap fokus.

Proyek multi-layar — pendekatan yang masuk akal

Untuk file dengan banyak frame, kerjakan secara bertahap. Loop pada file layar:

for screen_json in design/screens/*.json; do
  screen=$(basename "$screen_json" .json)
  echo "Mengimplementasikan $screen..."
  claude --print "$(cat <<EOF
Baca design/CONTEXT.md sekali. Kemudian implementasikan design/screens/${screen}.json
sebagai src/screens/${screen}.tsx. Rujuk design/screens/${screen}.png
untuk akurasi visual. Gunakan token dari design/tokens.json.
Jangan re-implementasikan komponen yang sudah ada di src/components/.
EOF
)"
done

Instruksi "jangan re-implementasikan komponen yang sudah ada" penting ketika inventaris komponen dibagikan. Claude Code dapat membaca design/components/inventory.json untuk mengidentifikasi komponen mana yang sudah diimplementasikan dan mengimpornya daripada membuatnya ulang.

Menyambungkan token desain

tokens.json yang diekspor oleh figmascope menggunakan struktur bersarang mirip W3C dengan field $value dan $type:

{
  "color": {
    "surface":    { "$value": "#f6f2ea", "$type": "color" },
    "ink":        { "$value": "#1f1d1a", "$type": "color" },
    "accent":     { "$value": "#d96a3a", "$type": "color" }
  },
  "spacing": {
    "1": { "$value": "4px",  "$type": "dimension" },
    "2": { "$value": "8px",  "$type": "dimension" },
    "4": { "$value": "16px", "$type": "dimension" },
    "8": { "$value": "32px", "$type": "dimension" }
  },
  "typography": {
    "body": {
      "fontFamily": { "$value": "Inter",  "$type": "fontFamily" },
      "fontSize":   { "$value": "14px",   "$type": "dimension" },
      "lineHeight": { "$value": 1.45,     "$type": "number" }
    }
  }
}

Minta Claude Code untuk menghasilkan blok ekstensi tema tailwind.config.ts dari file ini sebagai langkah pertama, sebelum mengimplementasikan layar apa pun. Dengan begitu semua implementasi layar berikutnya dapat menggunakan alias token Tailwind secara konsisten:

claude --print "Baca design/tokens.json dan hasilkan blok
theme.extend untuk tailwind.config.ts. Petakan token warna ke theme.extend.colors,
token spasi ke theme.extend.spacing, dan tipografi ke
theme.extend.fontFamily / fontSize. Keluarkan hanya objek konfigurasi."

Lihat Ekspor Token Desain untuk Agen AI untuk penyelaman mendalam tentang format token dan fallback inferensi frekuensi yang digunakan figmascope ketika Figma Variables tidak disiapkan.

Menangani lapisan string

Setiap node teks dalam file Figma mendapatkan slot di strings.json. Kunci menggunakan dot-notation yang berasal dari hierarki frame:

{
  "home.hero.title":        "Semua yang Anda butuhkan",
  "home.hero.subtitle":    "Kirim lebih cepat dengan konteks terstruktur",
  "home.cta.primary":      "Mulai",
  "settings.account.heading": "Pengaturan akun"
}

Instruksikan Claude Code untuk menggunakan kunci ini sebagai pengenal i18n. Daripada hardcode string "Semua yang Anda butuhkan" di JSX, komponen yang dihasilkan memanggil t('home.hero.title') (atau padanan di perpustakaan i18n Anda). File sumber daya sudah ada di strings.json — Anda hanya perlu mengimpornya atau menyambungkannya ke pengaturan i18n Anda.

Jika figmascope mendeteksi tabrakan — dua node yang di-hash ke kunci yang sama — ia mengeluarkan peringatan strings-collision di _meta.json dan menambahkan sufiks numerik untuk membedakan. Periksa _meta.json sebelum memulai sesi agar Anda tahu apa yang diharapkan.

Integrasi CLAUDE.md

Jika Anda menggunakan file konteks proyek CLAUDE.md, tambahkan bagian singkat yang mengarahkan agen ke direktori desain. Ini cocok dengan pendekatan yang dijelaskan di Handoff Desain AI dan melengkapi mengapa figmascope berbeda dari plugin Figma inspector.

Tambahkan bagian desain seperti ini:

## Konteks desain

Token desain, IR layout, render referensi, dan string ada di `design/`.
Selalu baca `design/CONTEXT.md` sebelum mengimplementasikan layar apa pun.
Nilai token ada di `design/tokens.json` — jangan pernah hardcode warna atau spasi.
Nama kanonik komponen ada di `design/components/inventory.json`.

Ini berarti setiap sesi Claude Code dalam proyek akan secara otomatis memiliki konteks desain sebagai bagian dari pengetahuan kerjanya, tanpa Anda harus mengulanginya di setiap prompt.

Apa yang sebenarnya benar dilakukan agen

Dengan konteks terstruktur, Claude Code secara andal mendapatkan:

• Nilai spasi — karena ada di tokens.json sebagai spacing.4 → 16px, bukan ditebak dari screenshot
• Warna — nilai hex yang tepat, bukan "terlihat seperti oranye hangat"
• Tipografi — keluarga font, ukuran, berat, tinggi baris, semuanya bertipe
• Arah layout — node stack memiliki field direction dan gap yang eksplisit
• Penamaan komponen — inventory.json adalah sumber kanonik, sehingga tidak ada nama yang dibuat-buat
• Teks — strings.json mencegah agen memparafrase atau membuat teks placeholder

Yang masih memerlukan tinjauan manusia: state interaksi (hover, focus, active) yang tidak terlihat di frame Figma statis, waktu animasi, dan breakpoint responsif yang tidak didesain secara eksplisit dalam file. IR menangkap layout statis; perilaku dinamis di luar cakupan.

Menggunakan --dangerously-skip-permissions di lingkungan terkontrol

Untuk pipeline otomatis di mana Anda ingin Claude Code beroperasi tanpa prompt persetujuan interaktif — misalnya dalam langkah CI yang menghasilkan stub komponen setelah pembaruan desain — Anda dapat menggunakan --dangerously-skip-permissions. Hanya sesuai di lingkungan kotak pasir tanpa kredensial produksi.

claude --dangerously-skip-permissions --print "$(cat <<'EOF'
Baca design/CONTEXT.md. Hasilkan file stub komponen untuk komponen apa pun
di design/components/inventory.json yang belum ada di src/components/.
Gunakan format komponen fungsional TypeScript + React. Sertakan komentar TODO
untuk setiap komponen yang mereferensikan JSON layar yang relevan.
EOF
)"

Dalam alur kerja developer produksi, biarkan izin interaktif. Prompt ada untuk alasan yang baik — Claude Code dapat dan akan menulis file, dan Anda ingin tahu yang mana sebelum dilakukan.

Memeriksa peringatan ekspor sebelum melakukan prompt

figmascope mengeluarkan peringatan ke _meta.json untuk kondisi yang mungkin mempengaruhi kualitas output. Periksa sebelum memulai sesi Claude Code:

python3 -c "
import json
meta = json.load(open('design/_meta.json'))
for w in meta.get('warnings', []):
    print(f\"{w['code']}: {w['message']}\")
print(f\"Frame diekspor: {meta['frameCount']}\")
print(f\"Sumber token: {meta.get('tokensSource', 'variables')}\")
"

Dua peringatan yang perlu diperhatikan:

• layout-mode-none-inferred — sebuah frame tidak memiliki auto-layout yang ditetapkan. figmascope menyimpulkan layout dari posisi absolut anak, yang kurang andal. Tandai layar yang relevan dalam prompt Anda: "Layar ini menggunakan pemosisian absolut; hasilkan sesuai itu."
• strings-collision — dua node teks menghasilkan kunci sumber daya yang sama. figmascope membedakan dengan sufiks numerik, tetapi Anda harus memverifikasi string di strings.json sudah benar sebelum agen menghasilkan panggilan i18n.

Alur kerja Android dan iOS

Claude Code tidak terbatas pada framework web. Bundel konteks bersifat agnostik framework — IR layout dan token adalah data, bukan CSS. Untuk Jetpack Compose:

claude --print "$(cat <<'EOF'
Baca design/CONTEXT.md dan design/tokens.json.

Implementasikan design/screens/Home.json sebagai layar Jetpack Compose.
- Petakan token warna ke MaterialTheme ColorScheme
- Petakan token spasi ke nilai Dp (hapus sufiks 'px', gunakan .dp)
- Petakan token tipografi ke MaterialTheme.typography
- Gunakan nama komponen dari design/components/inventory.json sebagai nama Composable
- Rujuk design/screens/Home.png untuk akurasi visual
EOF
)"

Node stack dalam IR secara alami dipetakan ke Column (arah: vertikal) dan Row (arah: horizontal) dalam Compose. Node leaf dengan type: "text" menjadi composable Text; type: "image" menjadi Image atau placeholder. Lihat Jetpack Compose dari Figma untuk pola lengkapnya.

Membuat versi bundel desain

Perlakukan direktori design/ seperti dependensi proyek lainnya. Ketika desain berubah secara signifikan, ekspor ulang dari figmascope.dev, commit, dan catat perubahan di PR:

# Periksa kapan bundel terakhir diekspor vs kapan file Figma terakhir dimodifikasi
python3 -c "
import json
from datetime import datetime
meta = json.load(open('design/_meta.json'))
exported = datetime.fromisoformat(meta['exportedAt'].replace('Z', '+00:00'))
modified = datetime.fromisoformat(meta['figmaLastModified'].replace('Z', '+00:00'))
delta = modified - exported
if delta.total_seconds() > 0:
    print(f'PERINGATAN: File Figma dimodifikasi {delta} setelah ekspor terakhir')
else:
    print('Bundel sudah terkini')
"

Bundel yang kedaluwarsa berarti agen bekerja dari desain yang sudah usang. Pemeriksaan stempel waktu menangkap ini sebelum Anda menghabiskan waktu untuk sesi codegen yang didasarkan pada spesifikasi yang sudah tidak berlaku.