Desain
Mulai
24 Agu 2025
Membuat Kartu Harga Sinkronisasi Menggunakan Framer Override
Dengan memanfaatkan fitur Override dari Framer, Anda dapat mengontrol dan memodifikasi komponen pada saat runtime. Dalam artikel ini, kami akan memperkenalkan cara menerapkan override pada kartu harga sehingga dengan satu toggle, harga dan status semua kartu dapat diperbarui secara bersamaan.
Diposting oleh
Diterjemahkan oleh
Daftar Isi
Daftar Isi
Mengatur Proyek
Pertama, Anda memerlukan struktur proyek dasar. Anda bisa membuat toggle dengan dua status (Off dan On), dan menghubungkannya menggunakan override sehingga toggle tersebut memperbarui harga dan status bersama-sama. Setelah memilih tiga toggle, tambahkan file baru dan tuliskan Override baru.
Membuat Override di Framer
Proses pengaturan Override adalah sebagai berikut. Pertama, Anda memerlukan storage yang dapat melacak nilai tertentu, misalnya nilai boolean bernama yearly. Ketika salah satu kartu harga di-toggle, nilai ini akan diperbarui, dan status serta harga semua kartu harga akan berubah sesuai.
Kemudian tulis Override bernama withToggle. Override ini menerima komponen dari canvas dan mengembalikannya sebagai komponen React sambil mengirimkan props yang telah diperbarui. Di sini, kita cukup mengembalikan props yang diterima dari Framer. Dalam kondisi ini, itu belum melakukan apa-apa.
Memperbarui Variant
Agar Override benar-benar berfungsi, diperlukan onClick handler yang mengatur Variant berdasarkan nilai saat ini di storage, dan ketika komponen diklik, nilai di store dibalik. Dengan cara ini, Variant yang tepat diterapkan dan transisi terjadi dengan mulus.
Sifat lain seperti teks juga dapat diperbarui. Misalnya, Anda dapat mengatur agar ketika komponen diklik, teks berubah dari harga bulanan ke harga tahunan.
Menyelesaikan Kartu Harga Tersinkronisasi
Menggunakan dua metode ini, Anda dapat membuat kartu harga yang beralih dan dianimasikan antara dua angka. Setel setiap angka sebagai atribut di canvas, dan Anda akan melihat efek transisi yang alami ketika toggle diaktifkan.
Jika Anda ingin, Anda juga dapat mengintegrasikan API untuk mendapatkan harga lokal, sambil tetap memanfaatkan keuntungan animasi dalam komponen FramerFramer.
Kesimpulan
Override di Framer adalah fitur yang kuat untuk mengontrol dan memodifikasi komponen selama waktu nyata. Dalam tulisan kali ini, kita telah membahas cara membuat harga dan status tersinkronisasi ketika satu kartu di-toggle agar tersinkronisasi di seluruh kartu. Cobalah membuka proyek dan bereksperimen agar dapat lebih memahaminya.
Tulisan ini adalah adaptasi dan terjemahan dari ‘How to build synced pricing cards using overrides in FramerFramer‘ di blog resmi Framer.
