HTML to Figma SID

v2.6PRO

Konversi HTML → Figma dengan matching otomatis ke Design System LERN (warna → variable DS), auto-layout, gradient, SVG, multi-screen, dan capture live dari Chrome. Internal tool tim Product Design SID — alternatif gratis html.to.design.

📦 Bundle Lengkap REKOMENDASI

Plugin Figma + Chrome Extension + panduan install (TEAM-SETUP.md). Cukup download satu ini.

🧩 Plugin Figma

File plugin saja (manifest, code, ui). Untuk Import from manifest.

⚡ Chrome Extension

Untuk capture prototype JS/SPA live dari browser (multi-screen sekali klik).

Cara Install

🧩 Plugin Figma

⚡ Chrome Extension

🌐 Remote (MCP)

Download & Unzip Bundle

Klik Download Bundle di atas, lalu ekstrak ZIP ke folder lokal (Desktop atau Documents). Akan muncul struktur folder seperti ini:

📦 html-to-figma-sid-bundle-v2.6.zip→ unzip

📁 html-to-figma-sid-plugin-v2.6/

📄 manifest.json← butuh ini

📄 code.js

📄 ui.html

📁 html-to-figma-sid-chrome-v2.6/

📄 TEAM-SETUP.md

Buka Figma Desktop App

Plugin hanya bisa diinstall lewat Figma Desktop (Mac/Windows) — bukan figma.com di browser. Pastikan sudah login dengan akun SID.

💡 Belum punya Figma Desktop? Download di figma.com/downloads → pilih Desktop App untuk Mac atau Windows.

Plugins → Development → Import from manifest

Klik ikon Figma (☰) di pojok kiri atas → Plugins → Development → Import plugin from manifest…

Figma Desktop

File

Edit

Plugins ▾

Widgets

Browse plugins in Community

Recents

Development ▸

New plugin…

New widget…

Import plugin from manifest…

Open DevTools ⌥⌘I

Pilih File manifest.json

File picker akan terbuka. Navigasi ke folder ekstrak tadi → masuk ke html-to-figma-plugin/ → pilih manifest.json → klik Open.

📁 Finder / File Explorer — navigasi ke folder unzip

📁 html-to-figma-plugin

📄 manifest.json ← pilih ini → Open

📄 code.js

📄 ui.html

Izinkan Akses → Klik Allow

Figma menampilkan dialog izin untuk akses teamlibrary. Klik Allow — ini diperlukan agar plugin bisa membaca variable dari Design System LERN.

"HTML to Figma SID" wants permission

This plugin is requesting access to:

🔗 Team library (teamlibrary)
Untuk binding warna ke variable Design System LERN

Cancel

Allow

Plugin Siap — Atur Options & Import

Plugin muncul di Plugins → Development → HTML to Figma SID v2.6. Klik untuk menjalankan. Sebelum import, buka Import Options dan aktifkan "Gunakan Style & Variable DS" + pilih viewport yang diinginkan (Full HD, Desktop, Laptop, Tablet, iPhone 14).

Import Options — DS matching + multi-viewport

Hasil — Selection colors ter-bind ke variable LERN DS

⚠️ Agar DS matching aktif: pastikan file Figma sudah mengaktifkan library "LERN DS V2 — Customer Facing" (Assets → Libraries → toggle ON), lalu nyalakan "Gunakan Style & Variable DS" di Import Options. Tanpa ini, warna tidak ter-bind ke variable DS. Setelah import berhasil, panel Selection colors di Figma akan menampilkan nama variable (surface/card, icon/active, text/primary) — bukan hex biasa.

Download & Unzip Extension

Klik Extension .zip di atas, lalu ekstrak. Simpan folder html-to-figma-chrome di lokasi permanen (jangan di Downloads — Chrome butuh folder ini tetap ada).

📦 html-to-figma-sid-chrome-v2.6.zip→ unzip

📁 html-to-figma-sid-chrome-v2.6/

📄 manifest.json

📄 background.js

📄 content.js

📁 icons/

Buka Halaman Extensions Chrome

Ketik chrome://extensions di address bar Chrome lalu tekan Enter. Atau buka Menu Chrome (⋮) → More Tools → Extensions.

chrome://extensions

Extensions

Aktifkan Developer Mode

Di halaman Extensions, aktifkan toggle Developer mode di pojok kanan atas. Setelah ON, tombol Load unpacked akan muncul di kiri atas.

Developer mode

Load unpacked

Pack extension

Update

Load Unpacked → Pilih Folder Extension

Klik Load unpacked → pilih folder html-to-figma-chrome hasil unzip tadi (bukan file di dalamnya, tapi foldernya langsung) → klik Select Folder.

💡 Harus pilih folder, bukan file manifest.json. Kalau Chrome error "Invalid manifest", kemungkinan kamu memilih folder yang salah (terlalu dalam atau terlalu luar).

