Palingit.com – Figma adalah sebuah alat desain grafis yang cukup populer untuk kebutuhan desain UI/UX dan prototyping. Nah, kalau kamu butuh tutorial Figma ini, kamu membaca artikel yang tepat. Di artikel ini, kami akan membahas secara rinci bagaimana menggunakan untuk membuat desain tampilan antarmuka pengguna yang menarik dan fungsional.
Bagi kamu yang ingin tahu cara kerjanya, dan membutuhkan informasi terkait tutorial figma web maupun Android, kami akan coba membahasnya secara detail di sini. Jadi, pastikan menyimaknya hingga selesai.
Tutorial Figma Android & Web untuk Pemula
Jika kamu seorang pemula, dan ingin belajar Figma gratis, ini langkah-langkah yang bisa kamu ikuti.
1. Registrasi Akun
Tutorial Figma dasar yang paling utama yaitu belajar cara menggunakan tools. Pertama-tama, kamu buka terlebih dahulu situs www.figma.com.
Aplikasi berbasis web ini bisa kamu gunakan di sistem operasi Windows, Linux maupun Mac. Untuk mempercepat proses registrasi, kamu bisa langsung menggunakan akun Gmail yang masih aktif.
2. Menggunakan Tools
Setelah membuat akun, kini saatnya belajar menggunakan tools yang tersedia di Figma:
- Setelah akun milikmu teregistrasi, silakan kamu masuk ke situs terkait.
- Setelah itu, kamu akan membuka sebuah halaman kerja yang berisi berbagi tool.
- Semua tools yang kamu butuhkan ada di bagian atas. Untuk memulainya, silakan kamu klik icon “Frame” yang berada di pojok kiri atas.
- Setelah itu, silakan kamu pilih tipe desain apa yang kamu inginkan.
- Pada icon “Frame” tersebut ada banyak pilih tipe desain. Kamu bisa memilih untuk membuat desain Mobile App seperti iPhone, Android, Google Pixel, hingga website.
3. Membuat Desain Wireframe
Tutorial yang pertama adalah membuat desain wireframe melalui Figma. Desain ini tergolong penting di dalam sebuah struktur elemen antarmuka pengguna.
Pembuatan desain ini merupakan langkah pertama dalam desain antarmuka pengguna dan menjadi kerangka dasar yang menentukan tata letak dan struktur elemen.
Dalam Figma, kamu dapat membuat wireframe dengan menggunakan rectangle tool, line tool, dan text tool. Buatlah elemen-elemen penting yang sudah tersusun sebagai berikut:
- Proses pembuatan header
- Membuat bagian footer
- Pembuatan sidebar
- Konten utama
4. Membuat Elemen UI Dasar
Figma juga bisa kamu gunakan untuk membuat elemen UI dasar. Proses ini bisa kamu lakukan jika wireframe yang sudah kami bahas sebelumnya selesai kamu kerjakan.
Setelah Wireframe selesai kamu buat, selanjutnya buatlah berbagai elemen UI. Contoh elemen yang harus kamu buat seperti tombol, form, dan icon.
Saat ini, aplikasi Figma menyediakan banyak elemen dasar. Kamu bisa menggunakan semua elemen tersebut secara mudah. Kamu juga dapat mengedit warna, ukuran, dan jenis huruf sesuai kebutuhan desain.
5. Membuat Desain Visual
Desain yang menawan akan membuat tampilan aplikasi maupun website yang kamu miliki menjadi lebih menarik. Maka langkah selanjutnya buat visual atau tampilannya menjadi lebih menarik.
Berikut adalah langkah-langkah membuat desain di aplikasi tersebut:
- Pilih menu “Frame”, kemudian sesuaikan Frame dengan kebutuhan, baik itu untuk aplikasi Android, iPhone, maupun website.
- Gunakan menu “Shape Tools” untuk membuat icon. Beberapa fitur pada menu tersebut mulai dari Rectangle, Line, Polygon, Star dan lain-lain.
- Untuk memasukkan warna, silahkan kamu silahkan kamu arahkan kursor mouse ke bagian kanan. Ada banyak pilihan warna yang bisa kamu gunakan.
- Silakan kamu kreasikan sendiri desainnya sesuai dengan imajinasi dan keahlian kamu dengan menggunakan “Shape Tools”.
6. Menggunakan Komponen
Komponen adalah fitur pada aplikasi Figma yang memungkinkan kamu membuat elemen UI yang dapat digunakan kembali. Bagaimana cara-caranya? Berikut penjelasannya.
- Gunakan menu “Shape Tools” untuk membuat komponen desain aplikasi maupun website.
- Upload gambar sesuai dengan keperluan melalui cara copy paste, maupun drag & drop.
- Gunakan menu “Text” yang letaknya berada satu kolom dengan “Shape Tools” di bagian atas. Fungsinya yaitu untuk membuat menu bar pada aplikasi maupun website.
7. Membuat Prototipe Interaktif
Setelah desain visual selesai, langkah selanjutnya yaitu membuat prototipe interaktif untuk menunjukkan bagaimana desain akan berfungsi di dunia nyata.
Aplikasi Figma menyediakan fitur untuk membuat prototipe interaktif dengan mudah. Kamu dapat menambahkan tautan antara halaman dan membuat animasi untuk membuat desain lebih menarik.
8. Tutorial Berbagi Desain dengan Tim
Jika kamu membangun sebuah aplikasi atau website untuk kebutuhan company¸ atau kelompok, tentunya wajib untuk melakukan sharing. Aplikasi untuk membuat desain UI/UX ini juga sudah memiliki fitur berbagai dengan tim.
Berikut adalah cara-cara membagikan pekerjaan kamu di Figma dengan orang lain.
- Pastikan kamu sudah membuat desainnya terlebih dahulu sebelum dibagikan ke tim atau klien.
- Setelah desainnya selesai, kamu arahkan kursor mouse ke bagian kanan atas. Setelah itu klik menu “Share” yang berwarna biru.
- Setelah kamu klik menu “Share”, maka akan muncul kolom berbagi akun Gmail. Pilih salah satu atau beberapa akun untuk kamu masukkan ke dalam kolom tersebut.
- Setelah memasukkan akun Gmail yang akan kamu bagikan, silakan klik fitur berbagi, maka akun Gmail yang kamu masukkan bisa mengakses pekerjaanmu.
Tutorial Membuat Desain Web Menarik di Figma
Jika kamu ingin menggunakan Figma untuk desain web, kami punya beberapa tips yang bisa membantu mempermudah kamu membuat desain yang menarik.
Berikut sudah kami rangkum tutorial atau cara-caranya di bawah ini lengkap dengan gambarnya. Namun, gambar yang kami gunakan bersifat contoh sederhana sebagai gambaran bagian-bagian yang harus kamu buat.
1. Membuat Frame
Pertama-tama, kamu buat terlebih dahulu frame. Untuk membuatnya, pilih menu “Frame” khusus untuk desktop.
Sesuaikan ukuran frame. Fitur desktop bisa kamu temukan di bawah pilihan fitur-fitur ukuran desain untuk Android maupun iPhone.
2. Menambahkan Gambar
Sesudah kamu memilih frame sesuai dengan ukuran desain web, kamu bisa langsung membuat desain. Gunakan gambar yang cocok dan juga pas.
Pilih gambar yang bisa menutupi bagian kanan dan juga bagian kiri. Dengan begitu, ukurannya bisa sesuai.
3. Buat Header
Setelah dua langkah di atas selesai, silahkan kamu buat header. Fungsi dari header yaitu untuk kamu gunakan sebagai tempat menu pada website yang kamu buat.
Pada bagian header, kamu bisa menambahkan menu-menu yang digunakan sebagai navigasi. Contohnya seperti menu About Us, Produk, Artikel, dan lainnya.
4. Membuat Konten Website
Setelah selesai, kamu bisa mengisi konten-kontennya. Adapun jenis konten bisa kamu sesuaikan dengan kebutuhan. Contohnya seperti teks berupa artikel, gambar, hingga icon yang sesuai dengan tema website.
5. Membuat Bagian Footer
Bagian terakhir yang harus kamu buat desainnya yaitu footer. Bagian ini berada di bagian paling bawah. Fungsinya adalah untuk memberikan space untuk informasi penting seperti kontak yang bisa dihubungi oleh konsumen atau klien kamu.
Kesimpulan
Figma merupakan sebuah aplikasi berbasis website yang bisa kamu gunakan untuk membuat desain UI/UX. Ada dua pilihan paket, yaitu gratis dan berbayar. Untuk yang menggunakannya sebagai aplikasi profesional, kamu bisa menggunakan fitur berbayar karena punya banyak fitur menarik untuk dieksplorasi.
Demikian informasi seputar tutorial Figma untuk pemula untuk membuat desain UI/UX website maupun aplikasi Mobile. Selamat mencoba!