Cursor + Figma Workflow — Buat UI dari Context Bundle

Composer Cursor dapat menulis banyak kode UI. Yang tidak bisa dilakukannya adalah membaca file Figma Anda. Tempel screenshot dan ia menebak — spacing yang salah, nilai warna yang ditemukan, nama komponen yang dibuat-buat yang tidak cocok dengan apa pun di codebase Anda. Masalahnya bukan pada modelnya. Itu adalah konteks terstruktur yang hilang.

figmascope memperbaiki itu. Ia mengekspor file Figma Anda sebagai bundle zip: design token, pohon tata letak per-layar, render referensi 2×, inventaris komponen, dan string UI — semua yang dibutuhkan agen Cursor untuk menghasilkan kode yang akurat daripada kode yang terlihat masuk akal.

Panduan ini mencakup pipeline lengkap: URL Figma → context bundle → prompt Cursor → output yang ditinjau.

Apa yang ada dalam bundle

Ketika figmascope mengekspor file Anda, zip berisi:

CONTEXT.md — spesifikasi yang dibaca agen terlebih dahulu. Mencantumkan framework target, sumber token, batasan, dan kesenjangan yang diketahui.
tokens.json — design token bertipe: spacing, border-radius, warna, tipografi.
screens/<name>.json — representasi intermediate per-layar: node stack/overlay/absolute/leaf dengan fill, spacing, dan referensi string.
screens/<name>.png — render referensi 2× untuk konfirmasi visual.
components/inventory.json — id, nama, dan tipe komponen.
strings.json — string UI dengan kunci resource notasi titik.
_meta.json — manifes build: nama file sumber, cap waktu ekspor, peringatan.

Bundle tetap ada di mesin Anda. Tidak pernah diunggah ulang ke mana pun.

Langkah 1: Buat bundle

Kunjungi figmascope dan tempel URL file Figma Anda ke dalam kolom input. Ekporter berjalan di browser Anda terhadap Figma REST API — Anda akan memerlukan personal access token untuk pertama kali (disimpan di localStorage, tidak pernah dikirim ke server figmascope).

Tekan Ekspor Konteks Agen. Halaman memproses setiap frame, menyelesaikan token, membangun IR, kemudian mengunduh context-bundle.zip ke mesin Anda.

Jika file Anda memiliki banyak frame, hanya frame tingkat atas yang bukan komponen atau thumbnail yang disertakan. _meta.json menunjukkan dengan tepat frame mana yang diekspor dan peringatan apa pun (fill gradient, efek yang tidak didukung).

Langkah 2: Ekstrak ke proyek Anda

Letakkan bundle di tempat yang dapat dilihat Cursor — direktori design/ di root repo Anda adalah pola yang paling bersih.

# dari root proyek Anda
unzip ~/Downloads/context-bundle.zip -d ./design/

# verifikasi struktur
ls design/
# CONTEXT.md  _meta.json  components/  screens/  strings.json  tokens.json

Tambahkan design/ ke .gitignore jika Anda tidak ingin melakukan commit bundle. Atau commit — ini deterministik; file Figma yang sama pada status yang sama selalu menghasilkan bundle yang sama, jadi diff bermakna.

Langkah 3: Tambahkan cuplikan `.cursorrules`

Cursor membaca .cursorrules di root repo dan menambahkannya ke setiap konteks chat. Di sinilah Anda menghubungkan agen ke bundle.

# .cursorrules

When building UI screens:
1. Read ./design/CONTEXT.md first. It specifies the target framework and constraints.
2. Use tokens from ./design/tokens.json for all spacing, color, radius, and typography values.
3. Reference ./design/screens/<name>.json for layout structure and node hierarchy.
4. Match ./design/screens/<name>.png for visual confirmation — use it as a sanity check, not the source of truth.
5. Use string keys from ./design/strings.json rather than hardcoding UI copy.
6. Do not invent token values. If a value isn't in tokens.json, flag it.

Satu blok ini mencegah tiga sumber drift yang paling umum: warna yang ditemukan, string yang di-hardcode, dan tebak-tebakan tata letak dari screenshot.

Langkah 4: Buka Cursor Composer dan implementasikan layar

Buka Composer (Cmd+I di macOS). Pin file sebelum prompting: klik ikon paperclip dan tambahkan design/CONTEXT.md, design/tokens.json, dan design/screens/home.json. Kemudian prompt:

