Pendahuluan

Membuat website sering kali dianggap sebagai proses yang rumit, terutama bagi pengguna yang belum memiliki pengalaman dalam pemrograman. Mulai dari menulis kode, membangun website dari awal, mengatur server, hingga memahami berbagai konfigurasi teknis bisa menjadi tantangan tersendiri.

Namun, saat ini proses tersebut dapat dilakukan dengan lebih sederhana dengan bantuan AI dan berbagai tools no-code/low-code. Salah satunya adalah mengubah desain website yang sudah dibuat di Figma menjadi kode website menggunakan AI, kemudian melakukan pengecekan dan penyesuaian sebelum website di-deploy hingga dapat diakses secara online.

Pada panduan ini, kita akan membahas cara mengubah desain Figma menjadi website yang siap online tanpa perlu menulis kode secara manual. Sebagai studi kasus, desain yang digunakan merupakan versi sederhana dari layanan IDCloudHost. Alur yang akan dilakukan meliputi convert desain Figma menjadi kode, menjalankan dan menguji website, melakukan penyesuaian dengan bantuan AI, menyimpan project di GitHub, hingga men-deploy website menggunakan PaaS.

Tools yang Perlu untuk Anda Persiapkan 

Sebelum mulai, Anda perlu mempersiapkan beberapa tools berikut:

• Desain Figma — desain website yang ingin di-online-kan.
• Figma Make — tools AI untuk meng-convert desain Figma menjadi kode. Ada banyak platform sejenis, salah satunya Figma Make. Preferensi lain juga bisa digunakan.
• Open Code — aplikasi untuk mengecek dan meng-customize hasil convert.
• GitHub — tempat menyimpan seluruh file project kita secara online.
• paas.id (PaaS) — tempat menjalankan atau men-deploy website kita nantinya.

Membuat dan Men-deploy Website dari Desain Figma Tanpa Coding

Ikuti beberapa langkah-langkah berikut ini:

1. Siapkan Desain di Figma

Pertama, buat desain website yang ingin dipublikasikan menggunakan Figma. Dalam panduan ini, desain yang digunakan adalah versi desktop. Penyesuaian untuk perangkat mobile dapat dilakukan pada tahap pengembangan dengan bantuan AI agar website memiliki tampilan yang responsif.

2. Convert Desain ke Kode dengan Figma Make

Setelah desain selesai dibuat, ikuti langkah berikut:

• Pilih dan copy layer desain yang ingin dikonversi menjadi website.
• Buka Figma Make, kemudian paste layer tersebut.
• Masukkan prompt sesuai dengan kebutuhan website.
• Tekan Enter dan tunggu hingga proses konversi selesai.

Figma Make akan mengonversi desain menjadi project berbasis React yang selanjutnya dapat dikembangkan dan di-deploy.

Catatan: Karena menggunakan React, website membutuhkan environment yang sesuai agar dapat dijalankan di server. Dalam panduan ini, proses deployment dilakukan menggunakan PaaS untuk mempermudah pengaturan environment dan deployment aplikasi.

3. Export Kode

Setelah desain berhasil dikonversi menjadi website, export dan download project dari Figma Make. Project tersebut selanjutnya akan digunakan di Open Code untuk menjalankan aplikasi, melakukan pengecekan, dan menyesuaikan berbagai bagian website.

4. Jalankan Project di Open Code

Jika belum memiliki Open Code, download dan install terlebih dahulu, kemudian lakukan login. Selanjutnya, ikuti langkah berikut:

• Buka project yang telah di-download melalui menu Add Project.

• Buat session baru. Jika muncul permintaan izin akses, pilih Allow.

 

• Instruksikan AI untuk menjalankan project. Dalam panduan ini, model yang digunakan adalah DeepSeek.

• Jika muncul notifikasi Permission Required, berikan izin agar AI dapat menginstal module atau library yang diperlukan.
• Setelah project berhasil dijalankan, buka localhost:5174 pada browser untuk melihat preview website.

5. Periksa dan Perbaiki Fungsi Website

Setelah website berhasil ditampilkan, periksa setiap section dan pastikan seluruh fungsi berjalan sebagaimana mestinya. Sebagai contoh, bagian FAQ mungkin sudah memiliki efek hover, tetapi belum memberikan respons ketika diklik. Anda dapat menggunakan Open Code untuk meminta AI memperbaiki fungsi tersebut sekaligus menyesuaikan konten FAQ sesuai kebutuhan.

Tips: Gunakan prompt yang jelas dan spesifik agar AI dapat memahami perubahan yang diperlukan dengan lebih akurat. Open Code dapat digunakan untuk melakukan proses editing dan kustomisasi project dengan lebih fleksibel. Sementara itu, Figma Make memiliki keterbatasan kredit yang dapat menyebabkan proses perubahan terhenti ketika kredit yang tersedia telah habis.

 6. Push Project ke GitHub

Setelah desain dan seluruh fungsi website telah sesuai, simpan project ke GitHub.

• Login atau buat akun GitHub, kemudian buat repository baru melalui menu New.
• Berikan nama repository, misalnya IDCH.
• Pilih Public, kemudian klik Create repository.

• Salin URL repository yang telah dibuat.

• Kembali ke Open Code dan instruksikan AI untuk melakukan push project ke repository tersebut.

 

• Refresh repository GitHub untuk memastikan seluruh file telah berhasil diunggah.

 7. Buat Akun dan Lakukan Top Up di PaaS.ID

• Jika belum memiliki akun paas.id, lakukan Sign Up terlebih dahulu. Anda dapat mendaftar menggunakan akun Google dengan memilih Continue, kemudian memilih akun Google yang ingin digunakan.
• Setelah berhasil login, Anda akan diarahkan ke dashboard PaaS.

• PaaS menggunakan sistem saldo untuk billing, sehingga saldo perlu tersedia sebelum membuat instance dan melakukan deployment. Saldo dapat diisi sesuai kebutuhan, mulai dari Rp50.000.

8. Import dari GitHub dan Atur Deploy

Pada dashboard PaaS, pilih Import from GitHub. Jika GitHub belum terhubung, pilih Link to GitHub, kemudian login dan konfirmasikan akses yang diperlukan.

Setelah GitHub berhasil terhubung, silahkan pilih repository project yang telah dibuat. Klik Import, kemudian pilih Select.

 

Atur konfigurasi deployment sebagai berikut:

Region: Jakarta

Nama aplikasi: Sesuaikan dengan kebutuhan

Framework: Node.js

Node.js Version: Gunakan versi tertinggi yang tersedia

Build Configuration: Hapus --only=production Domain: Aktifkan Automatically create domain for this Instance Class: Basic CPU Limit: 1 vCPU Memory Limit: 1 GB

Setelah seluruh konfigurasi sesuai, klik Launch Application.

9. Pantau Status Deployment

Setelah aplikasi di-launch, pantau proses deployment melalui tab Detail. Status deployment akan berubah sesuai tahapan proses: Building → Deploy → Healthy

Jika status telah berubah menjadi Healthy, berarti proses deployment berhasil dan website dapat diakses melalui domain yang disediakan oleh PaaS.

10. Website Berhasil Online

Setelah proses deployment berhasil, PaaS akan menyediakan domain yang dapat digunakan untuk mengakses website. Desain yang sebelumnya hanya tersedia di Figma kini telah dikonversi menjadi website berbasis React dan dapat diakses secara online melalui server PaaS/IDCloudHost.

Tips Troubleshooting Atasi Error Saat Deploy 

Jika deployment mengalami kendala, misalnya karena module, library, atau konfigurasi tertentu belum tersedia, lakukan langkah berikut:

• Salin pesan error yang muncul.

• Masukkan pesan error tersebut ke Open Code.
• Minta AI menganalisis penyebab dan memberikan perbaikan.
• Setelah perbaikan selesai, lakukan push perubahan kembali ke GitHub.
• Buka bagian Overview pada dashboard PaaS.
• Klik Redeploy dan tunggu hingga proses deployment selesai.

Tips: Untuk meminimalkan kemungkinan error, lakukan pengecekan project menggunakan AI sebelum melakukan push ke GitHub dan deployment ke PaaS.

Penutup

Dengan memanfaatkan Figma Make, Open Code, GitHub, dan PaaS, proses membuat website dari sebuah desain Figma dapat dilakukan dengan lebih praktis tanpa harus menulis kode secara manual dari awal. Mulai dari mengubah desain menjadi kode, menjalankan dan menguji website, memperbaiki fungsi dengan bantuan AI, menyimpan project di GitHub, hingga melakukan deployment ke server, seluruh proses dapat dilakukan melalui alur yang relatif sederhana.

Agar lebih mudah dipahami, simak panduan lengkapnya pada video tutorial berikut.