Lapisan, kelompok dan bingkai

Lapisan

Dokumen Figma dapat menjadi terlalu rumit karena biasanya berisi kombinasi gambar, objek, dan teks yang padat. Desainer terkadang tergoda untuk membiarkan panel layer mereka terlihat seperti kekacauan yang terorganisir, sehingga sulit untuk menemukan sesuatu.

Pendekatan penamaan layer

Kapan dan sejauh mana kita menamai layer kita bergantung pada kematangan desain kita dan tahap proses desain yang sedang kita jalani (ide, kolaborasi, siap diserahterimakan).

Konvensi

Karena setiap tim itu unik, saran dalam bacaan ini hanyalah saran. Berdasarkan keterbacaan atau bagaimana tim pengembang lebih suka menyusun komponen mereka, Anda dapat mengembangkan metode kerja Anda sendiri. Penamaan lapisan juga ditentukan oleh tahap proses desain Anda, ukuran tim Anda, dan tingkat keterlibatan pengembang Anda dalam proses desain. Untuk membantu Anda memulai, berikut adalah beberapa metode:

Tugas

Mari kita ambil komponen di bawah ini, sebagai contoh:

Pemikiran tahap desain

Dalam paradigma ini, tidak perlu memberi nama lapisan karena Anda masih dalam mode aliran bebas, menghasilkan ide dan fokus pada penyelesaian masalah terlebih dahulu.

Kita hanya bersenang-senang pada tahap ini, jadi kita tidak perlu khawatir tentang penamaan atau struktur layer. Pembuat file melakukan penamaan untuk Anda. Karena ini masih sangat sederhana, jangan khawatir tentang penamaan atau bahkan menggunakan elemen tertentu (mungkin persegi panjang sudah cukup untuk sebuah tombol!).

Penyempurnaan

Ketika Anda dan tim Anda bersiap-siap untuk mendapatkan persetujuan dari para pemangku kepentingan utama Anda, ini adalah saat Anda ingin memikirkan betapa mudahnya bagi seseorang untuk mencerna ide-ide Anda dan mengulanginya, penamaan layer yang jelas sangat membantu dalam hal ini.

Gunakan nama layer yang deskriptif di sini. Sebuah kartu harus disebut kartu, angka harus disebut angka, dan deskripsi harus disebut deskripsi. Pada titik ini, Anda masih memiliki desain Anda sendiri, tetapi sedang bertukar pikiran dengan rekan kerja. Ini adalah waktu yang tepat untuk menamai lapisan-lapisan sehingga masuk akal sebagai sebuah kelompok. Cara paling sederhana untuk mencapai hal ini adalah dengan membuat deskripsi yang sedetail mungkin.

Kelompok dan bingkai

Ketika bekerja dengan sejumlah besar layer, Anda memerlukan metode yang lebih formal untuk menggabungkannya. Di perangkat lunak desain lain, Anda akan menggunakan grup untuk ini, tetapi Figma menawarkan opsi lain: frame. Frames sekilas tampak sangat mirip dengan Groups, jadi mari kita lihat lebih dekat dan temukan karakteristik uniknya.

Mari kita mulai dengan hal-hal mendasar. Setiap aplikasi grafis sekarang memiliki fungsi pengelompokan: pilih beberapa objek, tekan Command G di Mac atau Ctrl G di Windows, dan daftar layer Anda sekarang akan terlihat lebih bersih dengan grup yang dapat dilipat. Grup ditentukan oleh isinya. Batas grup Anda adalah tepi luar dari apa pun yang ada di dalamnya. Akibatnya, setiap kali Anda mengubah posisi atau dimensi objek, batas-batas grup akan berubah. Elemen induk dalam dokumen Anda terkait dengan objek grup. Batasan grup diatur ke "kiri" dan "Atas" secara default, seperti yang ditunjukkan oleh garis putus-putus di sini:

Jika batasan diatur ke skala, grup Anda akan berskala dengan elemen induknya. Saat Anda mengubah ukuran grup, isinya juga akan selalu diubah ukurannya. Anda dapat mempertahankan rasio aspek yang sama dengan menahan Shift saat mengubah ukuran.

Bingkai

