Cara memindahkan halaman di balik login ke Figma

Layar yang paling dibutuhkan baru terlihat setelah login. Justru layar itu yang akhirnya digambar ulang dengan tangan.

Layar yang paling menarik di sebuah produk baru terlihat setelah login. Dasbor berisi data Anda sendiri, halaman pengaturan, kondisi setelah langkah ketiga di sebuah wizard. Justru layar seperti itu yang akhirnya digambar ulang di Figma dengan tangan, karena alat impornya tidak sampai ke sana.

Penyebabnya selalu sama, dan lebih sederhana daripada yang dikira orang.

Kenapa alat berbasis URL tidak bisa melewati login

Konverter yang meminta URL akan memuat halaman itu di servernya sendiri. Server tersebut tidak punya cookie Anda, tidak punya sesi Anda, tidak punya faktor kedua Anda. Yang dia terima sama persis dengan yang diterima orang asing yang membuka tautan itu di browser baru, yaitu layar login.

Setelah itu terjadi salah satu dari tiga hal, dan ketiganya sama-sama tidak berguna.

• Yang terimpor adalah formulir login, bukan layar Anda.
• Yang datang cuma kerangka kosong, karena aplikasinya menggambar cangkangnya lalu berhenti tanpa data.
• Error atau timeout.

Tembok yang sama berdiri di depan layar berbayar, panel admin internal, staging di balik VPN, halaman yang dibatasi alamat IP, dan kondisi apa pun yang baru ada setelah beberapa tindakan di antarmuka. Satu tautan tidak menggambarkan hal-hal itu.

Jalan memutar dan harganya

Saran yang biasa muncul adalah menyerahkan cookie atau kredensial kepada alat itu supaya dia bisa login mewakili Anda. Kadang berhasil, dan harganya dibayar di muka.

Anda menyerahkan sesi yang masih hidup ke layanan pihak ketiga. Kalau kantor Anda memakai SSO dan menganggapnya serius, itu pelanggaran kebijakan yang telak. Autentikasi dua faktor tetap tidak bisa dilewati. Dan sekalipun semuanya jalan, kondisinya tetap hilang. Keranjang berisi tiga barang, formulir yang sudah terisi separuh, panel yang sedang terbuka, semua itu tidak bisa dipulihkan oleh sebuah sesi, karena itu hasil tindakan Anda dan bukan sebuah alamat.

Jawaban umum berikutnya adalah tangkapan layar. Tapi di Figma benda itu masuk sebagai gambar. Tidak ada teks yang bisa disunting, tidak ada layer yang bisa digeser, tidak ada warna yang bisa diambil.

Pendekatan lain, yaitu menangkap dari browser Anda sendiri

Ekstensi bekerja di dalam tab yang sudah terbuka di komputer Anda. Anda sudah login, Anda sudah sampai ke kondisi yang dituju, dan pada saat itulah yang tampil di layar ditangkap apa adanya.

Ada beberapa akibat dari cara kerja ini, dan akibatnya lebih penting daripada tekniknya.

• Tidak ada kredensial yang dikirim ke mana pun. Tidak ada yang menanyakannya, karena login sudah terjadi sebelumnya.
• SSO, autentikasi dua faktor, VPN kantor, semuanya sudah selesai sebelum Anda menekan tombol tangkap.
• Kondisinya ikut terbawa. Apa yang Anda lihat setelah tiga klik akan tertangkap lengkap dengan hasil tiga klik itu.
• Pemrosesannya di browser. Plugin Figma milik Snapture mendeklarasikan allowedDomains: ["none"], artinya Figma sendiri yang melarangnya melakukan permintaan jaringan apa pun. Itu bisa Anda periksa di manifest plugin tanpa perlu percaya pada ucapan kami.

Yang sampai di Figma berupa layer sungguhan. Teksnya bisa disunting, Auto Layout dipulihkan, warna dan tipografi diangkat jadi style, kartu yang berulang disatukan jadi komponen. Angka-angkanya dari situs nyata diterbitkan di halaman bukti.

Apa saja yang bisa ditangkap

Soal modal dan menu dropdown. Yang dibaca adalah DOM dalam keadaannya sekarang, bukan halaman yang dimuat ulang, jadi yang sedang terbuka tetap terbuka. Penangkapannya dijalankan lewat pintasan papan ketik dan bukan lewat klik di panel, dan justru itu yang membuat lapisan overlay tidak sempat tertutup karena kehilangan fokus.

Langkahnya

1. Login, lalu bawa layarnya ke kondisi yang Anda mau. Buka yang harus terbuka, isi yang harus terisi.
2. Tekan AltShiftC untuk satu halaman penuh. Untuk sebagian saja, AltShiftE memilih elemen dan AltShiftR memilih area. Semuanya juga ada di dalam ekstensinya.
3. Berkasnya tersimpan di komputer Anda. Bisa juga disalin ke papan klip.
4. Di Figma, jalankan Snapture Import lalu seret berkasnya ke sana atau tekan CtrlV.

Bagi yang khawatir soal data di layar yang ditangkap, berkasnya ada di komputer Anda, tidak dikirim ke mana pun, dan bisa dibuka dengan editor teks untuk melihat isinya.

Yang tetap tidak bisa

Batasannya ada, dan lebih baik diketahui sejak awal.

• Halaman chrome:// dan Chrome Web Store. Ekstensi memang dilarang masuk ke sana oleh aturan browser.
• Canvas dan WebGL datang sebagai gambar. Di dalam adegan 3D tidak ada layer, jadi tidak ada yang bisa diurai.
• <iframe> lintas domain ditangkap sebagai gambar. Browser tidak mengizinkan isinya dibaca, dan itu memang seharusnya begitu.
• Video datang sebagai frame yang sedang tampil.

Selebihnya, apa pun yang ada di halaman biasa akan jadi layer.

English · 한국어 · 日本語 · 简体中文 · 繁體中文 · Español · Português · Français · Deutsch · Русский · Italiano · Bahasa Indonesia