Implement the home screen from ./design/screens/home.json.

Constraints:
- Target framework and component conventions are in ./design/CONTEXT.md
- All spacing, color, and radius values must come from ./design/tokens.json
- UI strings must use keys from ./design/strings.json
- The root node is a stack (vertical). Children are declared in order in the JSON.
- Do not invent any values not present in the token or IR files.

Cursor akan membaca file yang di-pin, memetakan node IR ke primitif framework Anda, dan menghasilkan implementasi. Output direferensikan token — jika Anda memeriksa kode yang dihasilkan, setiap nilai spacing harus dapat dilacak kembali ke kunci di tokens.json.

Langkah 5: Tinjau dan iterasi

Buka design/screens/home.png di samping output yang dirender. PNG adalah ekspor 2× dari Figma — ia menunjukkan dengan tepat seperti apa tampilan desain yang seharusnya. Perbedaan bermakna: mereka menunjuk ke celah pemetaan IR atau nilai token yang tidak diterapkan.

Masalah umum dan prompt tindak lanjut:

Token drift — agen menggunakan hex yang di-hardcode alih-alih token:

Compare every color value in the generated component against ./design/tokens.json.
List any colors that don't match a token key. Replace them with the correct token reference.

Komponen hilang — IR mereferensikan ID komponen yang tidak diselesaikan agen:

The IR references componentId "btn-primary-01". Check ./design/components/inventory.json
for its name and type, then implement a placeholder with that name and the correct token values.

Tata letak melenceng — spacing atau perataan tidak cocok dengan PNG:

The vertical gap between the header and the card list should be spacing.24 from tokens.json (24dp).
Your output uses 16px. Fix it.

Apa yang berhasil, apa yang tidak

Berhasil dengan baik: layar datar dengan tata letak stack, spacing dan warna berbasis token, teks dengan referensi string, pola kartu dan daftar sederhana. Cursor menangani ini dengan baik setelah IR ada dalam konteks — ia berhenti menebak dan mulai memetakan.

Kurang berhasil: overlay yang diposisikan absolut kompleks (Cursor terkadang salah membaca koordinat offset), fill gradient (ditandai sebagai peringatan di _meta.json — Cursor akan mendekati), dan ikon vektor (IR hanya menyimpan ID referensi, bukan data path).

Hanya screenshot vs. bundle: hanya screenshot lebih cepat untuk dimulai tetapi tidak deterministik. Setiap sesi dimulai dari awal. Model mungkin berhasil dengan spacing sekali dan melewatkannya pada turn berikutnya. Bundle dapat direferensikan di seluruh sesi — Cursor dapat memeriksa outputnya sendiri terhadap file token kapan saja tanpa mengunggah ulang apa pun.

Tips: periksa peringatan `_meta.json` sebelum prompting

Sebelum prompt implementasi pertama Anda, baca design/_meta.json. Array warnings mencantumkan apa pun yang tidak dapat sepenuhnya diselesaikan oleh ekporter: fill gradient, pemetaan token yang hilang, frame dengan gambar tertanam. Tambahkan catatan tentang ini ke prompt Anda sehingga agen tidak mencoba mengimplementasikannya dan secara diam-diam kembali ke nilai yang di-hardcode.

cat design/_meta.json | python3 -m json.tool | grep -A 20 '"warnings"'

Jika outputnya menunjukkan "gradientFill: not fully supported" pada node tertentu, beri tahu Cursor untuk melewati latar belakang node tersebut dan meninggalkan komentar // TODO: gradient sebagai gantinya.

Ringkasan

Workflow-nya adalah: ekspor sekali, referensikan di mana saja. Bundle adalah spesifikasi yang stabil dan dapat dibaca mesin yang dapat dikonsultasikan Cursor di berbagai turn tanpa memproses ulang desain. Anda mendapatkan kode yang akurat token, direferensikan string, dan tata letak benar alih-alih perkiraan screenshot — dan ketika sesuatu menyimpang, Anda dapat mengarahkan agen kembali ke sumber kebenaran dalam satu baris.

Jalankan ini sendiri di figmascope.dev — tempel URL Figma Anda, tekan Ekspor Konteks Agen, dan ekstrak bundle ke workspace Cursor Anda dalam waktu kurang dari dua menit.