Cara Mengontrol Visibilitas dengan “Is Set”

Cara kontrol kondisi paling dasar di Framer adalah dengan kondisi "Is Set".
Ketika kondisi "Is Set" diatur, maka gambar akan ditampilkan jika telah diunggah ke CMS, dan akan otomatis tersembunyi jika gambar tidak tersedia.
Sebagai contoh, di halaman profil tim, jika ada anggota yang memiliki foto profil sementara ada yang tidak, anggota tanpa foto dapat otomatis disembunyikan untuk mencegah tata letak rusak.

Kapan Digunakan?

• Hanya menampilkan gambar jika tersedia, dan menyembunyikannya secara otomatis jika tidak tersedia

• Tidak membuat field CMS terpisah, tetapi mengontrol tampilan hanya berdasarkan keberadaan data

Cara Mengatur “Is Set”

1. Klik tombol + di sebelah item Visible

2. Pilih menu Set Variable > Kondisi "Is Set"

Apa Itu Kondisi Berbasis Teks?

Di Framer, selain kondisi "Is Set", terdapat juga fungsi tampilan kondisional berdasarkan nilai teks.
Misalnya, jika ada field kategori di CMS dan nilainya adalah “Pengumuman” sehingga hanya saat itulah banner akan ditampilkan di atas, Anda dapat memanfaatkan kondisi Equals: Pengumuman.

• Equals (Sama dengan) / Doesn’t Equal (Tidak sama dengan)

• Starts with (~Dengan awal) / Doesn’t Start with (~Tidak mulai dengan)

• Ends with (~Dengan akhir) / Doesn’t End with (~Tidak mengakhiri dengan)

• Contains (Mengandung) / Doesn’t Contain (Tidak mengandung)

Kapan Digunakan?

• Ketika ingin menentukan apakah menampilkan banner atau elemen tertentu berdasarkan nilai teks CMS

• Ketika ingin menunjukkan bagian tertentu hanya saat nilai kategori adalah “Acara”

Cara Mengontrol Visibilitas dengan Menggunakan Option Field

Di Framer, Anda dapat menambahkan Option Field dan menerapkannya ke desain untuk menunjukkan berbagai tata letak sesuai dengan kondisi konten.

Langkah 1: Menambahkan Option Field

1. Masuk ke CMS.

2. Klik Edit Fields (Edit Field).

3. Tekan ikon + untuk menambahkan field baru.

4. Pilih Option dari menu dropdown.

5. Input daftar opsi seperti "Tampilkan 1 gambar", "Tampilkan 3 gambar", dan sebagainya.

Opsi ini membantu menunjukkan apakah tata letak atau elemen tertentu ditampilkan untuk setiap item CMS.

Langkah 2: Menerapkan Kondisi Option Field ke Desain

1. Pilih elemen yang visibilitasnya ingin dikontrol

2. Klik ikon + di sebelah item Visible (Visibilitas)

3. Pilih Set Variable (Atur Variabel) kemudian atur kondisi Option

Opsi Utama

Contoh

• Varian A: Tata letak yang hanya menampilkan 1 gambar

• Varian B: Tata letak yang menampilkan 3 gambar

Dengan menggunakan opsi Convert, Anda dapat memilih secara otomatis antara A atau B berdasarkan nilai option field dari CMS. Metode ini sangat berguna ketika Anda perlu memproses cabang pada satu komponen dengan berbagai kondisi.

Menggunakan Toggle Field untuk Kondisi Sederhana

Di Framer, saat menangani kondisi sederhana dalam bentuk Ya / Tidak (Yes/No) atau Hidup / Mati (On/Off) yang paling efektif adalah dengan menggunakan Toggle Field.

• Saat ingin mengatur apakah menampilkan gambar atau banner tertentu

• Ketika ingin dengan mudah mengontrol tampilan banner acara dari CMS

Kontrol Lanjutan dengan Menggunakan Pernyataan Kondisi dan Variasi

Dengan menggunakan pernyataan kondisi dan fungsi konversi FramerFramer, Anda dapat secara lebih rinci mengontrol komponen halaman detail CMS. Fitur Transform (Ubah) memungkinkan komponen otomatis beralih Variasi tergantung pada kondisi, sehingga dapat mengatasi struktur konten yang kompleks.

• Kondisi dapat diterapkan ke hampir semua elemen yang memiliki ikon +,

• Memungkinkan untuk membuat tata letak yang dinamis berubah berdasarkan isi konten.

Artikel ini adalah terjemahan dan adaptasi dari konten blog resmi Framer ‘How to create flexible CMS detail pages’.