Cara Menyalin Kode QR ke Figma sebagai Vektor yang Bisa Diedit

Cara Menyalin Kode QR ke Figma

Menyalin kode QR ke Figma butuh empat tindakan dan tanpa plugin: buat kodenya di peramban, salin sebagai SVG, tempel di bagian kosong kanvas, lalu tetapkan ukurannya secara numerik dengan kunci proporsi menyala. Seluruh jalurnya kurang dari satu menit, dan hasilnya adalah grup lapisan vektor yang bisa Anda warnai ulang dan ekspor seperti gambar Figma lainnya.

1. Buat Kodenya. Buka generatornya, masukkan URL atau isi lain, lalu atur bentuk, pola, mata, warna, bingkai, dan logo. Yang mendarat di Figma persis seperti yang ditampilkan pratinjau, jadi penataan gaya dilakukan di sini, bukan setelah menempel.
2. Buka Menu Unduh. Klik panah di samping tombol Download lalu pilih Copy to Figma. Tombolnya berkedip Copied, dan itulah konfirmasi bahwa markup SVG sudah sampai ke papan klip Anda.
3. Tempel di Kanvas Kosong. Beralih ke Figma, klik area kosong supaya tidak ada yang terpilih dan tidak ada lapisan teks dalam mode edit, lalu tekan Cmd+V di macOS atau Ctrl+V di Windows.
4. Periksa Lapisannya. Kode datang sebagai grup berisi Background dan QR-code, ditambah Frame dan Logo bila desainnya memakainya. Melihat nama-nama itu adalah cara Anda tahu Figma membaca vektor, bukan menempelkan gambar.
5. Kunci Proporsi Sebelum Mengubah Ukuran. Nyalakan kunci proporsi di panel kanan, lalu ketik lebar yang Anda butuhkan alih-alih menarik pegangan sudut. Lebar dan tinggi harus tetap sama.
6. Pindai di Layar. Setel zoom kanvas ke 100% dan pindai kodenya dengan ponsel. Pastikan tujuan yang terbuka memang yang Anda maksud sebelum berkasnya sampai ke orang lain.

Copy to Figma tidak melakukan apa pun selama kolom isi masih kosong. Generator menampilkan kode contoh bergaya sebelum Anda mengetik apa pun, dan menyalin contoh itu akan menaruh kode yang tidak menuju ke mana-mana di desain Anda, jadi tombolnya membuat kolom kosong berkedip alih-alih menulis ke papan klip.

Apa yang Sebenarnya Mendarat di Kanvas Figma

Kode KoloQR yang ditempel datang sebagai grup lapisan bernama, bukan gambar datar: sebuah wadah berisi Background dan QR-code, ditambah Frame dan Logo bila desainnya memakainya. Setiap modul adalah jalur vektor sungguhan, jadi lapisan mana pun bisa dipilih, diwarnai ulang, disembunyikan, atau diekspor sendiri.

SVG membawa lebar dan tinggi eksplisit yang diambil dari viewBox-nya, jadi kode mendarat pada ukuran sebenarnya alih-alih kotak bawaan yang dipakai Figma ketika sebuah berkas tidak menyatakan dimensi. Itu penting terutama karena kode yang ditempel pada skala keliru biasanya diperbaiki dengan menarik pegangan, dan begitulah proporsi hilang.

Label bingkai datang sebagai jalur berkontur, bukan teks hidup. Label melengkung dikeluarkan sebagai satu jalur gabungan alih-alih satu objek per huruf, jadi kata-katanya adalah satu bentuk yang bisa Anda warnai ulang dan pindahkan tapi tidak bisa diketik ulang. Mengubah kata-katanya berarti mengedit label di generator lalu menyalin kodenya lagi — dan itu memang urutan yang benar, karena lengkung label dihitung dari bingkainya.

Menyalin beberapa kode ke satu berkas Figma itu aman. Setiap id yang dirujuk markup — jalur potong, jalur tak terlihat yang diikuti label melengkung — diberi awalan unik pada saat Anda menyalin. Dua SVG yang berbagi satu id adalah alasan yang biasa membuat gambar kedua yang ditempel tampil dengan pemotongan milik yang pertama, dan alur ini menghindarinya sejak awal.

