Tutorial Membuat Tabel di Figma — Menggunakan Cara Manual
Seperti yang kita tahu dalam pembuatan design website maupun mobile tidak terlepas dari yang namanya tabel. Namun yang menjadi masalah bagaimana proses pembuatan tabelnya.
Pada tutorial kali ini kita akan membuat tabel menggunakan Figma.
Apa itu figma?
Figma merupakan salah satu design tool yang dapat digunakan untuk membuat desain sebuah aplikasi baik untuk website maupun mobile. Keunggulan menggunakan figma yaitu aplikasi ini dapat diakses melalui browser (web-based). Sehingga apapun sistem operasi yang kamu gunakan.
Nah bagaimana cara mengakses figma ini?
Kamu bisa mengunjungi website nya yaitu figma.com
Cara daftar figma bisa di akses tulisan saya ini.
Disini saya akan langsung mempraktekan cara membuat table di figma. Berikut cara saya membuat tabel sampai saat ini, mungkin nantinya akan ada cara membuat tabel yang lebih effisien.
- Manual menggunakan garis / line.
- Menggunakan Frame dengan dikombinasikan stroke.
- Menggunakan Frame, stroke dan metode auto layout.
Saya akan membagi 3 part pembuatan tabel ini.
Mari kita siapkan terlebih dahulu contoh tabel yang akan kita buat. Disini kita buat tabel untuk data mahasiswa dengan atrribut :
- NIM
- Nama
- Jenis Kelamin
- Tempat Tanggal Lahir
- Alamat
- Tahun Masuk
Kita mulai dengan membuat frame terlebih dahulu, caranya bisa menggunakan shortcut F atau klik icon frame di pojok kiri atas.
Kita asumsikan tabel ini kita buat untuk aplikasi berbasis website (web-based). Pilih frame Desktop 1440x1024 px.
Nah setelah berhasil membuat frame Desktop, akan muncul tampilan seperti ini.
Pada artikel ini, saya akan mencoba mempraktekan tutorial pembuatan tabel menggunakan cara manual menggunakan garis / line.
Oke mulai, tambahkan attribut-attribut yang akan digunakan menggunakan text. Caranya bisa menggunakan shortcut T atau bisa langsung klik icon T
Disini saya sudah membuat attribut-attribut yang akan dijadikan sebagai header tabel. Kemudian attribute tersebut saya susun seperti ini.
Oke next, kita tambahkan garis untuk langkah selanjutnya. Caranya bisa menggunakan shortcut L atau bisa langsung klik Line di pojok kiri atas.
Setelah itu gunakan garis tersebut secara horizontal dan vertical, sehingga tampilannya akan seperti ini.
Setelah itu kita tinggal memasukan data-data mahasiswa ke dalam tabel yang telah kita buat dengan menggunakan Text.
Oh iya jangan lupa kita tambahkan judul dari tabelnya, sehingga tampilannya seperti ini.
Akhirnya kita selesai membuat tabel dengan cara manual menggunakan garis / line.
di Artikel selanjutnya saya membahas tutorial pembuatan tabel di figma dengan cara :
- Menggunakan Frame dengan dikombinasikan stroke.
2. Menggunakan Frame, stroke, dan metode auto layout.
Sekian dulu, artikel ini. Semoga bermanfaat.
