Mulai dari halaman yang sedang Anda buka.

Versi publik memakai alur Capture → otomatis disalin → Paste di canvas. Anda tidak memerlukan pairing atau token akun Figma.

Memasang WebFig Capture

WebFig Capture sedang disiapkan untuk Chrome Web Store. Tautan pemasangan resmi akan ditambahkan di website ini setelah listing tersedia.

Setelah terpasang, pin ikon WebFig pada toolbar Chrome agar mudah dibuka saat Anda ingin capture halaman.

Capture dan paste

  1. Buka website yang ingin Anda capture. Halaman internal Chrome dan Chrome Web Store tidak dapat dicapture.
  2. Buka popup WebFig dan pilih ukuran serta tema. Anda dapat memakai beberapa viewport sekaligus.
  3. Klik Full Page untuk seluruh halaman, Selection untuk elemen, atau Area untuk drawer/panel. Pada Area, drag mengelilingi panel, lepaskan, periksa pratinjau, lalu klik Capture panel. Hasil otomatis disalin setelah proses selesai, meskipun popup tertutup.
  4. Tunggu notifikasi berhasil disalin. Jika auto-copy gagal, hasil tetap tersimpan: buka tab Copy & Paste di Figma dan klik Copy to Figma.
  5. Buka file Design Figma, klik area canvas yang kosong, dan tekan Ctrl+V. Paste dilakukan pada canvas, bukan halaman Recents, Settings akun, atau kotak teks.

Pertanyaan umum

Clipboard sudah tertimpa. Harus capture ulang?

Tidak. Buka popup kembali, lalu klik Copy to Figma atau Copy lagi ke Figma pada hasil tersimpan. Hasil terakhir disimpan terpisah dari clipboard sampai diganti capture baru atau Anda hapus lewat ikon tempat sampah.

Apakah saya harus punya font Arial?

Arimo menjadi pilihan bawaan dan tersedia melalui font Google di Figma. Buka Font & opsi di popup untuk memilih Inter atau mempertahankan font website. Pilihan diterapkan saat Copy atau Download tanpa capture ulang. Penggantian font bisa mengubah bentuk dan jarak teks. Download font disediakan untuk aplikasi lain dan tidak memasang font otomatis ke Windows.

Teks hasil paste tidak terlihat?

Jika memilih Pertahankan font website, Figma perlu memiliki font tersebut. Buka hasil capture yang tersimpan lalu klik Teks tidak terlihat? Copy dengan Inter dan paste ulang ke canvas. Anda tidak perlu capture ulang. Pilihan Inter berlaku juga pada ekspor berikutnya. Jika masih gagal, simpan .webfig lalu impor melalui plugin development WebFig di Figma. Versi baru sedang diuji pada berbagai website.

Selection kehilangan background atau drawer terpotong?

Mulai v0.5.7, Selection menyertakan warna latar solid dari pembungkus dan mengambil isi panel scroll yang dipilih. Untuk drawer lengkap, gunakan Area: drag mengelilingi drawer dari header sampai footer, lepaskan, lalu konfirmasi Capture panel. Gunakan Perluas/Perkecil jika kotak belum sesuai. Batas Area mengikuti panel DOM yang ditampilkan agar hasil tetap berupa layer editable. Isi details yang masih tertutup tidak dibuka otomatis. Capture ulang diperlukan untuk hasil baru.

Ikon muncul sebagai NOGLYPH?

Pada versi baru, ikon font dicapture sebagai PNG tersendiri agar bentuk aslinya tetap terlihat. Teks biasa tetap editable. Reload extension lalu capture ulang halaman; hasil lama belum menyimpan gambar ikon tersebut.

Posisi teks atau garis daftar berbeda?

Mulai v0.5.4, lebar Inter/Arimo disesuaikan ke ruang baris asli, baseline mengikuti pengukuran browser, dan border diekspor per sisi. Reload extension lalu capture ulang untuk memakai pengukuran baru. Bentuk huruf tetap mengikuti font yang dipilih; hasilnya perlu dibandingkan dengan halaman asli.

Kenapa Chrome menampilkan pesan debugging?

