Bagaimana Mengonversi Figma ke WordPress? [Cara Gratis & Berbayar]

Figma terkenal sebagai alat desain dan kreativitas, sedangkan WordPress terkenal dengan fleksibilitas, penyesuaian, dan kemudahan penggunaannya. Bagaimana jika Anda dapat menggabungkan platform terbaik ini untuk membuat situs web yang menakjubkan?

Ya, itu mungkin. Anda dapat mendesain situs web Anda menggunakan Figma dan kemudian mengubahnya menjadi WordPress. Meskipun ini dulunya merupakan tugas berat yang melibatkan pemrosesan HTML dan tema yang sudah diinstal sebelumnya, kini segalanya menjadi lebih mudah.

Jika Anda mencari hal yang sama, Anda berada di tempat yang tepat.

Dalam posting ini, kami akan memandu Anda tentang cara mengonversi Figma ke WordPress dengan cara yang sangat mudah dan ramah bagi pemula tanpa memerlukan keahlian teknis apa pun.

Opsi 1: Gunakan Plugin Gratis untuk mengonversi Figma ke WordPress

Meskipun ada beberapa cara untuk mengonversi Figma ke WordPress, Anda dapat memilih metode gratis, menggunakan plugin konversi premium, atau melalui metode manual. (Mereka memiliki pro dan kontra)

Langkah 1: Pertama-tama Anda harus membuat desain Figma yang kemudian ingin Anda ubah menjadi WordPress. Namun Anda tidak boleh lupa untuk mengikuti semua praktik terbaik industri dan prinsip desain.

Langkah 2: Setelah Anda berhasil membuat dan mendesain halaman Figma, sekarang saatnya membuat kunci API-nya. Kunci API ini akan membantu mengambil halaman Figma melalui Plugin dan menyematkannya ke WordPress.

Untuk melakukan ini, klik ikon Figma yang terletak di sisi kiri atas layar. Ini akan membuka opsi Menu di mana Anda harus memilih Bantuan dan Akun> Pengaturan akun.

Ini akan membuka prompt baru di mana Anda harus menggulir ke bawah ke bagian “Token Akses Pribadi” dan klik tautan Hasilkan token baru .

Ini selanjutnya akan membuka prompt baru di mana Anda akan diminta untuk memberikan beberapa detail dasar untuk token yang Anda buat, seperti nama dan tanggal kedaluwarsa.

Catatan : Di bagian Kedaluwarsa, selalu pilih “ Tidak ada masa berlaku ” agar halaman Figma Anda tidak hilang dari situs web Anda setelah jangka waktu tertentu.

Di bawahnya atur semua Cakupan sebagai “Tulis” dan klik tombol “Hasilkan token”. Anda akan diarahkan ke bagian “Token Akses Pribadi” tempat Anda dapat dengan mudah menyalin token yang dihasilkan dan menyimpannya di Notepad atau di editor mana pun.

Langkah 3: Sekarang Anda telah berhasil membuat dan menyimpan token, sekarang saatnya mengubah halaman Figma Anda menjadi WordPress.

Untuk memulai prosesnya, Anda perlu menginstal dan mengaktifkan plugin WordPress sederhana namun kuat bernama “Animation and Design Converter for Gutenberg Block – Advanced Addons” di situs WordPress Anda.

Setelah instalasi dan aktivasi berhasil, buka halaman atau postingan situs WordPress Anda di mana Anda ingin menyematkan halaman Figma yang Anda desain.

Pada halaman atau postingan tersebut, klik tombol “ Impor dari Figma ” di kiri atas layar.

Sebuah prompt akan terbuka meminta Anda untuk memberikan "Figma Access Token" yang Anda buat dan simpan sebelumnya. Masukkan URL File Figma.

Untuk URL File Figma, kembali ke File Figma Anda, salin URL di Tab browser di bawah, dan tempelkan ke dalam kotak URL File Figma.

Selebihnya, Plugin akan melakukan tugasnya dan mengubah file Figma menjadi blok WordPress. Setelah itu, Anda dapat melakukan penyesuaian sebanyak yang Anda inginkan dari panel blok.

Setelah selesai, klik tombol “Terbitkan” atau “Perbarui” untuk menyimpan pengaturan Anda.

Opsi 2: Gunakan Plugin Berbayar untuk mengonversi Figma ke WordPress (Lebih efisien dan Bebas Repot)

Untuk metode ini, kami akan menggunakan plugin konversi yang lebih populer dan efisien, 'Uichemy.' Plugin ini menawarkan alur kerja yang sangat mudah dan tidak merepotkan, membuat proses konversi menjadi lancar. Ini paling cocok untuk pemula yang tidak memiliki keahlian coding serta pengembang yang ingin mempercepat prosesnya.

