Membuat UI design sederhana menggunakan Figma

    

Saat ini UI/UX adalah salah satu bidang pekerjaan yang cukup diminati terutama untuk generasi milenial. Jika temen-temen memiliki keinginan menjadi seorang UI/UX designer tentu harus ada yang perlu disiapkan salah satunya yaitu belajar membuat desain UI/UX website atau aplikasi. Nah pada kesempatan kali ini Kami akan memberikan panduan figma desain website untuk pemula, yang nantinya desain website tersebut akan kami buat artikelnya dengan judul cara membuat website dengan desain Figma. Semoga tutorial figma kali bisa berguna untuk temen-temen. Selamat membaca

    

Pengertian Figma

Figma adalah salah satu design tool berbasis cloud gratis yang bisa dijalankan di browser (web based) atau aplikasi desktop di OS Windows dan MAC OS yang mirip dengan Sketch atau Adobe XD untuk fungsionalitas dan fiturnya, namun memiliki perbedaan besar yang membuat Figma lebih baik yaitu fitur untuk kolaborasi tim. Figma memberi Anda semua alat yang Anda butuhkan untuk tahap desain proyek, termasuk alat vektor yang mampu ilustrasi sepenuhnya, serta kemampuan prototyping, dan pembuatan kode untuk hand-off.

Singkatnya Figma yaitu aplikasi desain UI dan UX berbasis browser, dengan desain yang sangat baik, prototyping, dan alat pembuatan kode. Saat ini (bisa dibilang) alat desain antarmuka terkemuka di industri, dengan fitur-fitur canggih yang mendukung tim yang bekerja pada setiap fase proses desain.

Kelebihan Figma

• Keunggulan dari Figma yang pertama yaitu sebuah simpul pada vektor dapat memiliki banyak segmen yang melekat padanya (lebih dari sekadar dua standar). Bentuk yang lebih kompleks yang dapat Anda buat dengan ini disebut “jaringan vektor”.
• Figma memungkinkan Anda untuk dengan cepat mengimpor banyak gambar sekaligus, menempatkannya tepat di tempat yang Anda inginkan.
• Ketika Anda memindahkan objek di sekitar kanvas dalam Figma Anda akan melihat tinggi dan lebarnya tercermin pada penggaris.
• Salin kode SVG langsung dari objek dalam Figma, dan sebaliknya, Anda dapat menyalin kode SVG dari editor kode dan menempelkannya sebagai grafik ke kanvas Figma.
• Figma memungkinkan Anda membangun perpustakaan komponen yang dapat digunakan kembali yang dapat diakses oleh seluruh tim.
• Untuk membuat prototipe, Anda dapat membuat koneksi dan hotspot pada desain Anda sehingga Anda dapat mensimulasikan bagaimana pengguna akan mengalir melalui antarmuka itu. Untuk fase pengkodean Figma dapat menghasilkan kode SVG, CSS, dan kode iOS dan Android.

Panduan Figma Desain Website

Nah pada bagian ini Saya akan menjelaskan tahap-tahap membuat desain web sederhana menggunakan Figma. Pada akhirnya nanti desain website ini akan coba dibuat untuk website aslinya di artikel selanjutnya. Okee langsung saja tutorial figma desain website.

Buka Aplikasi Figma

Pastikan Anda sudah memiliki akun dan aplikasi Figma yaa. Jika Anda belum memiliki aplikasi figma, Anda bisa masuk ke Figma atau download aplikasi Figma versi desktop nya. Lalu Anda tinggal daftar agar bisa menggunakannya.