Nama lapisan yang murni kosmetik sengaja dibiarkan bersih. Background, QR-code, Frame, dan Logo tidak dirujuk apa pun di dalam berkas, jadi nama-namanya tetap terbaca di panel lapisan Figma alih-alih membawa awalan acak.

SVG atau PNG: Format Mana yang Dibawa ke Figma

Pakai SVG untuk apa pun yang akan diubah ukurannya, diwarnai ulang, atau dicetak, dan PNG hanya untuk maket yang akan Anda buang. SVG adalah satu-satunya dari keduanya yang tetap bisa diedit di Figma; PNG adalah gambar jadi begitu diekspor, dan memperbesarnya di dalam bingkai membuat tepi setiap modul menjadi lembut.

Ketidaksimetrisan ini sering mengejutkan saat serah terima: Figma mengekspor PDF tapi tidak mengimpornya. Kode QR berformat PDF dari generator mana pun harus dikonversi, atau diganti dengan SVG, sebelum bisa masuk ke tata letak Figma.

PNG bukan pilihan yang salah, ia hanya bersifat final. Ekspor PNG KoloQR merender kode pada empat kali ukuran layarnya, cukup untuk maket dan untuk cetakan kecil pada ukuran yang sudah diketahui, tapi piksel itu tetap. Kalau nanti tata letaknya butuh kode dua kali lebih besar, PNG harus dibuat ulang alih-alih diperbesar — lihat resolusi kode QR untuk hitungan yang menentukan seberapa besar kode raster bisa dicetak dengan aman.

Kenapa Tempelan Kadang Jadi Teks, atau Tidak Muncul Sama Sekali

Hampir semua tempelan yang gagal disebabkan salah satu dari tiga hal: ada lapisan teks dalam mode edit, penulisan ke papan klip diblokir, atau tempelan masuk ke permukaan yang tidak membaca markup SVG. Tidak satu pun kesalahan kodenya sendiri, dan ketiganya punya jalan keluar yang sama — unduh berkas SVG lalu seret masuk.

• Markup muncul sebagai karakter yang terlihat. Ada lapisan teks dalam mode edit saat Anda menekan Cmd+V, jadi Figma menyisipkan isi papan klip sebagai teks. Tekan Escape, klik kanvas kosong, lalu tempel lagi.
• Tidak ada yang muncul. Peramban menolak penulisan ke papan klip. Akses papan klip butuh halaman HTTPS yang aman dan klik sungguhan, dan sebagian ekstensi privasi memblokirnya sama sekali. Pakai unduhan SVG alih-alih beradu dengan izin itu.
• Permukaan lain berperilaku lain. FigJam dan Figma Slides tidak menangani markup tempelan seperti kanvas desain. Kalau di sana tempelannya jadi teks, seret saja berkas .svg yang sudah diunduh ke papan itu.
• Tombol Copy to Figma membuat kolom isian berkedip. Kolom isi masih kosong, jadi belum ada kode sungguhan untuk disalin. Masukkan dulu URL atau isi lainnya.

Jalur cadangan ini layak diketahui sebelum Anda membutuhkannya: Download, lalu SVG, lalu seret berkas .svg dari pengelola berkas ke kanvas Figma. Figma mengimpor berkas SVG yang dijatuhkan menjadi lapisan vektor yang sama dengan hasil menempel, jadi hasilnya tidak berbeda sama sekali — hanya jumlah langkahnya.

Edit Figma Mana yang Aman, dan Mana yang Merusak Kode

Mewarnai ulang, memindahkan, memutar, mengelompokkan, membingkai, dan mengubah ukuran secara proporsional itu aman. Meregangkan satu sumbu, memangkas zona tenang, menurunkan kontras, dan operasi boolean yang membuang geometri tidak aman. Kode QR didekode dari geometri kisi persegi, jadi setiap edit yang mengubah kisi itu mengubah apa yang dibaca pemindai.

