Tutorial Mengubah Desain Figma Ke Website WordPress, Simak!

Pernahkah kamu kebingungan bagaimana mengubah desain yang memukau di Figma menjadi website WordPress yang nyata? Tenang saja, kamu tidak sendirian! 

Dalam artikel ini, kita akan membahas langkah-langkah mudah untuk mengubah desain Figma-mu menjadi sebuah website yang interaktif dan menarik. 

Kamu bisa mengoptimalkan desain Figma terlebih dulu sebelum mengubahnya menjadi website WordPress dengan plugin yang tersedia di Figma.

Mengubah Desain Figma ke Website dengan Plugin

Mengubah desain Figma ke website WordPress bisa menjadi sebuah tugas berat, terutama untuk kamu yang belum terbiasa dengan prosesnya. Namun dengan plugin-plugin Figma, kamu bisa menyederhanakan proses tersebut hanya dengan beberapa klik.

Salah satu plugin Figma yang bisa kamu pakai untuk mengkonversi desain Figma menjadi website adalah UiChemy Figma. Ikuti langkah-langkah berikut ini untuk penerapannya:

Langkah 1 – Install Ekstensi UiChemy di Aplikasi Figma

• Pertama-tama, arahkan kursor kamu ke menu Resource >> Plugins di dalam aplikasi Figma kamu. Kemudian cari UiChemy. Klik “Run” untuk memulai proses instalasi. 
• Setelah plugin terinstal, tampilan antarmuka UiChemy akan otomatis terbuka. Kamu bisa langsung memulai proses konversi. 

Langkah 2 –  Dapatkan Kunci UiChemy dan Aktifkan

Kamu perlu memasukkan kunci lisensi UiChemy, dengan cara berikut ini:

• Klik tombol “Get UiChemy Key”, atau kunjungi langsung halaman harga (pastikan kamu memilih opsi pembuatan halaman Gutenberg). 
• Setelah mengklik tombol tersebut, kamu akan diarahkan ke harga UiChemy. Pilih paket sesuai kebutuhan kamu. Misalnya, jika kamu memilih paket gratis tanpa biaya apa pun. 
• Selanjutnya, kamu akan mendapatkan kunci yang bisa ditemukan di Dasbor akun POSIMYTH Store kamu. 
• Setelah memperoleh kunci lisensi, kembali ke dasbor Figma. Tempel kunci lisensi kamu ke kolom “Serial Key” yang sudah tersedia, lalu klik tombol “Activate” untuk mengaktifkan akun kamu. 

Langkah 3 – Optimasi Desain Figma dengan UiChemy Design Optimizer

Sebelum mengubah desain Figma ke website, kamu bisa melakukan optimasi desain dengan UiChemy. Menariknya, UiChemy menawarkan 4 menu utama dan 1+ langkah untuk mengoptimalkan file Figma kamu. 

Empat menu utama pada UiChemy terbagi menjadi: Media Optimization, Frame Optimization Phase, Text Optimization, dan Mainframe Optimization. 

• Media Optimization: Pada menu ini, kamu bisa mengoptimalkan elemen-elemen media untuk memastikan file dimuat secara efisien dan tetap berkualitas tinggi. 
• Frame Optimization Phase: Menu ini fokus pada frame desain website kamu. Ini dapat menemukan masalah dan menyediakan opsi mengoptimalkan frame, dan memastikan frame tetap terstruktur agar hasil konversi bisa lebih baik. 
• Text Optimization: Kamu dapat menemukan masalah terkait elemen teks dalam desain website. Menu ini membantu mengoptimalkan teks agar lebih jelas, konsisten dan responsif.
• Mainframe Optimization: Menu ini menawarkan opsi mengoptimalkan mainframe, memastikannya mendukung layout website yang bersih dan fungsional. 

Langkah 4 – Ekspor Desain dari Figma ke Website WordPress

Setelah mengoptimalkan desain Figma, saatnya mengubahnya menjadi halaman website WordPress yang bisa diedit. Kamu dapat melakukannya dengan dua metode berikut:

• Metode Live Import (menggunakan plugin Figma di WordPress , yaitu UiChemmy)
• Metode Unduhan JSON (atau Copy Code)

Metode 1: Live Import (Plugin WordPress UiChemy)

