Rumahweb Journal
Cara Convert Figma ke WordPress

Cara Convert Figma ke WordPress Secara Mudah

Figma adalah salah satu tool desain web yang memungkinkan desainer untuk berkolaborasi dan berbagi ide secara real-time. Dengan Figma, Anda bisa membuat layout website secara mudah. Dalam artikel ini, kami akan berbagi cara convert Figma ke WordPress secara mudah, melalui bantuan plugin Figma to WordPress.

Seperti yang kita ketahui bersama, ada dua komponen utama yang perlu diperhatikan dalam membuat desain website, yaitu UI (User Interface) dan UX (User Experience). UI/UX terbaik akan melahirkan tampilan website yang menarik dan membuat pengunjung ingin berlama-lama di website Anda. Untuk membuat desain website terbaik, Figma merupakan salah satu aplikasi yang kami rekomendasikan.

Dalam artikel ini, kami akan berbagi cara membuat desain di Figma sekaligus convert figma ke CMS WordPress, agar website Anda dapat diakses secara online. Simak informasi berikut ini.

Mengapa perlu memindahkan desain dari Figma ke WordPress?

Sebelum masuk ke dalam proses convert, penting untuk memahami mengapa mengintegrasikan desain Figma ke dalam platform WordPress begitu bermanfaat. Berikut adalah beberapa alasannya:

  1. Konsistensi Branding: Memastikan desain situs web Anda sesuai dengan identitas merek yang sudah ada.
  2. Fleksibilitas Konten: WordPress memungkinkan Anda untuk mengelola dan memperbarui konten dengan mudah.
  3. Fungsionalitas Tambahan: WordPress memiliki ribuan plugin yang dapat menambahkan fungsionalitas baru ke situs Anda.
  4. Optimalisasi SEO: WordPress memiliki fitur bawaan dan plugin SEO yang memudahkan untuk meningkatkan peringkat di mesin pencari.

Sekarang, mari kita bahas cara membuat desain di Figma sekaligus convert ke CMS WordPress.

Cara Convert Figma ke WordPress

Berikut adalah cara membuat desain di Figma sekaligus cara convert Figma ke WordPress.

Step 1. Persiapan Desain dari Figma

Langkah pertama adalah mempersiapkan desain yang ingin Anda konversi dari Figma ke WordPress. Pastikan desain tersebut sudah lengkap dengan semua elemen yang diperlukan, termasuk gambar, teks, ikon, dan tata letak keseluruhan. 

Bila belum, Anda bisa mengikuti panduan berikut ini.

Opsi 1. Desain menggunakan browser

Berikut langkah-langkah membuat desain di Figma dengan menggunakan browser:

  1. Buka browser Anda dan ketikkan Figma.com
  2. Kemudian, setelah dapat masuk ke laman Figma, selanjutnya Anda dapat melakukan registrasi dengan klik “Log in” jika sudah memiliki akun. Jika belum memiliki akun, silahkan klik tombol “Get started for free”.
Laman Figma.com
  1. Selanjutnya, masukkan alamat email dan password Anda lalu klik “Create account”.
Laman register Figma.com
  1. Jika sudah memiliki akun sebelumnya, silahkan menggunakan fitur Log in, lalu masukkan nama email dan password email Anda, kemudian klik tombol “Log in”.
Laman Log in Figma.com
  1. Jika berhasil untuk register atau log in, maka akan masuk ke halaman dashboard Figma.
Dashboard Figma.com
  1. Untuk pembuatan desain pada Figma dapat dilakukan dengan klik “Design file” pada bagian pojok kanan halaman dashboard dan kemudian Anda bisa memilih pembuatan dengan “Team project” jika ingin membuat projek kolaborasi bersama tim dan “Drafts” jika ingin membuat project sendiri. 
Membuat design figma.com
Menu templates figma.com
Templates figma.com

Opsi 2. Desain menggunakan aplikasi desktop

Berikut langkah-langkah akses figma dengan menggunakan aplikasi desktop:

  1. Buka laman download Figma di www.figma.com/downloads, kemudian pilih opsi download sesuai perangkat Anda.
Opsi perangkat download figma
  1. Kemudian, pilih opsi folder download untuk aplikasi Figma. Lalu, klik save dan tunggu sampai download selesai.
Opsi folder download figma
  1. Selanjutnya, klik 2 kali pada Figma Setup dan klik “Run”. Tunggu sampai instalasi selesai.
