AI Cursor dapat menulis banyak kode UI. Yang tidak bisa dilakukannya adalah membaca file Figma Anda. Anda menempel screenshot dan ia menebak — spacing salah, nilai warna salah, nama komponen yang dibuat-buat. Kesenjangan itu bukan model. Itu adalah context terstruktur yang hilang.

figmascope menjembatani kesenjangan itu. figmascope mengekspor file Figma sebagai bundle zip — design token, layout tree per-layar, reference render, inventori komponen, string UI — semua yang dibutuhkan language model untuk menghasilkan kode yang akurat, bukan kode yang terlihat masuk akal. Aplikasi utama berjalan sepenuhnya di browser Anda tanpa backend atau upload yang diperlukan.

Halaman ini memandu alur kerja lengkap dari URL Figma ke codegen Cursor. Jika Anda menggunakan Claude Code alih-alih Cursor, lihat Figma to Claude Code untuk alur kerja khusus Claude. Untuk gambaran lebih luas tentang apa yang membuat handoff siap-agen, lihat AI Design Handoff.

Isi context bundle

Ketika Anda menjalankan figmascope terhadap file Figma, Anda mendapatkan .zip yang berisi:

Tidak ada yang diupload. Personal Access Token Anda hidup hanya di memori browser dan hanya dikirim ke api.figma.com. Zip dirakit sisi klien dan diserahkan ke unduhan browser Anda.

Langkah 1 — Dapatkan Figma Personal Access Token

Buka Figma → Account Settings → Personal Access Tokens dan buat token dengan cakupan File content: read-only. Itu adalah minimum yang diperlukan.

Token tidak pernah meninggalkan sesi browser Anda; figmascope mengirimkannya di header X-Figma-Token pada permintaan ke api.figma.com dan tidak ke mana-mana lagi. Lihat keamanan PAT dan figmascope untuk model ancaman lengkap.

