Cara Convert Desain Figma ke Real Website dengan Mudah

convert desain figma ke real website

Dalam pembuatan website yang harus kamu lakukan sebagai developer website adalah membuat konten dan mendesain website yang unik serta menarik. Desain website yang menarik tentunya akan meningkatkan pengunjung website tersebut. 

Namun, faktanya banyak developer yang mahir mendesain website, atau ahli pada UI/UX tetapi tidak bisa mengconvertnya pada website yang sebenarnya. Nah, kamu berada di artikel yang tepat, karena Jagoan Hosting akan mengulas mengenai cara mengconvert desain website ke real website dengan menggunakan Framer.

Langkah dalam Proses Desain Website

Sebelum membahas tentang cara mengconvert desain website ke real website, hal yang perlu kamu ketahui dulu adalah elemen dalam proses desain website. Berikut ulasan lengkap elemen dalam pembuatan desain website yang perlu kamu ketahui: 

Slicing

Elemen dalam proses desain website yang pertama adalah slicing. Slicing adalah memecahkan dan memetakan gambar/design pada beberapa bagian, kemudian disatukan ke dalam HTML dan CSS. Dalam melakukan slicing, kamu bisa menggunakan dua cara yaitu, sebagai berikut: 

  1. Menggunakan HTML, CSS, Javascript, ataupun menggunakan framework css yang sudah siap pakai. 
  2. Melalui CMS yang biasanya cocok untuk digunakan mengolah konten dan didalam sebuah website, tanpa perlu memiliki skill khusus seperti coding atau programming secara dalam. 

Handoff

Lebih lanjut, elemen dalam proses desain website adalah proses handoff. Lalu, apa itu handoff? Handoff adalah fase bagi developer atau pengembang website untuk mengimplementasikan desain yang sudah dibuat oleh product design atau developer ke dalam bahasa pemrograman 

Cek Konten Lainnya:
Apa itu Divi Builder? Kelebihan, Fitur & Cara Menggunakan

Spacing

Elemen terakhir dalam proses pembuatan desain website adalah spacing. Spacing adalah memperkirakan jarak dari masing-masing bagian konten, judul, description, button dan lain sebagainya. Spacing juga meliputi padding dan margin.

Baca juga: 13 Halaman Website yang Penting dan Wajib Ada di Situs Kamu

Cara Convert dari Figma ke Website (WordPress)

Ada cara yang lebih mudah dalam mengubah desain yang ada di Figma menjadi real website, yaitu dengan menyesuaikan tema yang mirip di WordPress. Berikut langkah-langkah convert dari Figma ke Website berbasis CMS WordPress:

Install WordPress

Sebelum melakukan proses menerapkan desain website, yang harus dilakukan yaitu memasang WordPress di website kamu. Berikut langkah menginstall WordPress melalui cPanel:

  1. Masuk ke cPanel hosting kamu
  2. Cari Softaculous di kolom pencarian
  3. Setelah masuk Softaculous, cari WordPress kemudian Install 

Masuk ke Dashboard WordPress

Langkah yang pertama adalah login ke Word Press kamu dan buka dashboard WordPress

Pilih tema yang sesuai dengan desain di Figma

Kemudian pilih menu tampilan atau appearances di menu sebelah kiri dashboard WordPress kamu dan pilih tema -> tambah baru.

Banyak pilihan tema yang bisa kamu pilih, mulai dari Astra, Generate Press, Zakra dll.

Mulai pilih tema yang sesuai dengan desain di Figma yang telah kamu siapkan, kemudian pasang tema dan aktifkan yang sudah dipilih.

Kustomisasi Tema

Proses berikutnya kamu bisa mulai kustomisasi tema yang sudah dipilih, dengan pilih menu tampilan -> sesuaikan. Sesuaikan tema dengan desain yang telah kamu siapkan di Figma.

Di tahap ini kamu bisa menyesuaikan beberapa elemen seperti typography, layout dan warna.

Menggunakan Page Builder

Page builder bisa kamu jadikan pilihan untuk memudahkan proses dari desain di Figma ke website WordPress. Pilihan page builder seperti Elementor, Divi Builder, Beaver Builder yang bisa kamu pilih

Cek Konten Lainnya:
Cara Riset Keyword Youtube, Ini Tips Jitunya untuk Pemula!

Baca juga: 10 Contoh Desain Website Keren untuk Dijadikan Inspirasi

Cara Onlinekan dari Desain Website ke Hosting 

Itulah cara mengconvert dari desain website ke real website. Nah, jika sudah selesai langkah berikut yang harus kamu lakukan adalah membuat website online ke hosting. Kamu bisa simak caranya disini. 

Selain itu, lengkapi juga websitemu dengan produk Cloud Hosting dengan cPanel dari layanan Jagoan Hosting. Bahkan kamu bisa mendapatkan diskon hingga 81% jika menjadi pengguna baru layanan Jagoan Hosting satu ini.

Dengan menggunakan cloud hosting dengan cPanel kamu tidak perlu membutuhkan skill khusus seperti coding atau programming, cukup dengan drag and drop, kamu sudah bisa membuat website sendiri.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

You May Also Like
Creative Commons License
Read More
Mengenal Creative Commons License & Pentingnya Menggunakan Gambar Legal Untuk Websitemu
Pernahkah kamu mendengar istilah Creative Commons License?. Apa sebenarnya pengertian Creative Commons License itu? Kemudian, mengapa kita sebagai…
Cara Membuat Website Membership di WordPress
Read More
Cara Membuat Website Membership di WordPress
Salah satu keuntungan buat website yang sering dikunjungi oleh banyak traffic adalah peluang hadirnya pelanggan-pelanggan setia yang selalu…