File Figma setup
Instal figma
  1. Saat instalasi selesai, aplikasi Figma akan otomatis terbuka. 
Dashboard Figma desktop
  1. Untuk pembuatan projek baru, Anda dapat klik tombol “Design file”, kemudian Anda bisa memilih pembuatan dengan “Team project” jika ingin membuat projek kolaborasi bersama tim dan “Drafts” jika ingin membuat project sendiri. 
Membuat design Figma desktop
Tampilan design team project
Tampilan design Drafts
  1. Jika Anda ingin menggunakkan template, pada bagian dashboard silahkan klik “All templates” dan Anda dapat memilih templates sesuai dengan kebutuhan situs Anda.
Menu templates Figma desktop
Templates Figma desktop

Step 2. Instal plugin Figma to WordPress di Figma

  1. Login ke aplikasi Figma Anda.
  2. Masuk pada bagian desain website Anda, klik bagian pojok kanan menu Figma> Plugins> Manage plugins.
Manage plugins
  1. Pada kolom search ketik “Figma to WordPress”, kemudian klik “Run” pada plugin tersebut. 
plugin Figma to WordPress
  1. Langkah selanjutnya, masukkan email sesuai akun WordPress Anda, lalu klik enter. Jika Anda belum memiliki akun WordPres pada hosting, silahkan dapat menginstal WordPres dengan panduan Cara Instal WordPress di cPanel.
Login Yotako
  1. Kemudian, masukkan link URL desain Figma yang telah dibuat sebelumnya dan pastikan dapat dilihat oleh publik atau “Anyone with the link, can view”, seperti pada gambar.
Figma file URL
Share URL
Share File URL
Figma URL
  1. Selanjutnya, pilih frame pada desain Figma yang telah Anda buat dengan cara klik menu “Layers” pada pojok kiri halaman. Lalu pilih tiap frame yang ditandai dengan pagar (#). Jika telah memilih frame yang dibutuhkan untuk situs Anda, klik “Continue”.
Frame Selection
Pilih frame desain figma
Frame Figma lengkap
  1. Setelah itu, silahkan dapat menunggu proses running desain beberapa menit.
Proses running design
  1. Setelah selesai running, maka Anda dapat melihat hasil website dengan klik tombol “Preview”.
building design selesai
  1. Preview merupakan hasil dari desain Anda dalam bentuk website sesungguhnya.

Step 3. Convert Figma ke WordPress

Pada step terakhir, Anda bisa melanjutkan edit desain di WordPress. Klik pada menu “WORDPRESS DASHBOARD” pada bagian pojok kanan preview.

convert figma ke WordPress

Setelah itu, akan muncul halaman dasboard WordPress Anda.

dashboard wordpress

Kemudian, dari dashboard WordPress klik  menu Appearance > Editor.

menu appearance

Selanjutnya, Anda dapat mengedit website hasil desain Anda dari Figma pada WordPress sesuai kebutuhan Anda.

menu editor Appearance

Jangan lupa untuk melakukan publish pada halaman yang Anda desain, agar dapat diakses secara online. Bagi Anda yang ingin mengaktifkan halaman tersebut sebagai homepage di website WordPres, Anda bisa mengikuti panduan berikut: Setting Homepage WordPress

Kesimpulan

Dengan plugin “Figma to WordPress”, pengguna Figma dapat dengan mudah mengintegrasikan desain Anda ke situs WordPress tanpa harus memiliki pengetahuan mendalam tentang pengembangan web atau kemampuan coding.

Plugin ini membuka pintu bagi kolaborasi yang lebih baik antara desainer dan pengembang. Jika Anda adalah seorang desainer yang ingin mengubah desain Figma Anda menjadi situs web yang nyata dan berfungsi penuh di WordPress, plugin ini adalah solusi yang tepat untuk Anda.

Demikian cara convert Figma ke WordPress dari Rumahweb, semoga bermanfaat.

Bermanfaatkah Artikel Ini?

Klik bintang 5 untuk rating!

Rating rata-rata 5 / 5. Vote count: 1

Belum ada vote hingga saat ini!

Kami mohon maaf artikel ini kurang berguna untuk Anda!

Mari kita perbaiki artikel ini!

Beri tahu kami bagaimana kami dapat meningkatkan artikel ini?

VPS Alibaba

Amiratur Rafifah