Kenapa Auto Layout rusak saat halaman web diimpor ke Figma

Impor selesai, semuanya di tempatnya. Lalu Anda tarik tepi frame-nya, dan semuanya berantakan.

Anda mengimpor sebuah halaman web ke Figma, panel layer terisi, dan ada yang terasa janggal. Sederet kartu yang tadinya rata di browser sekarang punya satu kartu yang turun empat piksel. Navigasi yang tadinya di tengah jadi hampir di tengah. Tidak ada yang rusak sampai bisa ditunjuk, tapi file itu sudah tidak sama dengan tangkapan layar yang Anda taruh di sebelahnya.

Hampir selalu penyebabnya Auto Layout, dipasang di tempat yang seharusnya tidak. Ini layak dipahami, karena jalan keluarnya bukan mematikan Auto Layout, melainkan tahu kapan kedua sistem tata letak itu benar-benar sepakat dan kapan sebuah alat cuma menebak.

Dua mesin tata letak yang memang tidak dirancang untuk cocok

Browser menata halaman dengan CSS. Flexbox, grid, float, aliran inline, margin yang saling melebur, line-height yang mendorong teks keluar dari kotaknya sendiri, pembulatan sub-piksel yang berbeda di tiap platform. Puluhan tahun aturan, sebagian besar berupa kasus pinggiran yang cuma penting sekali seumur hidup.

Figma menata frame dengan Auto Layout. Sistemnya jauh lebih kecil, dan itu memang disengaja. Ada arah, jarak antaranak, empat nilai padding, perataan pada dua sumbu, lalu grow dan stretch per anak. Kurang lebih hanya itu.

Auto Layout bukan implementasi ulang flexbox. Kemiripannya seperti sepeda dengan sepeda motor. Jadi ketika sebuah konverter membaca display: flex lalu menetapkan layoutMode: "HORIZONTAL", dia sedang mengklaim sesuatu, yaitu bahwa kedua sistem itu akan menaruh setiap anak di titik yang sama. Kadang klaim itu benar. Lebih sering klaim itu hampir benar, dan justru itulah yang repot.

Di mana keduanya diam-diam berbeda

Beberapa kasus nyata. Semuanya terlihat seperti flexbox, dan tidak satu pun bisa ditiru Auto Layout.

• Margin pada flex item. CSS mengizinkan anak membawa margin sendiri, termasuk margin-left: auto untuk mendorong satu kelompok ke kanan. Auto Layout hanya punya satu nilai jarak untuk seluruh frame dan sama sekali tidak punya margin per anak.
• space-around dan space-evenly. Auto Layout punya SPACE_BETWEEN. Dua yang lain membagi sisa ruang dengan cara berbeda, dan tidak ada pengaturan yang bisa menirunya.
• align-items: baseline. Teks berbeda ukuran yang duduk di garis dasar yang sama itu biasa dipakai di judul dan baris harga. Auto Layout meratakan berdasarkan tepi kotak dan titik tengah, bukan garis dasar.
• flex-grow pecahan. flex: 1 punya padanan berupa layoutGrow: 1. flex: 2 dan flex: 0.5 tidak punya padanan apa pun.
• flex-wrap. Baris yang membungkus adalah geometri yang berbeda dari baris tunggal, dan titik membungkusnya tergantung lebar kontainer saat halaman ditangkap.
• Pengukuran ulang teks. Yang satu ini paling sering menjegal. Layer teks yang diatur memeluk isinya akan diukur oleh Figma, memakai font yang dipunya Figma, pada ukuran yang dihitung Figma. Kalau hasil ukurnya meleset satu piksel saja dari browser, semua saudara di bawahnya ikut bergeser.

Yang terakhir itu sebabnya masalah sering baru muncul setelah Anda memasang font yang tadinya hilang, atau baru muncul di komputer orang lain.

Kenapa konverter tetap memasangnya

Karena file yang penuh frame Auto Layout terlihat seperti produk yang lebih baik dibanding file yang isinya kotak berposisi absolut. Enak didemokan. Bagus jadi poin di daftar fitur. Dan pada kasus umum berupa baris sederhana atau grid kartu dengan jarak seragam, hasilnya memang betul lebih baik, karena setelah itu frame bisa Anda ubah ukurannya dan perilakunya masuk akal.

Masalahnya, alat tidak bisa membedakan kasus umum dari kasus yang meleset tipis tanpa memeriksa, dan memeriksa itu lebih repot daripada tidak memeriksa.

Apa yang bisa dilakukan

Kalau sudah terlanjur diimpor

