Membuat Wireframe Website dengan Figma
Figma merupakan salah satu tools powerfull yang dapat digunakan untuk membuat design dan prototype
Figma
Figma adalah aplikasi desain dan prototyping yang berbasis web sehingga dapat digunakan di berbagai sistem operasi tanpa harus mendownloadnya terlebih .
Figma menyediakan aplikasi berbasis Desktop, namun aplikasi Figma hanya tersedia untuk sistem operasi Windows dan MacOS.
Figma merupakan aplikasi alternatif selain Sketch dan Adobe XD yang biasa digunakan oleh para desainer untuk membuat suatu design, produk, atau prototyping.
Salah satu kelebihan dari Figma sendiri yaitu berbasis web sehingga dapat berjalan di platform manapun, sehingga pengguna tidak perlu mendownload terlebih dahulu aplikasnya.
Kehadiran Figma merupakan kabar baik bagi pengguna Linux dikarenakan tools seperti Sketch dan Adobe XD tidak dapat dijalankan di Linux.
Sekilas Mengenai Desain dan Code
Dalam pembuatan website, kita tidak langsung menuliskan kode atau coding. Ada tahapan yang harus dilalui sebelum masuk ke tahapan coding, salah satunya adalah tahapan desain website.
Sekilas membahas mengenai desain dan UI/UX. Dalam membuat sebuah website, kita terlebih dahulu melewati proses mendesain website. Mendesain website sendiri tidak serta merta langsung mendesain asal-asalan, memberi warna yang kita suka, atau menentukan layout yang hanya sesuai keinginan kita.
Pada kasus inilah proses UI/UX dibutuhkan. Pada proses UI/UX ini kita mendefinisikan halaman website kita seperti apa yang akan ditujukan ke user, seperti apa tata letak dari website kita, apa warna yang akan kita gunakan di dalam website kita, hal apa saja yang ingin disampaikan kepada user melalui website kita. Semua hal ini dilakukan dalam proses UI/UX.
Dalam membuat tahapan desain, setidaknya ada 3 hal yang harus dilewati atau ada 3 hal yang harus dilakukan dalam pembuatan desain website:
- Sketch
- Wireframe
- Prototyping
Pembahasan lebih lanjut mengenai ini dapat dipelajari dalam dunia UI/UX
Sekarang, untuk mempermudah dalam pembelajaran kita dalam pembuatan website, kita bisa langsung membuat wireframe dari suatu website. Untuk inspirasi website sendiri bisa dicari di google.
Keutungan kita membuat wireframe terlebih dahulu adalah agar kita mempunyai gambaran kira kira seperti apa website yang akan kita buat, kemudian dengan adanya wireframe kita bisa menghemat kerjaan kita dalam menuliskan code, sehingga tampilan tampilan yang tidak sesuai bisa kita perbaiki terlebih dahulu di wireframe, kemudian ketika wireframe sudah dirasa cocok dan sudah bagus, barulah kita melakukan tahapan slicing atau mengubah desain ke code (ngoding).
Mendaftar Figma
Sebelum menggunakan Figma, kita harus mendaftar terlebih dahulu.
- Buka Figma
- Kemudian klik tombol Sign up
- Maka akan muncul Form Sign up
- Masukan email dan password
- Lalu klik Create Account
- Kemudian kita langsung dibawa ke halaman login
Selain itu, kita bisa langsung mendaftar dengan menekan button Sign Up with Google untuk mempercepat proses pendaftaran.
Terakhir setelah mendaftar, jangan lupa untuk melakukan verifikasi figma melalui email, Klik link verifikasi email dari figma yang dikirimkan ke alamat email.
Login Figma
Jika sudah mendaftar, seharusnya sudah langsung login ke Figma. Namun jika belum, silahkan login ke Figma terlebih dahulu.
- Buka Figma
- Klik menu Log in
- Maka akan muncul Form Log in
- Masukan email dan password
- Klik tombol Login
Selain itu, jika kita mendaftar dengan alamat gmail. Kita bisa langsung login dengan menekan tombol Log in with Google. Cara ini lebih sederhana.
Jika sudah, kita akan dibawa ke halaman dashboard figma.
Pada halaman dashboard akan tampil file atau projek yang sudah pernah dibuat. Jika masih kosong berarti karena belum pernah membuat file atau projek.
Mengenal Figma
Sebelum kita belajar menggunakan Figma, lebih baiknya kita mengenal sedikit tampilan dashboard dari figma terlebih dahulu.
Secara umum, pada halaman dashboard terdapat 3 bagian utama:
- Sidebar: Menampilkan menu-menu
- Toolbar: Menampilkan toolbar dari menu yang diakses melalui sidebar
- Konten: Menampilkan konten dari menu yang diakses melalui sidebar
Sidebar
Pada bagian sidebar, terdapat beberapa menu yang dapat kita akses. Ketika mengakses menu yang terdapat pada sidebar, maka toolbar dan konten akan ditampilkan sesuai menu yang diakses dari sidebar.
Menu menu yang terdapat pada sidebar:
- Aufa Billah (Profil): Menu ini menampilkan konten profil ketika diklik
- Search: Menu ini menampilkan konten search, di mana kita bisa mencari projek atau file yang sudah pernah dibuat
- Recent: Menu ini menampilkan file atau proyek terbaru
- Community: Menu ini nenampilkan file dan plugin yang dibuat oleh komunitas untuk membantu penggunaan Figma
- Draft: Menu ini digunakan untuk menyimpan file atau proyek yang sudah pernah kita buat. Melalui menu ini, kita bisa mengakses kembali file yang sudah pernah kita buat
- Selain itu, terdapat tombol upgrade untuk mengupgrade figma dan menu create new team untuk membuat team.
Membuat File Pertama
Kita akan belajar caranya mendesain atau membuat prototype. Namun sebelum masuk jauh ke sana kita akan belajar membuat membuat hal-hal sederhana terlebih dahulu.
Hal ini sama seperti di dalam dunia coding, kita membuat perintah untuk menampilkan teks Hello World.
Kita mulai dengan membuat file terlebih dahulu.
Membuat File
Tahap pertama sebelum membuat design atau prototype adalah membuat file. File ini nanti akan digunakan untuk menyimpan proyek yang kita kerjakan.
- Buka Figma
- Login terlebih dahulu jika belum login
- Maka akan diarahkan ke halaman dashboard
- Klik icon + di samping menu Draft untuk membuat file baru
- Maka akan terbuat file baru dengan nama Untitled
Pada halaman file ini terdapat beberapa interface yang nanti akan digunakan, berikut beberapa interface secara umum:
- Toolbar: Pada bagian ini, kita dapat mengakses tools yang dapat digunakan dalam membuat design atau prototype seperti: frame, shape tools, drawing tools, text, dll. Lalu paling kiri terdapat icon humberger yang isinya berupa menu-menu.
- Right Sidebar (Inspector): Bagian ini menampilkan setting atau pengaturan dari object yang dipilih. Terlihat bahwa terdapat setting background dari object canvas.
- Left Sidebar (Layers): Pada sidebar kiri, terdapat layers yang tujuannya menampilkan element, object, atau frame yang terdapat pada file.
- Artboard/Canvas: Tempat kita bekerja atau berkarya untuk membuat design, prototype, dll.
Basic Shape
Kita akan belajar membuat shape sederhana terlebih dahulu sebagai penggenalan penggunaan figma.
- Buka Figma, lalu login
- Klik new file
- Maka akan muncul file baru
- Kita bisa mengganti nama filenya pada bagian toolbar
- Klik untitled, lalu isi nama file baru
- Selanjutnya kita buat frame terlebih dahulu sebagai wadah yang akan kita gunakan untuk mendesain shape atau yang lainnya.
- Klik region tools — frame
- Kemudian, lihat di sebelah kanan (inspector) maka akan muncul pilihan frame yang akan digunakan. Frame ini digunakan untuk mendesain layout untuk android, iphone, atau desktop. Kita pilih saja yang desktop.
- Kita akan membuat shape sederhana, sebagai contoh kita akan membuat Rectangle
- Klik shape tools — Rectangle
- Selanjutnya, gunakan cursor untuk membuat shape di frame. Caranya arahkan cursor ke frame, klik kiri, kemudian tarik rectangle seluas yang diingkan
- Kita juga bisa mencoba shape lain dengan cara yang sama. Kita bisa memilih eclipse, star, dll
- Kita juga dapat menggunakan drawing tools seperti pen dan pencil
- Klik drawing tools, kemudian pilih pen atau pencil
- Sebagai contoh, di sini saya menggunakan pencil untuk menggambar
- Kita juga dapat menambahkan teks di frame kita.
- Klik Text (icon T)
- Kemudian tulis teks di frame
- Sekarang perhatikan di left sidebar (Layers), pada bagian ini akan tampil object object dan frame yang telah kita buat.
Mengedit Object Shape
Kita dapat mengedit object seperti shape, pen, atau text yang sudah kita buat.
- Klik rectangle
- Kemudian perhatikan, right sidebar (inspecor) berubah sesuai dengan object yang dipilih. Jika kita memilih object lain, maka inspector ini pun berubah-ubah sesuai dengan object yang dipilih
- Pada bagian inspector ini, kita dapat mengedit shape seperti mengatur posisi, ukuran, warna, border (stroke), dan bisa mengexport-nya.
- Kita bisa mengubah ukuran shape pada bagian width dan height
- Ubah ukuran shape dengan width dan height dan berbeda, misal width 300 dan height 100
- Kita juga dapat mengganti warna pada bagian fill
- Ubah warna menjadi warna lain
- Kita juga dapat memberikan border atau stroke pada shape
- Kita juga dapat mengexport shape yang telah kita buat pada bagian export
Mengedit Object Text
Kita juga dapat mengedit object Text.
- Klik object Text
- Inspector akan berubah sesuai dengan object yang diklik
- Kita dapat mengedit object Text seperti mengatur width dan height, kemudian mengatur jenis font, style font, ukuran font, alignment, dll pada bagian Text
- Ubah Jenis Font ke Poppins, ukurannya menjadi 24, kemudian pilih bold
- Maka hasilnya object Text akan berubah
- Kita juga dapat memberikan warna, stroke, dan export object Text seperti yang kita lakukan di object Shape.
- Sebagai contoh saya mengubah warnanya menjadi ungu
- Hasilnya Text akan menjadi ungu
- Kita juga dapat memberikan stroke (border) pada object
- Kita juga dapat mengexport object Text sama seperti pada object Shape
Kita sudah selesai belajar menggunakan Figma untuk membuat object-object sederhana seperti Shape, Pencil, Text.
Kemudian kita juga sudah belajar mengenal bagian bagian yang terdapat pada file Figma.
Maka kita sudah dapat mengoperasikan Figma untuk membuat desain, wireframe, atau prototyping. Walaupun yang dibahas sebelumnya hanya dasar-dasarnya saja.
Membuat Wireframe Website
Kita sudah belajar membuat object sederhana menggunakan figma. Dasar penggunaan tersebut bisa kita gunakan untuk membuat wireframe atau prototyping pada suatu website.
Kita akan membuat wireframe website yang sederhana sebelum kita masuk ke tahapan coding. Hal ini akan membuat kita bekerja menjadi lebih baik dalam mengembangkan alur dan proses suatu website
- Buka figma
- Buat file baru dan beri nama Wireframe Website
- Selanjutnya buat frame yang digunakan untuk menampung object-object
- Pada bagian toolbar, klik Region Tools — Frame
- Lihat di bagian Right Sidebar (Inspector), lalu pilih frame yang akan digunakan. Karena pada tulisan ini kita ingin membuat wireframe web, maka pilih frame Desktop. Jika nanti kita ingin membuat wireframe yang lain seperti phone atau table, maka kita bisa memilih frame tersebut.
- Frame Desktop yang dipilih akan dibuat pada canvas
Kita akan membuat wireframe sebuah website. Kita harus mengenal terlebih dahulu bahwa sebuah website memilih layout yang berbeda-beda. Pada kasus ini kita akan menggunakan layout yang sederhana dan hanya terdiri dari 1 Kolom.
Umumya, layout sebuah website terdiri dari: Header, Nav, Main, Footer, Header:
- Header: Bagian ini biasanya berisi informasi awal dari sebuah website, biasanya diisi nama website, logo, dll
- Nav: Bagian ini berisi menu atau link navigasi suatu website
- Main: Bagian ini berisi konten utama di dalam website. Pada bagian main biasanya terdapat bagian-bagian kecil yang lain atau disebuah section.
- Footer: Bagian ini berisi informasi akhir dari sebuah website, biasanya diisi nama perusahaan, logo, link sosial media, alamat, email, dll
Membuat Header
Kita masuk ke tahapan pembuatan Header terlebih dahulu
- Buat sebuah Rectangle. Klik Shape tools — Rectangle
- Kemudian, buat rectangle di Frame. Rectangle ini digunakan untuk membuat header website
- Untuk lebarnya disesuaikan dengan lebar frame.
- Selanjutnya, biasanya pada bagian header terdapat logo dan nama website tersebut.
- Kita buat logo terlebih dahulu. Untuk membuat logo, kita bisa menggunakan shape Eclipse.
- Klik Shape Tools — Eclipse.
- Buat logo sederhana pada bagian Header
- Warna shape rectangle dan eclipse sama, maka kita dapat mengubah warna eclipse di bagian Right Sidebar (Inspector) untuk membedakan warna Header dan warna Logo
- Ubah warna Eclipse dengan warna yang lain atau gunakan warna abu abu yang berbeda
- Klik object logo, kemudian lihat di bagian Right Sidebar (Inspector), lalu pilih fill dan ganti warnanya.
- Maka hasilnya warna logo berubah
- Selanjutnya, kita membuat Teks untuk memberikan nama website (Nama Perusahaan, Yayasan, Startup, dll)
- Klik Text, kemudian tuliskan nama website pada bagian header
- Maka Text akan muncul di bagian Header
- Namun ukuran Text terlalu kecil, kita dapat mengubahnya di Right Sidebar (Inspector)
- Klik bject text (Nama Website), lalu lihat di bagian Right Sidebar (Inspector). Maka akan muncul inspector untuk object Text.
- Selanjutnya, kita ubah ukuran font dari Nama Website agar lebih besar. Di sini saya mengubah ukuran font menjadi 64.
- Kita juga dapat mengubah Jenis Font dan Style Font. Saya mengubah jenis font menjadi Poppins, dan style font menjadi Bold.
- Hasilnya nama website akan berubah.
- Silahkan disesuaikan posisi Logo dan Nama Website jika dirasa belum sesuai. Logo dan Nama Website bebas ditentukan posisinya di mana saja di dalam Header. Jika ada hal lain yang ingin ditambahkan di Header kita bisa tambahkan juga seperti deskripsi, no telfon, email, dll. Konten yang berada di dalam Header dapat disesuaikan dengan keinginan masing-masing.
Kita sudah selesai membuat bagian Header pada website.
Membuat Nav
Selanjutnya kita akan membuat bagian Nav. Bagian Nav biasa diisi menu atau link suatu website.
Suatu website biasanya terdapat menu atau link yang digunakan untuk navigasi ke halaman Lain. Kita dapat membuat menu atau link tersebut di bagian Nav.
- Buat Rectangle di bawah Header.
- Klik Shape Tools — Rectangle
- Untuk membedakan bagian Header dan Nav, kita akan mengganti warna Nav menjadi Warna lain. Atau kita bisa menggunakan warna abu abu lain.
- Ganti warna Rectangle Nav di bagian Right Sidebar.
- Klik Object Rectangle (Nav), kemudian ubah warna menjadi abu abu yang lain. Saya menggunakan warna #F5F5F5.
- Nav akan berubah menjadi warna abu-abu yang lain. Hal ini dilakukan untuk membedakan antara satu bagian dengan bagian yang lain
- Selanjutnya, kita akan menambahkan Text untuk membuat link pada bagian Nav
- Klik Text, kemudian tambahkan link navigasi. Saya membuat 4 Link Navigasi: Home, Profile, About, Contact.
- Untuk mengedit object teks (Link), klik object teks kemudian edit pada bagian Right Sidebar (Inspector).
- Silahkan disesuaikan dengan kebutuhan sendiri untuk jumlah linknya, kemudian ukuran, jenis, dan style font dari link, atau bahkan posisi dari menu atau linknya.
Kita sudah membuat bagian Nav yang biasanya digunakan untuk menampung navigasi atau link pada halaman website.
Membuat Main
Kita akan membuat konten utama di bagian Main.
Pada bagian Main, biasanya akan diisikan konten-konten utama. Pada bagian main juga biasanya terdiri dari beberapa bagian yang kontennya itu disesuaikan dengan kebutuhan website.
Sebagai contoh, pada wireframe kali ini. Bagian main akan terdapat 2 bagian lagi yaitu:
- Bagian Profil Perusahaan: Isinya Visi dan Misi
- Bagian Program: Isinya program-program perusahaan.
Kita mulai memuat bagian Main:
- Buat Rectangle di bawah bagian Nav
- Sebelum dilanjut, kita coba ubah tinggi dari frame.
- Klik Frame (Tulisan Desktop -1)
- Kemudian gulir ke bagian bawah, lalu tarik dan ubah tingginya
- Tinggi Frame akan
- Kembali ke Bagian Main. Selanjutnya kita akan menambahkan bagian Profil di dalam Main.
- Tambahkan Teks Visi di dalam Bagian Main.
- Selanjutnya, di bawahnya kita tuliskan Visi dari perusahaan tersebut.
- Untuk konten, penempatan, ukuran teks silahkan disesuaikan dengan kebutuhan sendiri.
- Selanjutnya kita akan menambahkan misi dari perusahaan tersebut.
- Tambahkan Text Misi, lalu tambahkan misi dari perusahaan tersebut. Untuk lebih cepat dan konsisten, kita dapat mengcopy teks yang sudah dibuat di atas.
- Kita sudah membuat bagian Pertama di dalam main yaitu Visi dan Misi.
- Selanjutnya kita akan membuat bagian kedua di dalam main yaitu bagian program.
- Kita tidak perlu menambahkan Rectangle baru untuk membuat bagian program. Kita bisa langsung menuliskannnya di dalam main. Bagian bagian tersebut dipisahkan hanya untuk memudahkan kita nanti ketika ingin mengubah design ke dalam kodingan (HTML, CSS, JS).
- Pada bagian Rectangle Main, ubah tingginya.
- Selanjutnya tambahkan Teks Program di tengah (Kita bisa mengcopy dari judul di atasnya).
- Kemudian kita akan membuat program dalam bentuk Card.
- Buat kotak menggunakan Rectangle. Kemudian kita ganti warnanya. Kotak ini menandakan nantinya akan ditampilkan sebagai image
- Kemudian kita tuliskan nama program di bawah card.
- Kemudian buat 3 buah card seperti card tersebut.
- Rapihkan 3 buah card tersebut, caranya dengan blok rectangle dan teksnya satu persatu menggunakan shift + click, lalu rapihkan ke tengah.
- Hasil bagian program seperti ini
- Kita dapat menambahkan bagian bagian lain di dalam main. Silahkan disesuaikan dengan kebutuhannya masing-masing.
- Hasil keselurahan sampai pada bagian main
- Sebelum dilanjutkan ke pembuatan bagian footer. Saya ingin mengganti warna gambar sesuai dengan warna logo.
- Kemudian untuk latar belakang program, saya ingin menambahkan rectangle baru kemudian diberi warna yang berbeda. Hal ini bertujuan untuk membedakan satu bagian dengan bagian yg lainnya di dalam main.
- Hasilnya kurang lebih seperti berikut
Kita sudah membuat bagian main yang didalamnya terdapat dua section atau bagian yaitu profil dan program.
Membuat Footer
Bagian akhir dari halaman website biasanya disebut dengan Footer.
Bagian footer berisi informasi mengenai nama website, logo, daftar link (main link), email, no hp, alamat.
Kita akan membuat footer sederhana yang berisi nama website, email, dan alamat perusahaan.
- Buat rectangle di bawah program
- Beri warna yang sama dengan warna bagian profil
- Tambahkan Teks untuk nama perusahaan di bagian footer
- Kemudian saya menambahkan informasi email dan kontak di footer
- Tambahkan info lain jika ada yang ingin ditambahkan. Namun jangan lupa disesuaikan tata letaknya agar terlihat rapi
Kita sudah selesai membuat Wireframe Website yang sederhana.
Hal penting yang harus digarisbawahi adalah proses pembuatan Wireframe tidak serta merta langsung dibuatkan seperti itu. Namun ada proses lain yang harus dilalui dimana proses tersebut bisa dipelajari dalam dunia UI/UX. Namun untuk tujuan edukasi, kita bisa membuat wireframe sederhana sambil melihat inspirasi website lain dan mengaplikasikannya ke website kita.
Berikut adalah hasil akhir dari wireframe yang sudah dibuat. Beberapa bagian sudah saya sesuaikan agar terlihat lebih rapi
Tulisan yang sangat panjang, namun sebenarnya yang dibahas masih sangat sedikit dan dasar. Jika ingin mempelajari lebih lanjut tentang pembuatan sketch, wireframe, prototype maka bisa dipelajari dalam ilmu UI/UX.