Dokumen ini dibuat untuk membantu pengguna domestik yang belajar Framer yang menghadapi kesulitan karena kurangnya materi dalam bahasa Indonesia. Kami menerjemahkan konten resmi blog ke dalam bahasa Korea dan menambahkan informasi berguna untuk praktik. Semoga ini bermanfaat bagi Anda yang menggunakan FramerFramer.

Bagaimana cara mengatur tata letak situs web?
Seindah atau serumit desain dan UI, jika Anda memperhatikannya, semuanya terdiri dari persegi panjang (rectangle). Dalam FramerFramer, persegi panjang ini disebut Frame, dan hampir semua elemen dibuat berdasarkan Frame.

Dalam tulisan ini, kita akan mempelajari dengan detail apa sebenarnya Frame dalam FramerFramer dan bagaimana menggunakannya dengan tepat.

Apa itu Frame?

Dalam FramerFramer, Frame adalah wadah dasar untuk menyimpan konten serta unit utama dalam menyusun struktur, penyelarasan, dan tata letak. Di dalam frame, Anda bisa 'menyertakan' elemen lain, sehingga memungkinkan untuk membuat hierarki.

Saat mengelola frame, ada istilah-istilah yang akan sering Anda temui. Jika Anda memiliki pengalaman dengan Figma atau pengembangan web, konsep ini mungkin akan terasa akrab. Memahami hierarki ini dalam FramerFramer adalah kunci untuk merancang tata letak, jadi sebaiknya pahami sebelumnya agar tidak bingung.

• Tertanam (Nested): Kondisi di mana suatu layer berada di dalam frame

• Anak (Child): Layer yang berada di dalam frame (anak)

• Induk (Parent): Frame yang mengelilingi layer (induk)

• Saudara (Siblings): Layer yang berada di bawah frame induk yang sama (hubungan saudara)

Apa yang dilakukan Frame

Dalam FramerFramer, Frame tidak hanya 'mengelilingi elemen' tetapi juga memiliki berbagai fungsi.

• Berfungsi untuk mengelompokkan atau menyelaraskan elemen

• Menciptakan struktur Stack atau Grid secara otomatis

• Menentukan ukuran dan posisi yang fleksibel

• Menentukan gaya visual seperti latar belakang, bayangan, tepi

• Atau sekadar digunakan untuk menggambar persegi panjang

Misalnya, jika Anda melihat 'Feature section' di panel Insert, inilah bagaimana Frame digunakan.

• Area keseluruhan → Frame besar

• Setiap Feature → Frame individu

• Gambar → Frame gambar

• Teks → Frame teks

• Tombol → Frame tombol

Mengetahui bahwa semua komponen disusun dari Frame, Anda dapat dengan mudah menganalisis dan memahami struktur apapun berdasarkan unit Frame.

Frame mungkin tidak terlihat

Beberapa frame mungkin terlihat seperti persegi bergaya visual,
sedangkan beberapa frame bisa benar-benar wadah yang transparan.

Catatan: Berbagai efek seperti tepi frame, warna latar belakang, bayangan, dan transformasi dapat ditetapkan dari panel atribut di sebelah kanan.

Cara membuat Frame

1. Pilih alat Frame dari menu Layout di toolbar atas

2. Atau tekan tombol F untuk beralih ke alat Frame

3. Klik dan seret di kanvas untuk membuat frame di lokasi yang diinginkan

Catatan: Pada awalnya, gambarlah dengan ukuran kasar, lalu seringkali kita menyesuaikan ukuran atau posisi yang tepat di panel atribut di sebelah kanan.

Shortcut yang bisa digunakan selama drag

• Shift → Menggambar persegi

• Alt / Option → Menggambar dari pusat ke luar

• Space → Memindahkan posisi selama drag

Cara menempatkan elemen ke dalam Frame (Nesting)

Cukup seret layer ke dalam frame saja, itu secara otomatis akan menjadi elemen anak.
Jika garis biru muncul di sekitar frame, itu artinya berhasil.

• Fungsi ini disebut sebagai Nesting otomatis.

• Jika ingin mencegah Nesting, tekan dan tahan Spacebar saat drag.

Mengelilingi elemen yang ada dengan frame

Jika Anda ingin mengelilingi beberapa elemen yang sudah ada dengan satu frame, lakukan langkah-langkah berikut.

1. Pilih layer yang ingin Anda kelilingi

2. Klik kanan > Pilih 'Add Frame'

3. Atau tekan Cmd + Enter (Mac) / Ctrl + Enter (Windows)

Frame baru sebagai induk yang mencakup elemen-elemen yang dipilih akan dibuat.
Sebaliknya, jika Anda ingin menghapus frame dan hanya ingin menyisakan elemen anak?

• Mac: Cmd + Delete

• Windows: Ctrl + Delete

Tekan ini.

Penyelesaian

Ringkasannya adalah sebagai berikut.

• Dalam FramerFramer, hampir semuanya terdiri dari Frame.

• Frame bukan hanya persegi yang mengelilingi konten, tetapi juga merupakan unit utama yang menangani gaya dan struktur.

• Memahami hierarki (Nesting) dan konsep induk-anak memungkinkan Anda merancang tata letak yang kompleks dengan mudah.

Artikel ini adalah konten yang diadaptasi dan diterjemahkan dari FramerFramer YouTube resmi ‘Thinking in Frames (Fundamentals Lesson 4)’.