Pilih frame yang terlihat salah, lalu setel mode tata letaknya jadi none. Di Figma pengaturannya ada di bagian layout pada panel kanan. Anak-anaknya tetap di posisi sekarang, jadi kalau pergeseran sudah terjadi, langkah ini membekukannya dan bukan mengembalikannya. Karena itu biasanya lebih masuk akal mengimpor ulang daripada memperbaiki satu per satu.

Sebelum itu, periksa satu hal. Apakah font yang dipakai halaman tadi memang terpasang di komputer Anda? Font pengganti akan mengukur ulang setiap layer teks, dan sebanyak apa pun Anda mengutak-atik tata letak, file yang lebar teksnya salah tidak akan jadi benar. Figma memberi tahu font apa saja yang hilang begitu file dibuka.

Kalau sedang memilih alat

Tanyakan apa yang dia lakukan ketika kedua sistem itu tidak sepakat. Jawabannya ada tiga kemungkinan dan cuma satu yang bagus.

1. Memasang Auto Layout di setiap tempat yang terlihat flexbox. Cepat, enak didemokan, dan menyerahkan file yang diam-diam sudah bergeser kepada Anda.
2. Tidak pernah memasangnya. Selalu benar, tidak pernah berguna. Anda dapat tumpukan layer berposisi absolut yang persis tapi menyiksa untuk disunting.
3. Memasangnya hanya di tempat yang hasilnya sama dengan aslinya. Benar sekaligus berguna, tapi menuntut alat itu sungguh-sungguh memperkirakan apa yang akan dilakukan Figma lalu membandingkannya.

Cara Snapture memutuskan

Snapture memilih yang ketiga, dan mekanismenya cukup sederhana untuk dijelaskan dalam satu paragraf.

Saat menangkap halaman, dia sudah tahu posisi setiap elemen, karena yang dibaca adalah halaman yang sudah dirender, lengkap dengan persegi panjang hasil hitungan browser untuk tiap anak. Sebelum memasang tata letak, dia mensimulasikan apa yang akan dilakukan mesin Figma pada frame yang sama, mulai dari padding, jarak, perataan, sampai pembagian grow, lalu menghasilkan perkiraan persegi panjang untuk tiap anak. Setelah itu kedua kumpulan itu dibandingkan. Kalau setiap anak mendarat dalam jarak setengah piksel dari tempat browser menaruhnya, tata letaknya dipasang. Kalau ada satu saja yang meleset, seluruh frame itu memakai koordinat absolut yang persis.

Ada pemeriksaan kedua di sisi seberang. Setelah plugin Figma memasang tata letak, anak-anaknya diukur lagi, kali ini terhadap mesin yang sebenarnya dan bukan terhadap perkiraan, dan kalau ada yang bergeser melewati setengah piksel tadi, frame itu dikembalikan ke koordinat hasil tangkapan. Pemeriksaan itu ada karena layer teks bisa terukur ulang saat impor dengan cara yang tidak bisa diramalkan simulasi mana pun.

Seperti apa hasilnya di lapangan

Menjalankan konverter pada halaman sungguhan memberi gambaran seberapa pemilih dia. Angka-angka ini berasal dari pengukuran yang sama yang diterbitkan di halaman bukti.

Baris MDN yang paling menarik. Lima frame Auto Layout dari 253 node terlihat seperti alatnya gagal. Padahal justru di situ dia bekerja. Tata letak artikel MDN sebagian besar berupa aliran dokumen dan float, yang sama sekali tidak dimodelkan Auto Layout, jadi gerbangnya menolak nyaris semuanya dan mempertahankan posisi persis. Hasil impornya akurat sampai piksel dan sebagian besar tanpa Auto Layout, dan untuk halaman itu pertukaran tersebut yang benar.

Linear kebalikannya. Halamannya hampir seluruhnya tersusun dari baris flex dengan jarak seragam. 261 frame miliknya betul-betul lolos perbandingan, dan frame itu berperilaku benar ketika Anda ubah ukurannya di Figma.

Ringkasnya

Auto Layout sesudah impor baru layak dipercaya kalau ada yang memverifikasinya. Flexbox dan Auto Layout cukup mirip untuk mengelabui konverter dan cukup berbeda untuk menggeser file Anda, dan selisihnya biasanya muncul sebagai beberapa piksel, bukan sebagai kerusakan yang kentara. Kesalahan jenis itulah yang paling mahal waktunya untuk ditemukan.

Kalau sebuah alat tidak bisa menjelaskan apa yang dia lakukan saat keduanya berbeda, anggap saja dia tidak memeriksa.

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