Pada pandangan pertama, tampaknya tidak ada banyak perbedaan antara grup dan bingkai. Anda memilih objek Anda dan menekan Command G pada Mac atau Ctrl-Alt-G pada Windows untuk mengubahnya menjadi sebuah bingkai. Mereka akan runtuh dengan cara yang sama dalam daftar layer. Ketika Anda membuat bingkai, dimensi awal ditentukan oleh isinya. Di sisi lain, batas-batas bingkai Anda tidak tergantung pada apa yang ada di dalamnya.

Bingkai Anda mirip dengan jendela atau, jika Anda lebih suka, papan seni di mana Anda dapat melihat objek di belakangnya. Ketika Anda mengubah ukuran bingkai, Anda hanya mengubah ukuran jendela yang melaluinya Anda melihat. Mendesain dengan bingkai adalah kunci untuk membuka fitur-fitur Figma yang paling canggih. Anda akan dapat membuat desain yang tertata dengan baik, ditata dengan indah, mudah digunakan, dapat digulir, dan diubah ukurannya.

Ukuran individual

Ukuran bingkai tidak bergantung pada anak-anaknya, yaitu lapisan-lapisan bersarang. Ukuran bingkai induk tidak akan berubah jika anak-anaknya dipindahkan atau diubah ukurannya. Ini berarti bahwa bingkai induk dapat berukuran sama atau lebih besar dari anak-anaknya. Memungkinkan Anda untuk melakukan hal-hal seperti menambahkan padding internal, membuat efek "mask", dan mengaktifkan interaksi gulir dalam prototipe (contohnya di bawah ini). Berbeda dengan Grup, di mana grup harus berukuran sama dengan anak-anaknya.

Menggunakan gaya

Bingkai, seperti persegi panjang, adalah objek yang dapat diberi gaya. Mereka dapat didekorasi dengan isian, goresan, atau bayangan. Mereka juga bisa memiliki sudut yang membulat. Dengan tingkat kemampuan beradaptasi ini, bingkai dapat digunakan untuk mendesain hampir semua hal. Tombol, misalnya, dapat dibuat hanya dengan menggunakan bingkai bergaya (biru dengan sudut membulat) dan satu lapisan teks, tidak seperti grup, di mana lapisan kedua diperlukan untuk latar belakang (membuat tata letak otomatis tidak mungkin).

Melimpahkan konten

Anak bingkai (lapisan bersarang) dapat "meluap" melewati batasnya. Dengan bantuan "Konten Klip," anak-anak yang berada di luar batas dapat tetap terlihat atau disembunyikan.

Mengubah ukuran dengan batasan

Anak bingkai dapat diterapkan untuk mengubah ukuran batasan (lapisan bersarang). Mereka digunakan untuk "menyempitkan" atau "menyematkan" anak-anak ke bagian atas, bawah, tengah, kiri atau kanan bingkai atau untuk menskalakan saat ukurannya berubah.

Pengubahan ukuran tata letak otomatis

Tata letak otomatis dapat diterapkan pada bingkai untuk menciptakan berbagai perilaku pengubahan ukuran (otomatis). Arah pertumbuhan bingkai, jarak antara anak (lapisan bersarang), bantalan internal, dan bagaimana setiap anak akan merespons perubahan, semuanya ditentukan oleh tata letak otomatis. Ini adalah fitur yang sangat kuat yang dapat digunakan dalam berbagai cara.

Tata letak dan kisi

Kisi-kisi dan tata letak dapat diterapkan pada bingkai apa pun, dari "artboard" perangkat yang besar hingga wilayah UI atau komponen kecil. Berbagai bingkai ini bahkan dapat bersarang di dalam bingkai induk lainnya. Ketika digunakan dengan batasan, ini berguna untuk mempertahankan jarak yang konsisten di berbagai ukuran kontainer dan mengonfigurasi perilaku pengubahan ukuran. Bingkai desktop, misalnya, dapat memiliki satu tata letak untuk bingkai halaman bersarang dan satu lagi untuk bingkai navigasi samping bersarang. Masing-masing memiliki perilaku pengubahan ukuran.

Membuat komponen

Untuk membuat komponen, semua lapisan komponen harus ditempatkan dalam satu bingkai. Namun, jika elemen-elemen ini ditempatkan dalam sebuah grup, Figma akan secara otomatis mengubah grup tersebut menjadi sebuah bingkai ketika Anda mengklik "buat komponen."

Pikiran akhir

Membaca tentang semua fitur yang tersedia dengan frame memang berguna, tetapi belajar langsung lebih baik lagi!

Tandai sebagai selesaiSukaTidak DisukaiLaporkan Masalah