Kontras adalah hal yang sebaiknya diselesaikan sebelum menyalin, bukan setelah menempel. Pratinjau generator melaporkan rasio kontras untuk pasangan warna yang Anda pilih dan berterus terang saat sebuah kombinasi mungkin sulit dipindai, pemeriksaan yang tidak ada padanannya di Figma — Figma dengan senang hati merender kode abu-abu sedang di atas latar krem sedang tanpa menunjukkan apa pun yang keliru.

Kalau desainnya menutupi sebagian simbol — logo di tengah, bentuk yang memotong sudut — toleransi yang menyerap hal itu ditetapkan saat pembuatan, bukan di Figma. Lihat koreksi kesalahan untuk seberapa banyak simbol yang dipulihkan tiap tingkat, dan buat kodenya pada tingkat yang dibutuhkan desain sebelum menyalin.

Satu keterbatasan yang jujur: tidak ada aturan di sini yang menjamin kode terbaca di perangkat orang lain. Rasio kontras, ukuran modul, dan tingkat koreksi kesalahan sama-sama menaikkan peluang Anda, dan uji fisik di dua ponsel adalah hal yang benar-benar menentukan.

Menentukan Ukuran Kode QR di dalam Frame Figma

Figma mengukur dalam piksel dan tidak punya satuan fisik, jadi tentukan ukuran kode QR dengan memutuskan arti satu piksel di media akhirnya, lalu pegang keputusan itu. Pada 96 px per inci, 1 cm adalah 37,8 px, jadi kode 2 cm adalah 76 px. Pada 300 px per inci, kode 2 cm yang sama adalah 236 px. Untuk desain layar, incar setidaknya 4 px per modul.

Jumlah modul mengikuti isinya, bukan desainnya. URL pendek dengan koreksi kesalahan sedang biasanya jatuh di 29 atau 33 modul, yaitu 37 atau 41 bila zona tenang dihitung. Pada 4 px per modul itu kira-kira 150–165 px di layar, dan jauh di bawah itu ketegasan modul mulai hilang di layar berkerapatan standar.

Aturan cetak tidak berubah hanya karena tata letaknya hidup di Figma. Kode cetak butuh sekitar 1 cm lebar untuk tiap 10 cm jarak baca, dengan 2 × 2 cm sebagai batas bawah praktis untuk pembacaan dekat, dan modul cetak sebaiknya tetap 0,4 mm atau lebih — 0,5 mm di kertas tanpa lapisan, tempat tinta melebar dan menebalkan modul gelap.

Tetapkan lebarnya secara numerik alih-alih menarik pegangan. Sudut yang ditarik dengan kunci proporsi mati adalah cara paling umum sebuah kode QR keluar dari berkas Figma dalam keadaan sedikit melar, dan distorsi 4% tak terlihat di layar tapi fatal di pemindai.

Mengekspor Kode QR Keluar dari Figma

Pilih lapisan teratas kode itu lalu ekspor SVG untuk serah terima vektor, PDF untuk cetak, atau PNG pada 3x atau 4x untuk layar. Mengekspor frame alih-alih kodenya berarti mengekspor tata letak di sekelilingnya, yang memang diinginkan percetakan dan hampir tidak pernah diinginkan pengembang.

• SVG. Biarkan “Include id attribute” menyala kalau Anda ingin nama lapisan ikut bertahan di berkasnya. “Outline text” tidak mengubah apa pun di sini, karena label bingkai memang sudah datang sebagai jalur.
• PDF. Figma mengekspor PDF meski tidak bisa mengimpornya, yang menjadikan PDF serah terima paling wajar untuk tata letak cetak yang memuat kode itu.
• PNG pada 3x atau 4x. Kode 100 px yang diekspor pada 4x menjadi 400 px, dan itu aset layar. Jangan diperlakukan sebagai aset cetak — hitung mundur dari ukuran cetaknya.
• Jangan 1x untuk cetak. Ekspor raster tidak pernah lebih besar dari piksel di dalamnya, dan batas cetaknya kira-kira lebar piksel ÷ 300 × 2,54 sentimeter.

Untuk kode yang akan tampil di situs web, serah terima yang lebih baik sering kali bukan ekspor sama sekali. Pengembang bisa membuat kodenya saat build atau mengirim berkas SVG langsung, dan keduanya mengalahkan gambar hasil ekspor dari berkas desain yang tak akan diingat siapa pun untuk diperbarui saat URL-nya berubah.