(Opsional) Izinkan Akses File Lokal

Jika prototype dijalankan dari file lokal (file://): klik Details di card extension → aktifkan "Allow access to file URLs".

Allow access to file URLs

Capture di Chrome → Import di Figma Plugin

Buka prototype di Chrome → klik ikon extension (puzzle 🧩 di toolbar) → pilih HTML to Figma SID.

Pilih mode capture: ⚡ Capture Page (1 screen saat ini) atau 📑 Capture Semua Screen (otomatis navigasi semua route/screen). Extension akan menampilkan ringkasan hasil — jumlah screen, elemen, waktu, dan ukuran data. Klik Copied! muncul otomatis setelah capture selesai.

Lalu di Figma plugin → tab ⚡ Chrome → tekan Ctrl+V / Cmd+V → klik Import dari Chrome.

Popup extension — 5 screen ter-capture (675 elemen, 1.1MB)

Tab ⚡ Chrome di plugin — data siap, pilih frame width & klik Import

💡 Gunakan Chrome Extension untuk prototype JS/SPA (Next.js, React Router, skeleton loading) yang DOM-nya sudah di-render oleh browser — extension meng-capture DOM live, bukan HTML statis. Untuk file lokal (file://), aktifkan "Allow access to file URLs" di step 5.

Hubungkan MCP Server ke Claude

Di Claude (claude.ai atau desktop app) → Settings → Connectors → Add custom connector. Masukkan URL MCP server:

URL: https://figma-mcp.product-sid.us/mcp

Setelah tersambung, Claude punya akses ke 4 tools: import_url, import_html, check_payload, dan server_stats. Connector muncul di daftar dengan label HTML to Figma SID (CUSTOM).

claude.ai → Settings → Connectors — HTML to Figma SID terdaftar sebagai custom connector

Minta Claude Import URL atau HTML

Di chat Claude, ketik perintah seperti:

              -- Import dari URL --

              Import halaman https://contoh.com/halaman ke Figma, lebar 1440px

              -- Import dari HTML string --

              Import HTML ini ke Figma: <div class="card">...</div>

Claude akan memanggil tool import_url atau import_html dan membalas dengan kode 6 karakter (berlaku 30 menit).

Buka Tab 🌐 Remote di Plugin Figma

Di plugin Figma → klik tab 🌐 Remote → isi field MCP server (sudah terisi default) dan Kode payload dengan kode dari Claude → klik Ambil & Convert.

HTML to Figma SID

Upload

⚡ Chrome

Paste

🌐 Remote

MCP server

https://figma-mcp.product-sid.us

Kode payload

ABC123

Plugin Fetch Payload & Gambar di Figma

Plugin mengambil payload dari MCP server → memproses DOM → menggambar frame di Figma secara otomatis. Hasilnya sama seperti import manual, dengan semua fitur DS matching, Auto Layout, dan gradient aktif.

⏱️ Kode payload berlaku 30 menit. Jika kedaluwarsa, minta Claude generate ulang dengan perintah yang sama.

Yang Didukung

Warna → variable Design System (LERN)
Auto Layout (deteksi flexbox/grid)
Gradient linear + radial fallback
SVG, gambar, base64
Tombol / badge / pill (box + teks)
Multi-screen → frame terpisah otomatis
Font substitution report (mis. Satoshi)
Shadow, border per-sisi, radius per-sudut
Capture live SPA via Chrome Extension
Light & Dark mode, multi-viewport

Batasan

Component swap hanya untuk component lokal di file — library component tidak bisa di-enumerate by-name via Figma API.
Paint/text style library tidak bisa di-list (hanya yang sudah dipakai di file). Variable DS bisa penuh.
Plugin jalan di Figma Desktop mode development. Tiap anggota tim perlu import sendiri lewat manifest.

Screenshot Hasil

Plugin terbuka di atas halaman Sekolah.mu

Plugin terbuka di atas halaman web Sekolah.mu

Chrome Extension — 5 screen ter-capture (675 elemen, 1.1MB)

Tab ⚡ Chrome — 5 screen siap diimport ke Figma

Import Options — DS matching, multi-viewport

Import Options — DS matching, Light/Dark, multi-viewport

Loading — memuat style & variable Design System

Import berjalan — memuat style & variable Design System

Hasil di Figma — 4 frame (Dashboard, Siswa, Kelas, Laporan)

LERN DS variable matching — Selection colors ter-bind

LERN DS variable matching — surface/card, icon/active, text/primary

Claude Connectors — HTML to Figma SID custom

Claude Connectors — HTML to Figma SID terdaftar (CUSTOM)

Kapan pakai plugin vs extension vs connector — comparison table

Struktur folder — plugin, MCP server, Chrome extension

HTML to Figma SID v2.6 · Update terakhir: 10 Juni 2026
Dibuat oleh Sobat Product SID · Internal tool — mohon tidak disebarkan ke luar tim.