Membuat kisi-kisi untuk tablet dan seluler

Kisi-kisi tablet dan ponsel

Melanjutkan dari video sebelumnya di mana Anda mempelajari cara membuat kisi untuk desktop di Figma, mari kita membuat kisi tablet dan ponsel. Untuk mulai membuat kisi baru, tekan F pada keyboard untuk membuka menu bingkai di bilah sisi kanan. Kemudian buka menu tablet dan pilih iPad mini.

Pilih bingkai desktop dan arahkan mouse Anda ke sebelah kiri ikon kisi. Anda akan melihat ikon tumpukan "sandwich" muncul. Sekarang Anda dapat menekan ctrl atau shift pada keyboard Anda dan klik ikon tersebut untuk memilih kisi, lalu salin dan tempel ke dalam bingkai tablet.

Hal ini akan membawa seluruh sistem kisi ke dalam bingkai tablet Anda. Anda mungkin bertanya pada diri sendiri: Bagaimana Anda mendesain tata letak tablet dengan kolom-kolom sekecil itu? Jadi, mari kita ubah kisi 12 kolom menjadi 8 kolom. Sekarang, ada lebih banyak ruang untuk bernapas.

Kisi Anda sudah siap untuk memulai desain Anda. Selanjutnya, mari kita buat sistem kisi-kisi ponsel kita dengan mengikuti langkah-langkah yang sama. Anda harus mulai dengan memilih bingkai ponsel.

Kemudian, salin kisi-kisi dan ubah kolom menjadi kisi-kisi 4 kolom dan ubah margin menjadi 20.

Sekarang Anda telah membuat sistem kisi responsif horizontal dan vertikal. Anda juga dapat meregangkan bingkai ini, dan mereka akan menyesuaikan skalanya. Ini hanyalah titik awal. Grid dapat menjadi lebih canggih saat Anda mendapatkan lebih banyak detail pada perangkat tertentu. Namun, ini sudah cukup baik untuk membantu Anda memulai proyek responsif pertama Anda.

Menyembunyikan grid

Jika Anda ingin melihat frame tanpa sistem grid, klik pada persentase Zoom di sudut kanan atas layar. Ini akan membuka menu View Settings, di mana terdapat opsi untuk mengaktifkan atau menonaktifkan grid. Atau, Anda bisa menggunakan Pintasan Keyboard untuk menonaktifkan Kisi-kisi Tata Letak. Pada Mac, ini adalah Command G, dan pada Windows, ini adalah Control Shift 4. Dengan mengulangi perintah yang sama, kisi-kisi akan ditampilkan.

Konsistensi UI

Ketika pengukuran Anda mengikuti aturan yang sama, Anda secara otomatis mendapatkan UI yang lebih konsisten. Untuk meningkatkan konsistensi, Anda dapat mengubah properti nudge untuk menyelaraskan dengan grid 8 titik. Nudge adalah seberapa banyak Anda dapat memindahkan layer pada frame menggunakan tombol panah. Ada dua jenis dorongan: kecil dan besar. Dorongan kecil memungkinkan saya untuk memindahkan lapisan dengan penambahan 1 piksel menggunakan tombol panah pada keyboard. Dorongan besar diakses dengan menggunakan tombol shift dan panah. Secara default, Figma telah menetapkannya pada 10 piksel.

Mari kita ubah menjadi 8 poin. Jadi, pilih preferensi dari ikon Figma di sudut kiri atas dan klik Nudge Amount untuk mengatur nilai nudge besar menjadi 8 poin. Anda siap untuk bereksplorasi membuat lebih banyak grid dan bekerja dengan properti nudge.