PENJELASAN TENTANG GRID DAN CARA MENGAPLIKASIKAN DI FIGMA

Pengertian Grid

Grid adalah garis-garis yang dapat membantu desainer web dalam menyusun layout agar lebih terstruktur. UI designer dapat menyesuaikan jumlah atau lebar dari garis, sehingga akan menghasilkan kolom yang seimbang dan menarik dari sisi pengguna.

Fungsi Grid

Fungsi utama dari grid adalah memberikan struktur layout yang konsisten bagi para UI designer dalam pembuatan web design. Adanya struktur ini dapat membantu desainer dalam menempatkan elemen-elemen secara lebih rapi dan terstruktur.
Akan tetapi, penggunaan garis-garis tersebut bukan merupakan batasan bagi desainer untuk berkreasi dengan desainnya. Grid adalah sebuah alat yang dapat memudahkan proses desain, bukan merupakan sebuah aturan. Artinya, proses desain tidak ditentukan oleh struktur ini.
Fungsi dari garis-garis ini adalah untuk mengetahui jumlah kolom yang dapat digunakan oleh para desainer dalam membuat sebuah elemen pada website. Hal tersebut juga dapat membantu hasil coding agar sesuai dengan desain yang dibuat oleh tim UI.

Jenis - Jenis Grid

Pada kebutuhan desain UI, beberapa jenis grid adalah sebagai berikut:
  1. Column
    Column adalah sebuah jenis yang paling sering digunakan. Jenis ini memungkinkan desainer untuk membagi halaman menjadi beberapa kolom sesuai kebutuhan. Jika Anda pernah melihat layout bacaan dari koran atau majalah, maka seperti itulah gambaran dari jenis ini. Kolom ini dibuat dari beberapa garis yang membentuk sebuah bidang vertikal. Bidang tersebut akan digunakan untuk meletakkan objek atau elemen dalam desain UI/UX.
    Contoh jenis ini dapat Anda lihat pada gambar berikut.
    PENJELASAN TENTANG GRID DAN CARA MENGAPLIKASIKAN DI FIGMA
  2. Baseline
    Baseline adalah beberapa garis horizontal sejajar dengan panjang dan jarak yang sama, sehingga dapat membuat teks pada website terlihat lebih rapi. PENJELASAN TENTANG GRID DAN CARA MENGAPLIKASIKAN DI FIGMA
  3. Pixel
    Pixel grid adalah jenis yang sangat penting dalam pembuatan desain web. Jenis ini biasanya dibentuk berdasarkan pixel yang terdapat pada layar. Pixel akan memudahkan para desainer untuk menjaga kualitas visual dari elemen yang terdapat pada desain website.
    PENJELASAN TENTANG GRID DAN CARA MENGAPLIKASIKAN DI FIGMA
  4. Hierarchical
    Lain dengan jenis lainnya, hierarchical grid adalah garis-garis dengan bentuk bidang yang terkesan tidak beraturan. Jenis ini merupakan yang paling bebas, tetapi tetap terstruktur. Anda dapat membuatnya dengan menumpukkan beberapa bidang, atau mencampurkan bidang vertikal dan horizontal dalam sebuah halaman desain. Hal tersebut berkaitan dengan tingkat kebutuhan elemen yang terdapat pada website. Jenis ini dapat membantu menempatkan elemen sesuai dengan prioritas kebutuhannya pada halaman tersebut. Selain itu, penggunaan hierarchical juga dapat membuat desain web tidak terkesan kotak dan kaku. Berikut contohnya:
    PENJELASAN TENTANG GRID DAN CARA MENGAPLIKASIKAN DI FIGMA
  5. Modular
    Modular adalah garis-garis berbentuk kolom yang ditambahkan dengan garis vertikal, sehingga menghasilkan bidang yang saling berpotongan seperti modul. Dengan menggunakan modular, desainer dapat meletakkan elemen-elemen secara lebih sistematis. Hal itu juga dapat menghasilkan layout desain yang menarik sesuai dengan preferensi pengguna.
    PENJELASAN TENTANG GRID DAN CARA MENGAPLIKASIKAN DI FIGMA
  6. Menuscript
    Sesuai dengan namanya, manuscript grid adalah bidang yang khusus untuk meletakkan elemen teks atau naskah. Dengan menggunakan jenis ini, teks pada desain UI/UX akan terlihat rapi dan lebih mudah dibaca oleh pengguna.
    PENJELASAN TENTANG GRID DAN CARA MENGAPLIKASIKAN DI FIGMA

