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.
Table of Contents
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!
Rekomendasi:
Cara Download Autocad di Laptop Gratis Beserta Instalasinya Palingit.com - Cara download Autocad di laptop sangat bervariasi, tergantung kepada jenis dan seri tahun Autocad yang kamu gunakan termasuk juga perangkat laptop sehingga dapat mengoperasikannya dengan mudah. Autocad adalah…
Tips Cara Cek Nomor Smartfren dengan Mudah dan Cepat palingit.com - Cara cek nomor smartfren - Cek nomor di HP adalah salah satu hal yang penting dilakukan oleh pengguna seluler. Saat membeli kartu SIM baru, Anda akan diberikan nomor…
Website Matematika untuk Memudahkan Pengerjaan Soal Palingit.com - Website matematika sangat memudahkan kita dalam pengerjaan soal-soal matematika yang berusaha kita pecahkan. Penggunaan teknologi telah mengubah banyak aspek dalam kehidupan kita, termasuk cara kita belajar dan mengajar…
12 Daftar Aplikasi Pembersih Android Terbaik dan Ringan Palingit.com - Pemeliharaan Android merupakan salah satu langkah yang harus kamu lakukan untuk menjaga kualitas ponsel. Download dan jalankan aplikasi pembersih Android terbaik dan ringan untuk menyingkirkan history, cache dan…
Script HTML Bucin 2023 Terbaru Palingit.com - Script HTML Bucin - Merupakan sekumpulan kata-kata untuk mengungkapkan perasaan maupun hanya sekedar memberikan hiburan yang disajikan dalam bentuk HTML. Kumpulan Script HTML Bucin Terbaru Jika Benar…
Pengertian Hardware : Fungsi, Jenis dan Contoh Hardware palingit.com - Pengertian Hardware - Hardware atau yang dikenal juga dengan perangkat keras merupakan komponen fisik yang terdiri dari berbagai jenis komponen elektronik yang membentuk sistem komputer. Hardware meliputi semua…
Script HTML Bucin Buat Yang Sedang Sakit beserta Tutorial… Palingit.com - Kali ini saya akan membagikan sebuah Script HTML Bucin versi buat yang sedang sakit. Berikut ini tautan yang bisa langsung kalian salin dan lihat hasilnya: Demo Script Atau…
Cara Upgrade Processor Laptop Dengan Mudah dan Aman Palingit.com - Cara upgrade processor laptop sebenarnya sangat mudah, akan tetapi perlu melakukan penyesuaian untuk menghubungkan beberapa komponen sehingga dapat merakit dan juga mempermudah proses upgrade. Mungkin ada beberapa yang…
8 Aplikasi Novel Gratis Tanpa Beli Koin dan Offline… Palingit.com - Baca novel kini bisa kamu lakukan melalui ponsel pintar. Terdapat 8 aplikasi novel gratis tanpa beli koin dan offline yang patut kamu coba lho. Asyiknya lagi, kamu tidak…
Cara Melihat Password Wifi di HP yang Jarang Diketahui Palingit.com - Bagi sebagian orang, mengetahui cara melihat password Wifi di HP merupakan hal yang penting. Apalagi kalau HP yang dipergunakan merupakan keluaran terbaru, tentunya butuh penyesuaian untuk menggunakan fiturnya.…
Cara Menonaktifkan Keyboard Laptop dengan Mudah Palingit.com - Cara menonaktifkan keyboard laptop sangatlah diperlukan oleh pengguna dalam situasi dan keperluan tertentu. Pada beberapa situasi, pengguna laptop mungkin perlu menonaktifkan keyboardnya untuk alasan tertentu. Mungkin Anda ingin…
Cara Download Foto Profil Instagram dengan Mudah Palingit.com - Cara download foto profil instagram sangat berguna jika kita ingin mengunduh foto profil instagram yang menarik. Instagram merupakan salah satu platform media sosial yang populer di kalangan pengguna…
3 Cara Menghentikan Aplikasi Berjalan di Latar Belakang HP… Palingit.com - Menghentikan Aplikasi Berjalan Di Latar Belakang - Sebagian besar smartphone android sudah dibekali spesifikasi yang mumpuni untuk menjalankan aplikasi, tidak lain ialah RAM di atas 2GB. Akan tetapi,…
Cara Mengatasi Memori Internal HP Penuh, 7 Trik Ampuh! Palingit.com - Memori Internal HP Penuh - Setiap pengguna HP tentu memiliki kebutuhan akan kapasitas memori internalnya masing-masing. Ada yang hanya butuh sedikit untuk menyimpan dokumen, ada juga yang membutuhkan…
Gelombang Elektromagnetik: Definisi, Sifat, Jenis, Bahaya… Palingit.com - Apa itu gelombang elektromagnetik? Nah, di artikel kali ini kalian akan memahami materi gelombang elektromagnetik mulai dari definisi, apa saja sifat dan jenisnya, bahaya hingga manfaatnya. Definisi Gelombang…
Cara Mudah Mematikan HP Baterai Tanam Macet atau Hang [100%… Palingit.com - Mematikan HP Baterai Tanam - HP lagi nyaman dipakai tiba-tiba hang, tentu sangat menjengkelkan sekaligus panic mode on! Terlebih jika sedang ngerjain projek yang belum disimpan, sakit rasanya.…
5 Fitur Baru Android 12, Menjadikan Personalisasi Lebih… Palingit.com - Fitur Baru Android 12 - Android merupakan sistem operasi yang paling banyak dikenal di belahan dunia manapun, termasuk Tanah Air Indonesia. Google secara resmi baru saja memperkenalkan versi…
10 Rekomendasi Laptop Asus Terbaru Kelas Menengah ke Atas Palingit.com - Asus merupakan salah satu merek laptop yang populer, sehingga tentu saja punya banyak peminat. Nyatanya, Asus menawarkan banyak sekali tipe dan jenis laptop sehingga pengguna dapat memilih sesuai…
HP Android Murah namun Mumpuni untuk Kebutuhan Sehari-hari Palingit.com - Hp Android murah namun mumpuni - Di zaman modern seperti sekarang, HP telah seperti menjadi kebutuhan utama. Oleh karena itu, sekarang telah tersedia berbagai macam merek HP mulai…
Tutorial Membuat Website Sederhana untuk Pemula Palingit.com - Memiliki sebuah website telah menjadi kebutuhan yang tidak bisa dihindari di era digital saat ini, terutama bagi para pelaku usaha atau pemilik bisnis. Untuk pemula yang ingin membuat…
Fungsi NFC Pada Handphone yang Harus Anda Tahu Palingit.com - NFC atau Near Field Communication merupakan salah satu teknologi masa kini yang banyak dikembangkan pada ponsel pintar Anda. Namun, masih banyak orang awam yang belum tahu fungsi NFC…
Ipad Terbaru 2023 Ini Sangat Layak Dimiliki Palingit.com - iPad terbaru menjadi gadget yang sangat menarik untuk dimiliki guna menyokong kebutuhan kita dalam berbagai hal. Apple merupakan salah satu perusahaan penghasil produk elektronik terbesar di dunia. Mereka…
Manfaat Webcam dan Cara Menyambungkan Webcam ke Laptop Palingit.com - Work from home pernah menjadi opsi perusahaan saat pandemi Covid-19 melumpuhkan dunia. Pasca pandemi, banyak orang ketergantungan dengan laptop dan belajar untuk menguasai cara menyambungkan webcam ke laptop.…
7 Cara Mengecek Kesehatan Baterai Oppo Palingit.com - Siapa yang pengguna HP Android Oppo sejak lama? Eits, jangan asal pakai-cas-pakai-cas, ya. Kamu perlu mengecek kesehatan baterai (battery health) secara berkala untuk tahu performa HP-mu. Butuh tutorial…
Hati-Hati! 5 Kebiasaan Bikin Baterai HP Cepat Rusak Palingit.com - Kebiasaan Baterai HP Rusak - Tak jarang dipungkiri kalau bagian HP yang sering mengalami kerusakan ialah baterai. Padahal untuk menggantinya juga cukup menguras kantong para pengguna, karenanya mereka…
Berikut Daftar HP Yang di Produksi Oleh Google Terbaru palingit.com - HP Google - Google meruapakan salah satu perusahan teknologi yang besar dan menunjang berbagai sektor. Mulai dari mesi pencari, keamanan, email, penyimpanan dan lain-lain. Yang telah di kembangakan…
Sering Susah Sinyal? Ini Cara Mengatasi HP Susah Sinyal… Palingit.com - HP Susah Sinyal - Seluruh provider di Indonesia sudah tentu akan memberikan fasilitas layanan terbaik untuk para konsumennya, tidak lain di antaranya ialah kualitas jaringan stabil. Namun sayangnya,…
Aplikasi Presentasi Paling Bagus dan Keren, Wajib Punya! Palingit.com - Aplikasi presentasi sangat diperlukan untuk kita dalam urusan pekerjaan ataupun pendidikan demi membuat presentasi yang menarik. Dalam era digital saat ini, aplikasi presentasi telah menjadi alat yang tak…
Simak! Berikut Cara Menghilangkan Virus di HP dengan Gampang Palingit.com - Di era digital sekarang ini, perangkat digital, termasuk HP, mudah terserang virus atau malware. Ini sebabnya, kamu perlu tahu cara menghilangkan virus di HP. Menjadi bagian penting dari…
Cara Menyembunyikan Status Online di Whatsapp Palingit.com - Cara menyembunyikan status online di whatsapp dengan mudah dan aman dengan fitur resmi ini sangat mudah diterapkan. WhatsApp adalah aplikasi yang paling populer digunakan oleh masyarakat Indonesia untuk…