WebFig memakai izin debugger saat mengatur ukuran viewport atau tema yang berbeda dari browser. Ini diperlukan untuk capture responsif. Setelah selesai, ukuran dan tema dipulihkan dan debugger dilepas. Capture hanya pada ukuran dan tema browser tidak perlu mengaktifkan debugger.

Full Page belum mencapai semua isi halaman?

Mulai v0.5.5, WebFig menggulir dokumen lalu memanjangkan panel tabel dan pembungkus yang membatasi tingginya. Reload extension lalu Capture Full Page ulang untuk mengambil baris yang sebelumnya terpotong. Baris yang telah dimuat website dapat ikut memanjang; pagination tidak berpindah halaman otomatis. Feed tanpa akhir dibatasi waktu dan langkah; daftar virtual, pagination, atau konten yang tidak tersedia di DOM mungkin tidak dapat diambil seluruhnya. Anda dapat memilih Lewati auto-scroll dan melihat catatan batas pada hasil.

Copy tidak masuk ke Figma?

Klik Copy kembali dari popup, buka file Design, klik canvas, dan paste. Jika tetap gagal, simpan .webfig sebagai cadangan. Impor file itu dapat dilakukan dengan plugin development WebFig di Figma. Jangan memasukkan Personal Access Token akun Figma ke extension.

Apakah setiap website akan sama persis?

Hasil bergantung pada struktur website, font, gambar yang tersedia, efek CSS, dan batas Figma. SVG memakai image fill pada clipboard; file .webfig mempertahankan source SVG. Beberapa efek dan elemen yang tidak didukung menghasilkan warning atau placeholder. WebFig tidak menjanjikan hasil identik pada seluruh website.

Mengedit dengan Auto Layout

Buka Font & opsi → Tata letak di Figma → Auto Layout — mudah diedit. Capture ulang untuk metadata layout yang lengkap, atau Copy ulang hasil tersimpan. Container sederhana menjadi Auto Layout horizontal/vertikal; tabel biasa menjadi Table vertikal → Row berisi satu baris grid → Cell. Pilih layer Row untuk drag, duplikat, atau hapus satu baris beserta semua selnya; baris lain ikut merapat. Lebar kolom awal tetap sejajar dan kolom terakhir mengikuti perubahan lebar tabel. Mengubah satu sel tidak menyinkronkan seluruh kolom. Tabel dengan sel yang melintasi beberapa baris (rowspan) tetap memakai grid dan menampilkan catatan keterbatasan. Bagian kompleks yang belum didukung tetap memakai posisi asli dan dicatat pada Catatan capture. Pilih Tampilan akurat untuk mempertahankan posisi website.

Mengapa file .webfig tidak bisa di-drag ke Figma?

.webfig adalah format cadangan WebFig, bukan file .fig milik Figma. Tombol Cadangan menyimpan capture agar bisa dipakai lagi di kemudian hari.

  1. Buka popup WebFig → Font & opsi → Buka cadangan .webfig.
  2. Pilih file cadangan, lalu klik Copy to Figma.
  3. Buka canvas file Design Figma dan tekan Ctrl+V.

Jangan drag file .webfig langsung ke canvas Figma: format ini tidak dikenali oleh Figma. Cadangan juga bisa diimpor melalui plugin development WebFig yang dipasang terpisah, misalnya untuk memakai source SVG. Alur utama tetap Capture → otomatis disalin → Ctrl+V.

Dukung pengembangan WebFig

Semua fitur tetap gratis. Jika ingin mendukung secara sukarela, buka halaman dukungan QRIS. Tidak ada kewajiban membayar atau mengirim bukti transfer.

Melaporkan masalah

Setelah listing resmi tersedia, gunakan tab Support pada halaman WebFig di Chrome Web Store. Sertakan versi Chrome dan WebFig, langkah reproduksi, viewport, dan pesan error. Sampai listing tersedia, Anda dapat menghubungi [email protected].

Jangan kirim password, token, atau capture halaman privat yang belum disamarkan. WebFig tidak menerima unggahan capture otomatis. Baca kebijakan privasi.