Saat ini, plugin ini hanya dapat mengonversi desain Figma menjadi editor situs web Elementor dan Bricks, tetapi perusahaan telah berjanji untuk memberikan dukungan untuk blok Gutenberg di masa mendatang.

Langkah 1: Buka desain Figma Anda dan instal plugin Uichemy di dasbor Figma untuk memulai proses konversi.

• Untuk melakukan ini, cari “ UiChemy ” di bilah pencarian dan temukan plugin UiChemy.

Klik tombol “Ayo Mulai” dan ikuti instruksi untuk Instalasi dan Aktivasi.

• Masukkan kunci serial Anda untuk menyelesaikan aktivasi. (Untuk kunci serial, buat akun gratis dengan mengklik tombol 'Mulai Gratis'. Setelah membuat akun, Anda akan menemukan kunci lisensi di dasbor akun Posimyth Store Anda.)

Langkah 2: Setelah aktivasi berhasil, pilih desain Figma atau Bingkai yang ingin Anda ubah menjadi WordPress dan klik tombol “ Konversi ke Elementor ” di jendela pop-up.

(Pastikan Anda telah menginstal dan mengaktifkan Plugin Elementor di situs WordPress Anda sebelum proses konversi dan juga Baca semua ketentuan sebelum mengonversi desain Figma Anda).

Langkah 3: Sekarang Anda dapat melihat pratinjau desain Anda dengan memasukkan URL Situs dan kunci token Anda. Kalau tidak mau, langsung saja klik tombol “Convert to Elemetor”. (Lihat tutorial UiChemy tentang “Apa itu Pratinjau Langsung” untuk panduan dalam membuat kunci token dan URL situs web Anda.)

Langkah 3: Desain Anda akan dikonversi dan diunduh file JSON.

Sekarang Buka dashboard Admin WordPress Anda > Buka Template > Template Tersimpan.

Sekarang klik tombol “ Impor Templat ” di bagian atas halaman dan Unggah file JSON.

Langkah 4: Selamat! Desain Figma Anda sekarang akan muncul di bagian 'Template Tersimpan', tempat Anda dapat membukanya dan melakukan pengeditan atau penyesuaian lebih lanjut.

Langkah 5: Setelah menyelesaikan penyesuaian atau pengeditan, lihat desain Anda di bagian depan. Pastikan semua gambar dan tombol sejajar dengan benar dan berfungsi dengan baik. Periksa juga apakah desainnya responsif pada semua ukuran layar.

Opsi 3: Konversi Figma ke WordPress Secara Manual (Untuk Pengembang)

Metode ini cukup teknis, sehingga memerlukan pengetahuan yang baik tentang CMS WordPress dan sedikit kesabaran, oleh karena itu metode ini paling cocok bagi mereka yang menyukai coding.

Langkah 1: Langkah pertama adalah mengekspor semua bagian desain seperti ikon dan gambar dari Figma. Untuk ini, buka Figma Design Anda dan pilih apa yang ingin Anda ekspor. Sekarang klik tombol "Ekspor" dan bagian format dan resolusi yang tepat.

Catatan: Sangat disarankan saat mengekspor gambar, Anda memilih PNG atau JPG, dan untuk ikon dan vektor, pilih SVG untuk menjaga kualitas. Selain itu, berhati-hatilah saat mengekspor file Anda, pastikan formatnya benar, jika tidak, hal ini akan sangat memengaruhi tampilan situs web Anda.

Langkah 2: Sekarang kita harus membuat tema WordPress khusus untuk mengubah semua desain Figma menjadi situs WordPress. Itu karena tema WordPresslah yang mengontrol tampilan dan fungsi situs web Anda.

File tema WordPress pada umumnya terdiri dari kode PHP, file JavaScript, dan file stylesheet CSS.

• Buat folder baru di WordPress untuk tema Anda di direktori wp-content/themes dan beri nama pilihan Anda. (Anda dapat mengakses file-file ini, baik melalui Cpanel, Editor WordPress, atau klien FTP) Atau lihat blog khusus kami di " Bagaimana cara menginstal tema WordPress? "

Jika Anda pengguna WPOven Anda dapat mengakses file WordPress dengan mengikuti tutorial ini. “Manajer File Baru untuk mengelola file dan folder situs Anda dengan mudah.”

Sekarang, tambahkan file seperti index.php, header.php, footer.php, dan function.php ke dalamnya. (Biarkan file-file ini kosong untuk saat ini). Tambahkan juga file style.css untuk menyiapkan stylesheet CSS tema Anda di folder yang sama.

(File style.css khusus ini bertanggung jawab untuk menampilkan semua warna, font, batas, margin, dan elemen visual situs web lainnya.)

Sekarang tambahkan komentar header berikut ke file style.css Anda seperti yang diberikan di bawah ini:

/*

Theme Name: Example WordPress Theme
Author: WPOVen
Description: This code converts Figma design to WordPress.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

*/