Copy to Figma Dibandingkan Plugin Kode QR Figma

Plugin membuat kode di dalam Figma dan bisa membuat ulang atau membuat secara massal tanpa keluar dari berkas. Jalur papan klip membuatnya di peramban dan memberi kendali lebih atas bentuk, bingkai, dan logo. Keduanya menghasilkan kode statis: tidak satu pun bisa mengubah tujuan kode yang sudah dipasang tanpa mengganti gambarnya.

Pakai plugin kalau masalahnya volume. Membuat empat puluh kartu peserta acara dari spreadsheet di dalam Figma adalah pekerjaan yang tidak bisa dibuat menyenangkan oleh jalur papan klip, dan plugin massal jelas alat yang lebih tepat untuk itu. KoloQR tidak punya plugin Figma, dan halaman ini tidak akan berpura-pura bahwa itu sebuah keunggulan.

Pakai papan klip kalau masalahnya desain. Kode berbentuk bundar dan bentuk kustom lain, bingkai, gaya mata dekoratif, dan logo yang dipasang dengan koreksi kesalahan yang tepat di baliknya adalah keputusan yang diambil di generator, dan semuanya sampai di Figma dalam keadaan utuh — lihat kode QR bundar dan kode QR bermerek untuk melihat wujudnya.

Satu perbedaan yang bertahan lama layak disebut: plugin adalah ketergantungan. Plugin Figma diperbarui oleh pembuatnya, rusak saat API plugin berubah, dan sesekali menghilang dari Community. SVG lewat papan klip hanyalah tempelan — tidak ada apa pun di jalur itu yang bisa berhenti dirawat.

Yang Tidak Bisa Anda Lakukan Setelah Kode Berada di Figma

Kode yang ditempel adalah kode QR statis, jadi tujuannya tertulis di dalam geometri alih-alih disimpan di sebelahnya. Figma bisa menata ulang geometri itu tapi tidak bisa menghitungnya ulang, dan itu membuat empat keinginan umum berada di luar jangkauan.

• Mengubah tujuannya. Mengedit URL berarti membuat simbol baru. Tidak ada kolom untuk diedit, baik di Figma maupun di mana pun.
• Menaikkan tingkat koreksi kesalahan setelahnya. Tingkat itu menentukan bagaimana data ditata, jadi ia mengubah simbolnya sendiri alih-alih menjadi properti dari gambar jadi.
• Mengetik ulang label bingkai. Kata-katanya datang sebagai jalur berkontur. Ubah di generator lalu salin kodenya lagi.
• Menajamkan logo raster. Logo yang diunggah sebagai PNG atau JPG disematkan di dalam SVG sebagai gambar, jadi ia tetap raster di dalam berkas yang selebihnya vektor dan tidak akan menjadi tajam saat kodenya diperbesar.

Logo raster adalah satu-satunya yang punya jalan keluar bersih. Unggah logo sebagai SVG kalau Anda punya versi vektornya, atau hapus lapisan Logo di Figma lalu taruh logo vektor Anda sendiri di ruang yang ditinggalkannya — simbolnya sudah dibuat dengan ruang yang dikosongkan untuk itu, dan koreksi kesalahan yang memulihkan modul tertutup tidak peduli gambar apa yang duduk di atasnya.

Tidak ada analitik juga, dan itu sifat kode statis, bukan sifat alur ini. Kalau kebutuhannya mencakup hitungan pemindaian atau tujuan yang bisa diubah setelah dicetak, kode dinamis dari platform yang di-host adalah alat yang tepat, dan desainnya tetap masuk ke Figma dengan cara yang sama.

Menjaga Kode Tetap Mudah Dirawat dalam Design System

Jadikan kode yang ditempel sebagai komponen Figma sejak pertama kali Anda memakainya. Saat tujuannya berubah, tempel kode baru ke komponen utama satu kali dan setiap instance di setiap berkas ikut diperbarui — itulah yang paling mendekati kode QR statis yang bisa diedit.

