Dokumen ini disusun untuk membantu pengguna lokal yang mengalami kesulitan karena kurangnya sumber daya dalam bahasa Korea terkait Framer, dengan menerjemahkan artikel-artikel luar tentang Framer ke dalam Bahasa Korea dan menambahkan informasi berguna untuk praktik kerja. Semoga ini bisa memberi sedikit bantuan kepada kalian yang menggunakan FramerFramer.

Hari ini kami memperkenalkan kisah tentang bagaimana Razorpay mengadopsi Framer, memungkinkan desainer dan non-desainer untuk membuat halaman dengan lebih efisien, meningkatkan produktivitas hingga 10 kali lipat.

Situs web Razorpay, perusahaan fintech yang tumbuh cepat di India, adalah aset pemasaran penting yang dikunjungi jutaan orang. Namun, membutuhkan waktu hingga dua bulan untuk membuat halaman arahan, sebuah sistem yang tidak efisien. Diperlukan sistem yang memungkinkan eksperimen cepat dan berulang.

Apa Masalahnya?

Alasan penundaan dalam pembuatan landing page adalah sebagai berikut:

• Optimalisasi Berlebihan: Jumlah pengunjung yang tinggi menyebabkan pengambilan keputusan diperiksa ulang berulang kali, membuang waktu.

• Banyak Pemangku Kepentingan: Berbagai tim seperti pemasaran, desain, produk, dan pengembangan terlibat, memperlama proses umpan balik.

• Pekerjaan Berulang: Kurangnya komunikasi menyebabkan desain serupa dibuat ulang beberapa kali.

Desainer, penulis, dan pengembang harus bekerja bersama, memperlambat kecepatan eksekusi. Meski menjaga konsistensi merek dan kualitas tinggi, diperlukan sistem yang memungkinkan eksekusi cepat. Untuk mengatasi masalah ini, mulai dipertimbangkan alat no-code seperti FramerFramer daripada solusi kustom.

Proses Penyelesaian Masalah Razorpay

Mengenali Pola Struktur Informasi

Dengan memeriksa landing page yang ada, Razorpay mengidentifikasi pola berulang dalam struktur section (hero, harga, ulasan, deskripsi produk, dsb). Halaman pesaing juga dianalisis untuk mendapatkan tren industri secara keseluruhan dan analisis ini menjadi dasar untuk merancang template yang dapat diulang.

Merancang Sistem Desain yang Dapat Diperluas

• Menetapkan Elemen Sistem
  Komponen dibagi menjadi hirarki Color & Type Styles → komponen → section → keseluruhan halaman. Akhirnya, warna dan tipografi ditetapkan sebagai token tetap yang tidak dapat diubah, dan komponen serta section menjadi unit dasar sistem kami.

• Pemilihan Alat: FramerFramer
  Webflow atau WordPress juga diuji, tetapi FramerFramer lebih tepat karena dapat dengan mudah digunakan oleh desainer maupun pemasar. Dalam situasi butuh kendali teknis, Webflow lebih menguntungkan, tetapi dalam hal iterasi cepat dan alur kerja efisien, FramerFramer unggul.

Sistem Desain dalam Framer

• Warna dan Gaya Teks: Definisi 40 gaya teks dan lebih dari 120 gaya warna ditetapkan.

• Struktur File dan Folder: Dalam lingkungan kerja dengan 80 desainer, dioperasikan pemisahan folder berdasarkan bisnis, proyek uji coba/life, dan file sistem desain pusat.

• Pengaturan Grid & Responsif: Tiga breakpoint ditetapkan: 1200px (desktop), 810px (tablet), 360px (mobile) untuk menjamin konsistensi responsif keseluruhan.

Desain Template

• Template Komponen (misalnya: kartu testimoni pelanggan yang dapat menampilkan logo atau foto secara opsional)

• Template Seksi: Membangun lebih dari 40 template seksi dengan fitur responsif otomatis untuk elemen berulang seperti informasi produk, pengumpulan lead, dll., dengan tim desain pusat yang terdiri dari 5 orang memastikan template ini disetujui sebelumnya dan mempertahankan panduan, sehingga semua halaman dibuat berdasarkan template ini untuk menjaga konsistensi merek secara stabil.

Perubahan Setelah Mengadopsi Framer oleh Razorpay

• Kecepatan Eksekusi Meningkat 7 Kali Lipat: Proses figma-to-dev dihilangkan dan memungkinkan publikasi langsung tanpa pengembang.

• Peningkatan Kreativitas: Lebih banyak waktu dicurahkan untuk eksperimen interaktif dengan menjauh dari pekerjaan berulang.

• Peningkatan Tingkat Konversi 25%: Peningkatan kinerja melalui iterasi cepat dan eksperimen.

• Peningkatan Kemampuan Menangani Krisis: Berkat template pratinjau, halaman dapat dibuka dalam waktu satu hari.

Tantangan dan Penyelesaiannya

1. Tidak Ada Dukungan Penuh untuk Perpustakaan Sentral Gaya Warna/Tipe

Framer tidak menyediakan fitur "Perpustakaan Gaya Bersama" yang sepenuhnya otomatis sinkron antar proyek seperti Figma.

• Cara Penggunaan Nyata: Sama seperti kasus Razorpay, umumnya dibuat "proyek template khusus gaya" dengan hanya mendefinisikan warna dan gaya teks, kemudian proyek baru dimulai dengan menyalin file ini.

• Kelemahan: Setelah gaya asli diubah, itu tidak otomatis tercermin pada proyek yang disalin sehingga konsistensi harus dipertahankan secara manual.

2. Sulitnya Membuat Template untuk Tata Letak Rumit

Framer sangat nyaman untuk template section atau komponen responsif umum, tetapi struktur kompleks masih memiliki keterbatasan untuk dibuat template. (misalnya: struktur tab)

• Struktur tab, akordeon, filter dinamis, dll., sulit dihadapi dengan komponen salinan sederhana.

• Karena itu, Razorpay juga menggunakan cara menyalin dan mengikuti pedoman untuk menggunakan tata letak tab.

Penulis Asli Artikel: Apoorva Agrawal
Tanggal Penulisan: 11 Februari 2025

Tulisan ini didasarkan pada artikel Framer “Hacking Growth & Scalable Web Design with Framer: A Razorpay Case Study”, dengan beberapa kalimat dikutip langsung dari artikel asli sementara konten lainnya diatur ulang dengan fokus pada penjelasan dan interpretasi fungsi FramerFramer.