Dokumen ini dibuat untuk membantu pengguna Framer di Indonesia mengatasi kesulitan akibat kurangnya materi berbahasa Indonesia, dengan menerjemahkan konten dari blog resmi dan menambahkan informasi praktis. Semoga dapat memberikan sedikit bantuan bagi Anda yang menggunakan Framer.

Metode Penentuan Posisi yang Dapat Digunakan di Framer

• Absolute: Penentuan posisi yang bebas berdasarkan kerangka induk

• Relative: Posisi ditentukan berdasarkan aliran seperti Stack atau Grid

• Fixed: Posisi tetap berdasarkan layar (Viewport)

• Sticky: Posisi tetap ketika mencapai titik tertentu kemudian kembali mengikuti aliran

Pada tulisan kali ini, kita akan fokus terlebih dahulu pada Absolute Positioning sebagai dasar utama.

Apa itu Absolute Positioning?

Absolute Positioning adalah metode di mana lapisan ditempatkan pada posisi tetap berdasarkan kerangka induknya. Dengan kata lain, elemen ditempatkan hanya berdasarkan jarak dari kerangka induknya tanpa memperhatikan hubungan dengan elemen lainnya.

Cara ini mirip dengan cara kita menempatkan elemen secara bebas di alat desain seperti Figma, sehingga pengguna baru Framer dapat dengan mudah menyesuaikan dengan metode posisi ini.

Bagaimana Penentuan Posisi Didefinisikan di Framer?

Di alat desain lain, seringkali hanya ditampilkan koordinat X dan Y, namun Framer sedikit berbeda.

• Anda dapat mengatur nilai jarak untuk setiap dari empat arah: atas/bawah, kiri/kanan.

• Jika Anda memasukkan nilai atau menetapkan pin pada suatu arah, nilai jaraknya tetap terjaga meskipun ukuran kerangka induk berubah.

Misalnya, jika Anda menetapkan pin dengan "20px dari atas", elemen tersebut akan selalu berada 20px dari atas meskipun ukuran kerangka induk berubah.

Pinning dan Penentuan Posisi

Ketika Anda memilih kerangka, nilai yang ditampilkan di panel properti di sebelah kanan akan seperti berikut. Nilai yang ditunjukkan dengan jelas adalah nilai yang sudah diterapkan pin.

• Atas, Bawah

• Kiri, Kanan

• Jika Anda menetapkan pin: jarak dari arah tersebut akan tetap

• Jika Anda menghapus pin: arah tersebut akan diabaikan dan lapisan dapat bergerak dengan bebas

Contoh

• Pin hanya di kiri → Jarak 20px terjaga dari kiri

• Pin di kedua sisi → Jarak 20px terjaga di kiri dan kanan serta otomatis melebar atau menyempit

Membuat Kerangka Induk yang Menyelubungi Elemen yang Sudah Ada

Pilih beberapa lapisan kemudian

• Klik kanan > Add Frame

• Atau Cmd + Enter (Mac), Ctrl + Enter (Windows)

Dengan cara ini, akan terbentuk kerangka induk baru yang menyelubungi elemen-elemen yang dipilih.
Jika Anda ingin menghapus kerangka induk dan hanya menyisakan elemen, lakukan cara berikut ini.

• Cmd + Delete (Mac)

• Ctrl + Delete (Windows)

Shortcut Berguna saat Menggambar Kerangka

• Shift: Menggambar dalam bentuk persegi

• Alt atau Option: Menggambar dari pusat ke luar

• Space: Memindahkan posisi saat menggambar

Absolute Position vs Relative Position – Hal yang Perlu Diperhatikan Saat Menggunakan dengan Stack

Di Framer, ketika Anda membuat Stack, elemen di dalamnya secara otomatis menerapkan Relative Positioning di mana elemen disejajarkan secara otomatis dari atas ke bawah atau kiri ke kanan berdasarkan aliran.
Apa yang akan terjadi jika suatu elemen diubah menjadi Absolute?

• Elemen tersebut akan keluar dari aliran pengaturan (Flow)

• Posisi dapat ditentukan dengan menyeret secara bebas, namun dapat bersinggungan dengan elemen lain atau menyebabkan tata letak rusak

Apa itu z-index?

Pada saat seperti ini, Anda dapat menggunakan properti z-index, sebuah konsep untuk menggambarkan urutan elemen dengan angka, untuk mengontrol elemen mana yang terlihat di depan.

• Nilai dasarnya adalah 0, semakin besar angka, semakin terlihat di depan, semakin kecil angka, semakin tertumpuk di belakang.

• Misalnya, jika z-index: 1 berarti elemen ini berada di depan daripada elemen lain, jika -1 berarti elemen ini berada di belakang elemen lain.

Di Framer, saat Anda beralih ke Absolute, nilai z-index ini secara otomatis ditambahkan, sehingga urutan tumpang tindih dasar sudah tersusun meskipun Anda tidak mengaturnya secara khusus.

Catatan: Gunakan Absolute hanya jika diperlukan di dalam Stack karena dapat mengganggu aliran tata letak.

Kapan Sebaiknya Menggunakan Absolute Position?

Absolute Position cocok untuk elemen UI yang memerlukan posisi statis atau elemen yang perlu ditekankan secara visual.

• Ilustrasi latar belakang pada hero section

• Lencana yang melayang di atas tombol CTA

• Elemen animasi yang melayang di latar belakang

Namu, dalam halaman di mana aliran konten penting, sebaiknya hindari penggunaan yang berlebihan. Untuk struktur teks atau daftar, Stack lebih menguntungkan.

Ringkasan Akhir

• Absolute Positioning memungkinkan ‘penataan bebas’, namun beroperasi berdasarkan kerangka induk

• Pin memungkinkan nilai jarak dijaga meskipun responsif

• Perlu berhati-hati saat digunakan dalam Stack karena dapat keluar dari aliran

• Urutan tumpang tindih dapat diatur dengan z-index

Tulisan ini adalah terjemahan dan adaptasi dari konten ‘Absolute Positioning in Framer (Fundamentals Lesson 5)’ di YouTube resmi Framer.