• Pertama-tama, kamu perlu menginstal Plugin WordPress UiChemy di website WordPress kamu. 
• Setelah itu, kembali ke aplikasi Figma dan pilih frame tingkat atas dari layout yang kamu inginkan untuk diekspor dalam Figma. Atau, kamu bisa menggunakan ikon panah pada jendela UiChemy yang secara otomatis akan memilih frame tingkat atas
• Setelah memilih frame, pilih antara opsi “Optimize & Convert” atau “Express Convert”. Selanjutnya, klik tombol “Optimize & Convert” atau “Express Convert” berdasarkan pilihan kamu. 
• Selanjutnya, kamu bisa memulai proses konversi dengan mengklik “Convert” pada layar berikutnya. 
• Pada layar berikutnya, kamu akan menemukan dua tombol berbeda: “Copy Copy” dan “Live  Import“. Klik “Live Import”. 
• Selanjutnya, pada menu dropdown “Select Site”, klik tombol “+ Add Site” untuk memprosesnya. 
• Jendela popup Live Import akan muncul. Di sini, kamu diminta memasukkan URL Website dan Security Token. Kamu bisa menemukan keduanya di pengaturan plugin WordPress UiChemy. 
• Setelah memasukkan URL dan Token, lanjutkan dengan mengklik tombol “Connect”. Setelah input berhasil, akan tampil pesan konfirmasi yang menunjukkan koneksi berhasil. 
• Setelah itu, kamu akan melihat URL website kamu secara otomatis terpilih pada menu dropdown “Select Site”. 
• Setelah titik di sebelah URl website berubah menjadi hijau, klik pada menu dropdown yang terletak di bawah “Import Settings”. 
• Selanjutnya, pilih “New” di bagian “Select Methods”. Atau kamu bisa memilih opsi untuk memperbarui template atau halaman yang sudah ada. 
• Lanjutkan dengan memilih jenis template yang diinginkan dari menu dropdown “Import To”. Kamu bisa memilih opsi mengimport sebagai Halaman, Pola Gutenberg, atau Nexter Template. 
• Setelah memilih template, klik tombol “Next” untuk melanjutkan proses impor. Kamu juga bisa mengimpor semua layout dengan mengklik tombol “Import All”.
• Selesai! Kamu berhasil mengubah desain Figma ke website WordPress yang dapat diedit. Kamu bisa membuka halaman tersebut dengan mengklik tombol “Open”. 

Metode 2: Copy Code

Meskipun metode Live Import lebih efisien, ada metode lain untuk mengubah desain Figma ke website WordPress. Kamu hanya perlu menyalin kode dari Figma secara manual dan menempelkannya ke halaman WordPress kamu. 

Begini caranya:

• Asumsikan kamu sudah mengoptimalkan desain Figma kamu. Kini saatnya menyalin kode. Klik Copy Code di jendela UiChemy. 
• Pada layar berikutnya, klik ikon paste di samping halaman. 
• Selanjutnya, buka dashboard WordPress kamu dan tambahkan halaman baru
• Klik tombol “Plus Paste” (warna ungu) di bagian atas. 
• Akan muncul popup, tekan Ctrl+V dan template desain Figma akan diimpor ke halaman kamu
• Selesai! Kamu berhasil mengubah desain Figma ke halaman website WordPress yang dapat diedit melalui metode “Copy Code“. 

Menguji Website Setelah Dikonversi dari Figma

Setelah kamu mengubah desain Figma ke website, penting untuk dilakukan pengujian dan mengoptimalkannya untuk memastikan apakah website kamu berfungsi dan mudah digunakan. 

Apa saja yang harus dicek? Kamu perlu memperhatikan elemen-elemen seperti gambar yang dipakai, font yang dipilih, semua link yang ada, kecepatan website, kompatibilitas browser hingga bagaimana tampilan kamu di layar HP. 

Cara paling sederhana adalah dengan mencoba sendiri semua fitur di website kamu. Klik setiap tautan, isi formulir, dan lihat apakah semuanya berfungsi dengan baik.

Tapi, kalau mau lebih lengkap, kamu bisa memanfaatkan berbagai alat yang tersedia. Misalnya, Google Lighthouse bisa bantu kamu mengecek seberapa cepat website-mu loading-nya, apakah sudah ramah bagi pengguna dengan disabilitas, dan apakah sudah SEO friendly. 

Setelah desain Figma kamu berhasil diubah menjadi website WordPress, saatnya kamu membuat website kamu bisa diakses semua orang alias di-hosting di IDwebhost. 

Kesimpulan

Artikel ini menjelaskan langkah demi langkah mengubah desain Figma menjadi website WordPress. Kamu bisa memanfaatkan plugin Figma untuk menyederhanakan proses ini, salah satunya dengan UiChemy yang tersedia di repository plugin WordPress. 

Setelah melakukan konversi dari desain ke website, kamu perlu memastikan website berfungsi dengan baik, mudah digunakan, dan dapat diakses oleh semua orang melalui internet.

Hanya dengan beberapa langkah saya, kamu dapat memiliki website yang berfungsi penuh dan berjalan. Bingung cari hosting buat WordPress kamu? IDwebhost bisa jadi solusi yang tepat. 

IDwebhost menawarkan solusi hosting WordPress. Ini adalah layanan hosting khusus untuk platform WordPress, yang sudah dilengkapi WP Accelerator, Imunify 360, Cloud Linux dan WordPress Manager.