Belajar Figma Dengan Tutorial designnya

Pengertian untuk Belajar Figma

Belajar Figma

Belajar 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. Belajar Figma

Kelebihan Figma Belajar

• 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”. Belajar Figma
  
  

• 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. Belajar Figma
  
  
  

• 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. Belajar Figma
  
  
  
  

• 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.

Belajar Membuat Desain dengan Figma

Nah, kita sudah berkenalan dengan Figma. Kemudian, bagaimana cara membuat desain UI/UX dengan Figma? Mari siapkan catatan atau laptop yang Anda hendak pakai untuk mendesain, karena langsung saja cara membuat desain dengan Figma adalah sebagai berikut:

1. Buka browser > ketik URL www.figma.com > enter.

2. Saat tiba di laman Figma, klik login jika sudah punya akun. Kalau belum punya akun, klik menu daftar / registrasi. Begitu selesai, mari langsung mulai mengedit. (Tutorial kali ini akan mencoba untuk membuat UI/UX aplikasi smartphone).

3. Scroll ke pojok kiri atas > klik icon ‘frame’ > buat frame baru.

4. Anda akan bertemu dengan banyak tipe frame layar gadget, smartphone, tablet, hingga laptop dan PC dengan beragam ukuran. Anda bisa memilih tipe layar gadget mana yang ingin didesain. Cukup klik tipe layar yang dikehendaki.

5. Di bagian kiri atas > klik icon ‘text’.

6. Klik di sembarang posisi pada frame putih polos untuk mulai mengetik / menambahkan teks.

7. Masukkan teks sesuai keinginan. Anda bisa mengulangi langkah yang sama untuk membuat sebanyak mungkin tipe tulisan, seperti judul, sub judul, deskripsi, dan lain seterusnya. Untuk pengaturan warna, jenis font dan ukuran font, semua pilihannya sudah tersedia di bar bagian atas frame.

8. Anda bisa memasukkan gambar ke dalam desain: cari gambar yang ingin diinput dari web lain pada Google > klik kanan pada gambar > klik ‘copy image’.

9. Kembali ke frame > klik ‘paste’ atau memakai kode kombinasi CTRL + V.

10. Gambar bisa disesuaikan kembali sesuka hati, seperti diberikan teks tambahan, disesuaikan dengan shape lain (pakai fitur ‘use as mask’), menambahkan avatar dengan menu ‘insert’, dan lain sebagainya.

11. Untuk menambahkan fitur lain sebagai tombol di sebelah gambar, mula-mula buat bentuk dasar tombol dengan menu ‘shape’ > posisikan icon-icon pembentuk tombol sesuai keinginan. Anda bebas menambahkan teks pada tombol, mengganti warna dan ukuran, atau menempelkan gambar lain di atas tombol agar lebih menarik.

12. Jika sudah selesai, klik ‘use as mask’.

13. Anda bebas mengulangi langkah-langkah di atas untuk membuat layout sesuai keinginan dan kebutuhan. Jika sudah selesai, klik ‘save’ atau ‘export’. Selesai! Mudah bukan membuat desain UI/UX dengan Figma?Demikianlah pembahasan kali ini tentang desain web dengan Figma. Semoga artikel kali mampu menambah wawasan Anda perihal membuat desain UI/UX, ya!