Figma adalah alat hebat yang dengan cepat menjadi favorit di kalangan UX/UI dan desainer web. Anda dapat membuat desain web yang responsif dengan cepat dan mudah menggunakan alat berbasis browser gratis ini.
Sementara kebanyakan orang membuat desain mereka dari awal di Figma, Anda dapat terinspirasi oleh situs web nyata dan dengan mudah membuat desain Figma langsung dari halaman HTML yang ada. Inilah cara melakukannya.
Mengapa Anda Harus Membuat Desain Figma Dari HTML
Ada banyak alasan mengapa Anda mungkin ingin mereplikasi desain web yang sudah ada sebagai desain Figma. Melakukan ini melalui plugin Figma menghemat waktu, memungkinkan Anda untuk fokus menyempurnakan desain Anda.
Mempraktikkan desain web dengan membuat ulang halaman web yang ada adalah cara yang bagus untuk belajar dari para master. Anda juga dapat menggunakan alat desain HTML ke Figma jika sebelumnya Anda telah mendesain dan menerbitkan halaman web yang kehilangan aksesnya. Alih-alih mendesain ulang dari awal, Anda dapat menghemat waktu dengan mengonversinya kembali ke Figma untuk mengerjakannya lagi.
Sekarang setelah Anda tahu mengapa alat ini berguna, saatnya mempelajari cara kerjanya.
Cara Mengonversi Situs Web Apa Pun Menjadi Desain Figma
Untuk memulai pekerjaan desain berbasis Figma, Anda perlu membuka Figma dan masuk atau mendaftar. Anda dapat menggunakan versi browser, Figma, atau unduh aplikasi desktop; mereka berdua bekerja dengan cara yang sama untuk proyek ini.
Buka sebuah File desain baru untuk memulai proyek desain HTML ke Figma Anda.
Langkah 1: Unduh Plugin html.to.design
Untuk dapat langsung mengonversi situs web langsung menjadi desain Figma, Anda memerlukan plugin. Ada banyak sekali plugin di Figma untuk membantu desain Anda, termasuk plugin untuk membuat maket untuk ponsel dan perangkat. Anda dapat menambahkan desain situs web yang dikonversi ke mockup nanti jika Anda mau.
Untuk mengunduh plugin, pilih menu figma (logo figma) > Plugin > Temukan lebih banyak plugin. Atau, Anda dapat memilih Sumber daya > Plugin. Dari salah satu opsi, ketik di bilah pencarian html.to.design.
Temukan opsi yang disediakan oleh divRIOTS dan pilih Berlari. Ini membuka plugin sebagai kotak dialog di kanvas Figma Anda.
Langkah 2: Rekatkan URL Situs Web
Plugin html.to.design gratis, tetapi menawarkan versi pro. Anda dapat menyelesaikan proses desain Anda sepenuhnya dengan versi gratis.
Temukan situs web tempat Anda ingin membuat desain Figma. Anda harus menggunakan situs web publik—bukan halaman web yang hanya dapat diakses dengan masuk. Kami akan menggunakan beranda kami, MakeUseOf.com.
Salin URL lengkap dan rekatkan ke kotak impor di Figma, menggantikan placeholder situs web Apple.
Langkah 3: Muat Desain Anda
Setelah menempelkan URL situs web, buka Pengaturan di bawah kotak impor untuk memilih ukuran desain. Anda dapat mengimpor desain untuk berbagai perangkat, tetapi Anda akan lebih berhasil memilih perangkat desktop jika menggunakan URL desktop dan lebih berhasil menggunakan URL seluler untuk perangkat seluler.
Ada juga opsi khusus untuk perangkat atau ukuran yang tidak tersedia sebagai opsi default. Kami sedang memilih MacBook Pro 14” dengan Lampu tema.
Setelah Anda menentukan pengaturan perangkat dan tampilan, pilih Impor untuk menghidupkan desain HTML Anda di Figma. Tunggu hingga bilah beban selesai agar desain Figma terisi.
Bergantung pada situs web mana yang Anda gunakan, Anda mungkin melihat kotak pop-up yang menjelaskan bahwa beberapa tipografi harus diganti. Ini karena hak cipta untuk tipografi berlisensi. Figma akan menggantinya dengan tipografi yang dapat Anda akses.
Keluar dari pop-up apa pun, lalu keluar dari dialog plugin untuk melihat desain baru Anda dalam bentuk lengkapnya.
Langkah 4: Edit Desain Figma Anda
Dari sini, Anda dapat mulai mengedit halaman web Figma dengan cara apa pun yang Anda mau. Seperti yang disebutkan, fungsi HTML ke Figma ini memungkinkan Anda untuk mempelajari bagaimana halaman web yang ada dirancang untuk menginspirasi Anda untuk membuatnya sendiri dari awal. Anda dapat menggunakan desain dasar dari situs web dan buat presentasi menggunakan transisi di Figma, atau cukup pelajari bagaimana laman web disiapkan oleh desainer lain.
Di menu sebelah kiri, Anda akan menemukan layer. Karena ini telah dikonversi langsung dari HTML, lapisannya mungkin lebih detail—atau bahkan membingungkan—daripada yang biasa Anda lakukan saat mendesain sendiri. Pilih bagian dalam desain untuk menemukan lapisan yang disorot di menu sebelah kiri.
Anda dapat mengganti gambar, mengetik ulang judul dan teks isi, atau memindahkan sesuatu di dalam tata letak dengan mengklik dua kali aspek desain. Plugin html.to.figma tidak mereplikasi pengaturan animasi atau transisi saat mengklik link atau mengubah halaman. Anda dapat menambahkannya sendiri.
Cara Mengonversi Halaman Web Pribadi
Sebagian besar proses pembuatan situs web pribadi—yang memerlukan akun untuk mengakses—dibandingkan dengan halaman web publik adalah sama. Namun, alih-alih menempelkan URL, Anda harus menggunakan ekstensi Chrome yang menghasilkan file.
Untuk memulai, buka Figma dan plugin html.to.figma dengan cara yang sama seperti sebelumnya.
Langkah 1: Unduh dan Jalankan Ekstensi Chrome
Anda hanya dapat menggunakan ekstensi ini dengan Google Chrome, jadi buka Chrome untuk memulai. Dari kotak dialog plugin Figma, pilih ekstensi Chrome-atau buka ekstensi di sini di browser Chrome Anda.
Pilih Tambahkan ke Chrome > Tambahkan Ekstensi untuk menambahkan ekstensi ke browser Anda.
Dengan ekstensi ditambahkan, navigasikan ke situs web atau halaman pribadi yang desainnya ingin Anda tiru—kami menggunakan halaman Instagram—dan pilih ekstensi. Ekstensi yang diciutkan ditemukan di bawah ikon potongan teka-teki di browser Anda.
Ini akan menanyakan apakah Anda ingin menangkap seluruh halaman atau hanya apa yang terlihat. Tentukan pilihan Anda dan tangkapan akan muncul di unduhan Anda sebagai file .h2d.
Langkah 2: Seret File yang Dihasilkan Ke Plugin Figma
Buka aplikasi Figma Anda atau situs Figma di browser Anda dan seret file .h2d yang Anda unduh ke dalam kotak. File akan dimuat dan dibuat dengan cara yang sama seperti opsi situs web publik.
Seperti dengan versi halaman web publik, Anda dapat mengklik dua kali pada aspek desain untuk mengeditnya atau mengklik menu sebelah kiri untuk melihat di mana mereka muncul di tata letak.
Anda mungkin ingin menambahkan elemen desain baru ke desain halaman web, seperti efek kaca buram Figma, atau Anda bahkan dapat mereplikasi bagian dari desain halaman web sebagai master template untuk presentasi Figma. Pada tahun 2022, Adobe mengakuisisi Figma, sehingga kami dapat mengharapkan cara yang lebih menyenangkan untuk menggunakan Figma di masa mendatang.
Gunakan Situs Web Apapun untuk Inspirasi dalam Desain Figma Anda
Sementara Figma terutama untuk mendesain situs web atau halaman UX/UI dari awal, ini adalah peluang bagus untuk mengisi halaman web yang ada untuk melihat bagaimana pembuatannya. Anda juga dapat menjadikan desain web Anda replika dari situs yang ada jika Anda tidak yakin harus mulai dari mana dari awal.
Alasan bagus lainnya mengapa Anda harus menggunakan plugin html.to.figma adalah jika Anda sudah merancang situs web yang aksesnya hilang. Anda dapat mengisi halaman di Figma dan mulai lagi tanpa harus benar-benar memulai lagi.