Di sini, Anda harus memberikan Nama Tema dari tema WordPress khusus Anda dan penulis Anda. Ini akan membantu WordPress mengidentifikasi tema khusus Anda.

Jangan lupa juga untuk menambahkan gambar untuk tema WordPress Anda, agar mudah dikenali di direktori WordPress, seperti halnya thumbnail YouTube.

Ukuran yang diinginkan adalah 800×600 piksel dan dalam format PNG. Beri nama apa pun pilihan Anda dan tambahkan ke folder tema.

Langkah 3: Sekarang kita harus menambahkan semua aset Figma yang diekspor ke dalam folder tema khusus Anda.

Tip: Jika situs Anda kompleks, sebaiknya kelola semua aset Anda dalam subfolder tertentu, seperti yang kami tunjukkan pada gambar di bawah ini:

Langkah 4: Agar tema WordPress Anda berfungsi sepenuhnya, Anda perlu menambahkan HTML, CSS, dan JavaScript ke file tema.

Mari kita lihat bagaimana Anda dapat melakukan ini,

Pertama, Anda harus mengubah maket Figma menjadi kode, dan untuk itu, Anda memerlukan alat editor kode.

Mulailah dengan menyiapkan struktur HTML dengan elemen seperti header, footer, bilah navigasi, dan bagian. Tambahkan kode Anda ke file PHP (index.php, header.php, dan footer.php).

Sekarang Gunakan, CSS untuk menata elemen HTML Anda. Tambahkan gaya Anda di file 'style.css', atur warna, font, ukuran, dan aspek desain lainnya.

• Untuk penataan yang lebih baik, Anda dapat menggunakan:
  • Praprosesor CSS seperti SASS atau LESS
  • Kerangka kerja seperti Bootstrap atau Tailwind
  • Tema pemula WordPress
• Untuk desain yang rumit, Anda tidak perlu memasukkan semua CSS Anda ke dalam satu file, tetapi dengan cara yang lebih terorganisir. Anda dapat menambahkan file CSS terpisah untuk bagian berbeda di folder aset sehingga memudahkan Anda mengelola dan memecahkan masalah di masa mendatang.

Terakhir, untuk Javascript, cari tahu elemen yang perlu interaktif seperti menu dropdown, slider, dll.)

Pertimbangkan untuk menggunakan jQuery untuk mempermudah tugas seperti panggilan AJAX dan Manipulasi DOM dan memuat file CSS (stylesheet) dan JavaScript (skrip) Anda dengan benar ke dalam tema WordPress Anda menggunakan file functions.php .

Langkah 5: Sekarang inilah bagian pengujian, setelah berhasil melalui semua langkah di atas, simpan file Anda dan periksa apakah semuanya berfungsi dengan baik. Namun sebelum itu, kita harus mengaktifkan plugin tersebut.

Untuk mengaktifkan plugin, buka dashboard WordPress Anda> Penampilan> tema . Tema khusus Anda akan mulai muncul dengan gambar yang Anda unggah sebelumnya di folder tema. Klik untuk mengaktifkan dan viola situs WordPress Anda siap untuk pengujian.

Berikut beberapa saran pengujian yang dapat Anda ikuti:

• Periksa tampilan dan cara kerja situs Anda di berbagai browser dan ukuran layar.
• Gunakan alat untuk mengoptimalkan gambar Anda agar memuat lebih cepat.
• Terapkan caching untuk mempercepat situs Anda.
• Buat cadangan situs Anda sebelum ditayangkan.

Ringkasan

Mengonversi dari Figma ke WordPress tidak semudah kelihatannya, tergantung kompleksitas situs webnya. Semakin rumit desainnya, semakin rumit pula proses yang harus Anda ikuti. Kami telah mencoba mencakup semua opsi untuk semua jenis pengguna.

Melakukannya secara manual mungkin memberi Anda kontrol lebih besar, namun akan menghabiskan banyak waktu dan tenaga Anda. Namun, Anda dapat memanfaatkan plugin untuk mempercepat proses konversi, namun Anda mungkin masih perlu melakukan perubahan tertentu untuk mendapatkan hasil yang lebih baik.

Terserah pada preferensi Anda dan kemudahan memahami metode mana yang Anda pilih.

Rahul

Rahul Kumar adalah penggemar web, dan ahli strategi konten yang berspesialisasi dalam WordPress & hosting web. Dengan pengalaman bertahun-tahun dan komitmen untuk selalu mengikuti perkembangan tren industri, dia menciptakan strategi online efektif yang mengarahkan lalu lintas, meningkatkan keterlibatan, dan meningkatkan konversi. Perhatian Rahul terhadap detail dan kemampuannya membuat konten yang menarik menjadikannya aset berharga bagi merek mana pun yang ingin meningkatkan kehadiran online-nya.