Sebagai developer website, membuat konten dan mendesain website yang unik juga menarik jadi suatu kewajiban. Nah untuk desain, kamu bisa coba pakai Figma. Hanya saja, ada masalah umum yang biasanya dialami yakni banyak yang belum tahu cara convert desain Figma ke website.
Masalah ini pun sebenarnya cukup banyak juga dialami oleh developer yang sudah mahir mendesain atau bahkan ahli UI/UX sekalipun. Terkadang mereka tidak bisa convert desain tersebut ke websitenya.
Nah, kalau kamu juga salah seorang yang mencari cara tentang bagaimana cara convert desain Figma, mungkin cara ini bisa kamu coba:
Inilah Cara Convert Desain Figma ke Website
Ada langkah mudah yang bisa kamu coba untuk mengubah atau mengkonversi desain dari Figma jadi website sebenarnya. Caranya bisa dengan menyesuaikan tema yang cukup mirip dengan WordPress. Berikut ini untuk mengkonversi desain Figma ke website:
1. Install WordPress
Sebelum menerapkan desain website dari Figma, hal yang wajib kamu lakukan adalah dengan memasang WordPress lebih dulu pada websitemu. Ini dia langkah-langkah jika ingin menginstall WordPress:
- Masuk pada cPanel hostingmu.
- Temukanlah Softaculous pada kolom pencarian.
- Setelah masuk ke dalam Softaculous, carilah WordPress lalu pilih Install.
2. Masuk pada Dashboard WordPress
Selanjutnya kamu bisa langsung masuk ke dalam WordPress untuk masuk ke dalam dashboard-nya. Pada dashboard, ada banyak hal dan pilihan yang bisa kamu lakukan. Salah satunya adalah menerapkan desain Figma pada website.
3. Pilih Tema yang Mirip dengan Desain Figma
Langkah selanjutnya yakni dengan memilih menu tampilan atau appearances pada menu sebelah kiri dashboard WordPress. Selanjutnya tinggal pilih Tema kemudian pilih Tambah Baru.
Ada banyak pilihan tema yang bisa kamu coba. Silakan pilih saja tema yang memang mirip dengan desain yang ada pada desain Figma. Kemudian tinggal memasang tema dan kemudian mengaktifkan tema yang telah dipilih.
4. Kustomisasi Tema
Proses selanjutnya yakni kamu bisa mulai proses kustomisasi tema yang sebelumnya sudah dipilih. Caranya bisa dengan klik menu Tampilan, kemudian klik Sesuaikan.
Tinggal sesuaikan saja tema dengan desain yang sebelumnya juga kamu siapkan pada Figma. Pada tahap ini, kamu dapat menyesuaikan sejumlah elemen. Contohnya seperti tipografi, layout, dan juga warna.
5. Gunakan Page Builder
Page builder adalah salah satu opsi yang bisa kamu pakai dan bisa memudahkan proses desain pada Figma dan mengkonversinya ke website. Pilihan Page Builder yang bisa kamu coba ada banyak.
Contohnya saja, ada Elementor, Beaver Builder, Divi Builder, dan masih banyak lagi. Pilih saja sesuai preferensi pribadimu untuk membuatnya jauh lebih gampang kamu pahami.
Convert Desain Figma ke Website Menggunakan Plugin PxCode
Bisa juga dengan menggunakan plugin PxCode. Adapun caranya yakni:
- Instal PxCode dulu.
- Buka plugin PxCode.
- Pilih Plugin, klik Px Code.
- Buat akun, dan klik Start.
- Kembali ke Figma dan klik Export All Frame.
- Buka www.pxcode.io pada browser.
- Unggal file .pxcode ke px.Code.
- Upload file bisa dengan klik Upload Design.
- Seret file .pxcode pada kotak drag.
- Klik Create Project setelahnya.
- Buka completed file.
- Pilih atau klik Start with your design.
- Convert design Figma dengan Create a Page/Screen.
- Masukkan nama proyek.
- Pilih Create.
- Edit sebelum ekspor dan pilih Export Code jika sudah selesai.
- Klik HTML dan klik Download di bagian atas. Jika ingin menyalin klik Copy.
- Semua file Zip berisikan CSS dan aset website termasuk gambar.
Penutup
Itulah cara yang bisa kamu lakukan untuk konversi desain Figma ke website.