Langkah 2 — Ekspor context bundle

  1. Buka figmascope.dev di browser Anda.
  2. Tempel URL file Figma (misalnya https://www.figma.com/file/ABC123/MyDesign).
  3. Tempel Personal Access Token Anda.
  4. Klik Export Context Bundle.
  5. File figmascope-<fileKey>.zip diunduh ke mesin Anda.

Unzip ke dalam proyek Anda. Lokasi yang masuk akal adalah folder design/ di root repo:

unzip figmascope-ABC123.zip -d design/
# → design/CONTEXT.md
# → design/tokens.json
# → design/screens/Home.json
# → design/screens/Home.png
# → design/components/inventory.json
# → design/strings.json
# → design/_meta.json

Langkah 3 — Buka proyek di Cursor

Buka folder proyek Anda di Cursor seperti biasa. Direktori design/ sekarang menjadi bagian dari workspace dan pengindeks Cursor akan menyertakannya.

Sebelum Anda memberi prompt ke model, baca design/CONTEXT.md sendiri sekali. Ini memberi tahu Anda frame mana yang diekspor, apa skema penamaan token, dan mencantumkan peringatan apa pun yang dikeluarkan selama ekspor (misalnya layout-mode-none-inferred untuk frame di mana Figma tidak melaporkan auto-layout). Peringatan ini adalah yang sama yang akan ditemui agen Anda.

Langkah 4 — Tulis prompt Cursor yang efektif

Titik awal paling sederhana adalah prompt referensi yang dapat Anda tempel ke Cursor Chat:

Read design/CONTEXT.md first, then implement the Home screen.

Use:
- design/tokens.json for all color, spacing, and typography values
- design/screens/Home.json for the layout tree
- design/screens/Home.png as the visual reference
- design/strings.json for all copy (use the resource keys as i18n identifiers)
- design/components/inventory.json to match component names

Target: React + Tailwind CSS. Map token values to Tailwind config entries rather
than hardcoding hex values. Use the component names from inventory.json as
component file names (PascalCase).

Cursor Composer akan mengikuti batasan CONTEXT.md, mencari layout tree di Home.json, mengambil spacing dari tokens.json, dan menghasilkan kode yang cocok dengan sistem desain Anda daripada mendekatinya.

Model tidak mengetahui desain Anda. Ia mengetahui apa yang Anda berikan. JSON terstruktur selalu lebih unggul dari screenshot.

Langkah 5 — Petakan token ke konfigurasi framework Anda

tokens.json yang diekspor menggunakan bentuk bersarang mirip W3C:

{
  "color": {
    "surface": { "$value": "#f6f2ea", "$type": "color" },
    "accent":  { "$value": "#d96a3a", "$type": "color" }
  },
  "spacing": {
    "4":  { "$value": "16px", "$type": "dimension" },
    "8":  { "$value": "32px", "$type": "dimension" }
  },
  "radius": {
    "sm": { "$value": "4px",  "$type": "dimension" },
    "md": { "$value": "8px",  "$type": "dimension" }
  },
  "typography": {
    "body": {
      "fontFamily": { "$value": "Inter",  "$type": "fontFamily" },
      "fontSize":   { "$value": "14px",   "$type": "dimension" },
      "fontWeight": { "$value": 400,       "$type": "number" }
    }
  }
}

Untuk Tailwind, minta Cursor menghasilkan blok theme.extend di tailwind.config.js langsung dari tokens.json. Lihat Ekspor Design Token untuk AI Agent untuk pendalaman format token dan frequency inference. Struktur token cukup datar untuk ditelusuri dalam satu script Node jika Anda ingin mengotomatisasinya:

// scripts/tokens-to-tailwind.js
const tokens = require('../design/tokens.json');

const colors = Object.fromEntries(
  Object.entries(tokens.color).map(([k, v]) => [k, v.$value])
);
const spacing = Object.fromEntries(
  Object.entries(tokens.spacing).map(([k, v]) => [k, v.$value])
);

module.exports = { colors, spacing };

Langkah 6 — Tangani proyek multi-layar

Setiap frame dalam file Figma Anda menjadi screens/<FrameName>.json dan .png yang cocok. Untuk proyek dengan selusin layar, kerjakan secara bertahap. Cursor Composer menangani satu layar per sesi dengan baik; berikan JSON dan PNG layar sebagai referensi @file eksplisit:

@design/screens/Settings.json
@design/screens/Settings.png

Implement the Settings screen. Follow the same component structure
as the Home screen already implemented. Use tokens from design/tokens.json.

Inventori komponen (design/components/inventory.json) membantu Anda menghindari name drift di seluruh layar — setiap komponen yang direferensikan dalam JSON layar memiliki id dan name kanonik di inventori. Jika Anda membuat library komponen bersama, gunakan nama-nama tersebut sebagai sumber kebenaran.

Tampilan IR dalam praktik

JSON per-layar menggunakan struktur node rekursif. Contoh yang disederhanakan untuk komponen kartu:

{
  "kind": "stack",
  "name": "ProductCard",
  "direction": "vertical",
  "gap": { "$ref": "spacing.4" },
  "padding": { "top": 16, "right": 16, "bottom": 16, "left": 16 },
  "background": { "$ref": "color.surface" },
  "radius": { "$ref": "radius.md" },
  "children": [
    {
      "kind": "leaf",
      "name": "ProductImage",
      "type": "image",
      "width": 320,
      "height": 200
    },
    {
      "kind": "leaf",
      "name": "ProductTitle",
      "type": "text",
      "text": { "$ref": "strings.product.card.title" },
      "style": { "$ref": "typography.heading.sm" }
    }
  ]
}

Referensi token menggunakan string $ref yang cocok dengan kunci di tokens.json. Model dapat menyelesaikannya tanpa langkah pencarian terpisah. Lihat penjelasan per-screen IR untuk skema node lengkap.

Menjaga context tetap segar

File desain berubah. Kebiasaan yang baik: jalankan ulang figmascope setiap kali desain mengalami revisi signifikan, commit folder design/ yang diperbarui, dan catat versi dalam deskripsi PR Anda. _meta.json menyertakan timestamp dan field lastModified file Figma, sehingga Anda dapat membandingkan kapan bundle terakhir diregenerasi versus kapan file terakhir diubah.

// _meta.json
{
  "figmascopeVersion": "1.0.0",
  "fileKey": "ABC123",
  "exportedAt": "2026-05-11T09:14:00Z",
  "figmaLastModified": "2026-05-10T18:30:00Z",
  "frameCount": 12,
  "warnings": []
}

Jika warnings tidak kosong, tangani sebelum menyerahkan context ke agen. Peringatan umum: strings-collision (dua node dengan slug yang sama diselesaikan ke kunci yang sama) dan layout-mode-none-inferred (container tanpa auto-layout eksplisit, di mana figmascope menyimpulkan layout dari posisi anak).

Alur kerja Cursor yang umum

Pembaruan berbasis diff

Ketika desain mengalami revisi minor — misalnya, nilai spacing berubah dari spacing.4 ke spacing.6 pada komponen kartu — Anda dapat meminta Cursor menerapkan hanya delta daripada meregenerasi seluruh layar:

The design/tokens.json was updated. spacing.4 is now 24px instead of 16px.
Find all components using spacing.4 and update them. Do not touch anything else.

Ini berhasil karena komponen yang dihasilkan mereferensikan nama token sebagai kelas Tailwind (gap-spacing-4) daripada nilai piksel mentah. Perubahan token adalah find-and-replace, bukan redesain.

Menambahkan layar baru ke codebase yang ada

Ketika Anda menambahkan layar N ke codebase yang sudah memiliki layar 1 hingga N-1 yang diimplementasikan, tambahan prompt kunci adalah mendasarkan agen pada library komponen yang ada:

@design/screens/Checkout.json
@design/screens/Checkout.png

Implement the Checkout screen. Reuse existing components from src/components/
wherever the component name matches design/components/inventory.json.
Only create new component files for components not already implemented.
Use design/tokens.json for all token values.

Inventori komponen adalah jembatan antara nama komponen desain dan nama file codebase. Tanpanya, agen akan membuat jalur import sendiri dan membuat komponen duplikat.

Membuat baseline sistem desain

Sebelum mengimplementasikan layar apa pun, gunakan context bundle untuk menghasilkan baseline sistem desain: konfigurasi token, komponen palet warna, dan gaya tipografi dasar. Ini mendasarkan semua implementasi layar berikutnya pada fondasi yang sama:

Read design/tokens.json and design/CONTEXT.md.

Generate:
1. tailwind.config.ts theme.extend block from all tokens
2. src/styles/tokens.css with CSS custom properties for the same tokens
3. src/components/foundations/ColorPalette.tsx showing all color tokens
4. src/styles/typography.css with the typography token classes

Name all classes and variables using the token key paths
(e.g. --color-accent, text-ink, bg-surface).

Setelah baseline ini ada, setiap implementasi layar dapat mereferensikannya. Agen tidak akan menurunkan ulang warna dari desain di setiap sesi — ia akan menggunakan kelas yang sudah dihasilkan.

Keterbatasan yang perlu diketahui sejak awal

Context bundle figmascope menangkap struktur statis. Beberapa hal yang tidak dapat direpresentasikannya:

File CONTEXT.md mencatat frame mana yang dikecualikan dan alasannya, sehingga agen tidak mencoba mengimplementasikan sesuatu yang memang di luar ruang lingkup.