Beri nama komponen menurut tujuannya, bukan menurut desainnya. Kode QR tidak terbaca manusia, jadi nama lapisan adalah satu-satunya tempat URL-nya terbaca: “QR / menu-musim-semi” memberi tahu orang berikutnya apa yang sedang dilihatnya, sedangkan “Kode QR 3” tidak memberi tahu apa pun. Taruh URL lengkap di deskripsi komponen, tempat ia bertahan saat disalin antar berkas.

Simpan pengaturan asalnya di tempat yang bisa ditemukan orang berikutnya. Bentuk, warna, bingkai, logo, dan tingkat koreksi kesalahan tidak bisa dipulihkan dari gambarnya, jadi catatan di deskripsi komponen — atau tautan generator yang menghasilkannya — adalah hal yang membuat kode itu bisa dibuat ulang enam bulan kemudian.

Jangan biarkan dua versi kode yang sama hidup dalam satu berkas. Bentuk kegagalannya spesifik dan sering: kode lama tertinggal di artboard yang tak pernah diekspor ulang, ikut tercetak, lalu mengirim orang ke URL yang sudah dipensiunkan. Satu komponen, satu tujuan, satu tempat untuk memperbarui.

Uji Pemindaian Sebelum Serah Terima

1. Pindai Kanvas pada 100%. Setel zoom Figma ke 100% lalu pindai kode di layar dengan ponsel. Kegagalan di sini adalah masalah desain — kontras, distorsi, atau zona tenang yang tertutup.
2. Baca Tujuannya Karakter demi Karakter. Cocokkan URL yang terbuka dengan yang Anda maksud, termasuk protokol dan parameter pelacakan apa pun. Kode yang terpindai sempurna ke halaman yang salah adalah kegagalan yang mahal.
3. Pindai Hasil Ekspor, Bukan Kanvas. Ekspor artboard-nya persis seperti yang akan benar-benar dirilis lalu pindai berkas itu. Efek, opasitas, dan lapisan latar berperilaku berbeda di hasil ekspor dibanding tampilannya di kanvas.
4. Cetak Proof pada Ukuran Akhir. Kalau desainnya akan dicetak, cetak satu halaman pada ukuran akhir di kertas sungguhan lalu pindai di sana. Kontras layar membuat segalanya tampak lebih baik.
5. Uji di Kedua Platform. Pindai dengan iPhone dan dengan ponsel Android. Aplikasi kamera keduanya membinerkan gambar secara berbeda, dan kode yang pas-pasan sering lolos di satu dan gagal di lainnya.
6. Uji dalam Cahaya Ruangannya. Pindai dalam pencahayaan tempat kode itu akan hidup — bar yang temaram, jendela yang terkena matahari, kartu berlaminasi mengilap yang dilihat menyerong.

Dua langkah terakhir itulah yang menangkap hal-hal yang tidak bisa ditunjukkan tata letak. Kode yang lolos di monitor desktop yang terang lalu gagal di menu berlaminasi dalam cahaya redup sama sekali tidak berubah — kondisi pembacaannyalah yang berubah.

SVG Papan Klip yang Sama Berlaku di Luar Figma

Papan klip berisi markup SVG standar, bukan format khusus Figma, jadi salinan yang sama bisa ditempel ke Illustrator, Sketch, Affinity Designer, dan Inkscape sebagai vektor yang bisa diedit. Tidak ada bagian dari alur ini yang terikat pada Figma kecuali nama entri menunya.

Alat yang mengharapkan berkas alih-alih markup — penyunting dokumen, perangkat lunak presentasi, sebagian besar alat desain berbasis peramban — menginginkan unduhan SVG. Mengunduh dan menempatkan berkasnya memberi gambar vektor yang sama; hanya cara mengantarnya yang berbeda.

Kalau sebuah alat tidak menerima keduanya, PNG adalah cadangannya, dan keputusan ukuran bergeser lebih awal. Ekspor kode pada ukuran piksel yang dibutuhkan media akhir, bukan pada ukuran yang kebetulan praktis, karena kode raster yang harus diperbesar belakangan tidak punya perbaikan yang baik.