Komponen Penting Dalam Grid

Sebelum membuatnya, Anda perlu mengetahui komponen-komponen pentingnya terlebih dahulu.Beberapa komponen penting yang harus Anda pahami dalam pembuatan grid adalah sebagai berikut:
  1. Kolom
    Kolom atau column grid adalah komponen dasar dalam pembuatan grid desain. Sebuah grid dapat terdiri dari beberapa kolom, baik dengan ukuran yang sama ataupun berbeda. Kolom pada garis-garis tersebut dapat membantu menata elemen desain dengan lebih rapi dan teratur.
  2. Margin
    Margin dalam grid adalah ruang kosong yang terletak di sekitar elemen. Dengan margin, Anda akan membantu memberikan ruang napas untuk menjaga efektivitas elemen pada web design. Komponen ini cukup penting untuk diperhatikan agar desain yang Anda buat terlihat lebih center.
  3. Gutter
    Gutter merupakan ruang kosong yang berada di antara kolom. Komponen ini juga dapat menjadi pemisah antara elemen satu dengan yang lainnya. Dengan memperhatikan gutter, jarak desain yang Anda buat akan lebih teratur dan tidak terkesan berdesakan.

Cara Membuat Grid Pada Figma

  1. Buka aplikasi atau web Figma, kemudian pilih project yang akan didesain PENJELASAN TENTANG GRID DAN CARA MENGAPLIKASIKAN DI FIGMA
  2. Buat page baru, beri nama sesuai kebutuhan Anda PENJELASAN TENTANG GRID DAN CARA MENGAPLIKASIKAN DI FIGMA
  3. Pada bagian tools silahkan pilih tools frame PENJELASAN TENTANG GRID DAN CARA MENGAPLIKASIKAN DI FIGMA
  4. Pilih frame sesuai dengan kebutuhan anda PENJELASAN TENTANG GRID DAN CARA MENGAPLIKASIKAN DI FIGMA
  5. Pilih Layout Grid pada bagian Properties PENJELASAN TENTANG GRID DAN CARA MENGAPLIKASIKAN DI FIGMA
  6. Untuk membuat kotak grid, silahkan pilih Grid dan atur nilai dan warna PENJELASAN TENTANG GRID DAN CARA MENGAPLIKASIKAN DI FIGMA
  7. Untuk membuat kotak kolom, Anda dapat menyesuaikan jumlah, warna, margin, gutter, dan tipenya PENJELASAN TENTANG GRID DAN CARA MENGAPLIKASIKAN DI FIGMA
  8. Untuk membuat kotak rows, Anda dapat menyesuaikan jumlah, warna, margin, gutter, dan tipenya PENJELASAN TENTANG GRID DAN CARA MENGAPLIKASIKAN DI FIGMA
  9. Anda juga dapat menumpuk beberapa grid sekaligus dengan mengklik tanda + seperti pada gambar berikut PENJELASAN TENTANG GRID DAN CARA MENGAPLIKASIKAN DI FIGMA
Demikian penjelasan tentang grid dan bagaimana cara mengaplikasikannya pada Figma. Semoga dengan adanya artikel ini dapat membantu para UI Designer untuk memahami apa itu Grid dan bagaimana cara menggunakan grid pada Figma.
19 Januari 2024

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat