1. Buat Akun dan Buka Canvas Framer:Memulai proyek baru.
Framer adalah platform pembuatan website berbasis browser yang terintegrasi dengan kecerdasan buatan.
-
Buka situs resmi Framer (framer.com) dan daftar akun secara gratis menggunakan email atau akun Google.
-
Di dasbor utama, klik tombol "Start with AI" atau buka proyek baru lalu pilih opsi generator AI.
2. Tuliskan Deskripsi Website (Prompt):Instruksi untuk AI.
Framer AI akan membangun seluruh tata letak (layout), warna, dan teks berdasarkan deskripsi yang Anda berikan.
-
Masukkan perintah teks (sebaiknya dalam bahasa Inggris untuk hasil optimal) di kotak prompt yang tersedia.
-
Contoh Prompt: A modern landing page for a coffee shop in Jakarta with product showcase, customer reviews, dark aesthetic, and a contact form.
-
Klik tombol "Start" atau tekan Enter, lalu perhatikan AI merancang seluruh halaman website secara langsung dalam beberapa detik.
3. Kustomisasi Warna dan Tipografi:Eksplorasi tema visual.
Jika kombinasi warna atau font bawaan kurang cocok, Anda dapat mengubahnya secara instan tanpa mendesain ulang dari awal.
-
Gunakan panel Theme di sisi kanan layar untuk mengacak (shuffle) kombinasi warna dan gaya font.
-
Anda juga bisa menentukan palet warna kustom sesuai dengan branding Anda sendiri.
4. Edit Konten dan Elemen Visual:Perbaikan teks dan tata letak.
Seluruh komponen yang dibuat AI bersifat sepenuhnya dapat diedit (fully editable).
-
Mengedit Teks: Klik ganda (double click) pada teks apa pun untuk mengganti tulisan atau menggunakan fitur AI Rewriter bawaan Framer untuk menyempurnakan kalimat.
-
Ganti Gambar: Klik pada gambar untuk mengunggah foto milik Anda sendiri atau memilih gambar gratis dari Unsplash/Unsplash bawaan.
-
Tambah Elemen: Tambahkan komponen interaktif baru seperti tombol, formulir, atau video melalui menu Insert (tombol
+di atas).
5. Pemeriksaan Tampilan Responsif:Memastikan opsi multi-perangkat.
Framer secara otomatis menyediakan tata letak untuk berbagai ukuran layar.
-
Periksa tiga kolom breakpoint utama di kanvas: Desktop, Tablet, dan Phone.
-
Sesuaikan ukuran font atau jarak elemen pada tampilan telepon/tablet jika ada posisi yang terlihat kurang rapi.
6. Publish dan Hubungkan Domain:Mempublikasikan website.
Setelah desain dan isi konten selesai disesuaikan:
-
Klik tombol "Publish" di sudut kanan atas layar.
-
Framer akan memberikan domain gratis bertaut
.framer.appyang dapat langsung diakses publik secara daring. -
Jika ingin menggunakan domain kustom (seperti
https://sarerea.framer.website/), Anda dapat memperbarui ke paket berbayar dan menghubungkannya di menu Site Settings.
Tips Penting untuk Pemula
-
Prompt yang Detail: Semakin spesifik informasi yang diberikan pada prompt awal (target audiens, gaya desain, skema warna, dan bagian website yang dibutuhkan), semakin akurat hasil draf awal dari AI.
-
Fitur AI Rewriter: Cukup pilih paragraf atau judul yang ingin diubah, lalu tekan ikon AI di dekat teks untuk menulis ulang kalimat dengan gaya bahasa yang lebih menarik.
-
Komponen Siap Pakai: Manfaatkan fitur Insert > Section untuk menambahkan bagian baru (seperti Pricing Table, FAQ, atau Hero Section) yang sudah dioptimalkan oleh Framer.
