Media Pengembangan Web & App | by APPKEY

Desain Designer tools Tutorial Belajar Figma: UI Tools Terbaik

Tutorial Belajar Figma: UI Tools Terbaik

-

Figma adalah salah satu software UI (user interface) terbaik dan sering dipakai oleh para desainer UI/UX. Figma dapat digunakan untuk membuat desain website ataupun aplikasi sehingga menjadi lebih menarik, eye catching, dan interaktif saat digunakan oleh user. Jika Anda juga sedang mencari cara terbaik mendesain web, maka Anda beruntung karena sudah menemukan jawabannya di sini!

Artikel edisi kali ini akan membahas secara lengkap seputar desain web dengan Figma. Yuk tanpa berlama-lama lagi, mari kita simak cara desain web dengan Figma berikut ini. Selamat membaca!

Mengenal Figma, Aplikasi Editing UI/UX Terbaik

figma

Nama Figma tentunya sudah tidak asing lagi di telinga Anda, khususnya jika Anda sudah pernah berkecimpung dalam dunia front end development atau mendesain UI/UX dari web dan aplikasi. Figma adalah aplikasi yang sangat direkomendasikan untuk melancarkan kerja kolaboratif dalam tim developer. Dengan Figma, Anda bisa mengerjakan project kolaborasi kapan saja dimana saja.

Figma adalah software desain dengan basis cloud. Sebagai catatan, Figma adalah software web yang bisa diakses di browser, jadi Anda tidak perlu repot mendownload dan menginstal software Figma di komputer untuk bisa menggunakannya. Agar bisa memakai Figma, Anda hanya cukup mengakses www.figma.com dari browser saja. Pun Figma adalah software desain yang bisa digunakan oleh semua OS hardware, mulai dari Windows, Linux dan Mac OS.

Artikel Terkait  Flat Desain Dan 10 Tips Untuk Membuat Desain Yang Menarik

Fungsi utama Figma adalah untuk membuat prototype desain dari aneka project dan produk digital. Berbeda dengan aplikasi editing UI/UX lain, Figma adalah editor vektor dan grafis yang bisa digunakan secara online dan offline. Banyak developer memakai Figma untuk mengembangkan desain pada aplikasi berbasis Windows, Mac OS, Android dan iOS. Namun untuk aplikasi Android dan iOS, Anda mungkin akan membutuhkan bantuan software bernama Figma Mirror.

Untuk Anda yang baru berkenalan dengan Figma, Anda wajib tahu beberapa fitur utama dari software desain ini. Dengan mengenali fitur-fitur Figma, maka Anda akan lebih mudah dalam berpraktek membuat desain UI/UX. Beberapa fitur unggulan khas Figma adalah:

  • Smart selection (seleksi cerdas) untuk mengatur dan mengorganisasikan jarak setiap vektor.
  • Pena modern untuk menggambar desain sendiri dan sudah dilengkapi dengan busur-busur instant.
  • Font open type.
  • Fitur pengecek grab code snippets dan file desain.
  • Plugin automatic task untuk mempermudah tugas dan elemen perulangan guna mempercepat kinerja.
  • Drag dan drop perpustakaan / library desain.
  • Unlimited akses audiens sehingga siapa saja bisa terlibat dalam sebuah project dan mengedit bersama-sama.
  • Embedded comment (komen tersemat) untuk menyematkan pesan penting terkait desain.
  • Smart animation untuk menautkan transisi dengan objek.
  • Eksportir dengan sistem tautan langsung dan PDF, serta masih banyak lagi.

Membuat Desain dengan Figma

desainapp1

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:

Artikel Terkait  UI UX Adalah Wajah Situs | Bagaimana Membuatnya Menarik?

  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!

Sebagai tambahan, saat membuat sebuah desain user interface, ada beberapa hal yang harus Anda ingat dan pahami baik-baik. Pertama, buatlah desain user interface web atau aplikasi yang simpel dan juga sederhana.

Artikel Terkait  Telah Hadir : Layanan yang Mudah dalam Mendesain Kaos secara Online!

Tanamkan dalam diri Anda bahwa para pengguna aplikasi atau website Anda berasal dari beragam kalangan, tidak hanya dari kalangan yang melek IT. Oleh sebab itu, tampilan antar muka dari web dan aplikasi Anda haruslah simpel dan mudah dipahami. Jadi dalam sekali pandang pun, user (pengguna) dapat langsung memperoleh gambaran bagaimana cara memakai fitur-fitur yang ada di dalam aplikasi atau website Anda.

Kedua, buat desain yang dinamis dan interaktif. Tujuan dari kehadiran tata letak user interface adalah untuk menghubungkan user (pengguna) dengan konten, isi, dan juga fungsi dari website dan aplikasi buatan Anda. Pastikan bahwa semua tampilan elemen di user interface yang Anda buat memiliki fungsinya, ya! Jangan sampai Anda menyediakan sebuah tombol namun tombol tersebut tidak dapat digunakan atau tidak bisa memberikan respon saat diklik oleh user.

Sesungguhnya tidak ada aturan yang kaku dalam urusan mendesain aplikasi ataupun website. Anda selalu bebas untuk membuat desain sesuai keinginan dan kebutuhan – entah membuat tampilan UI/UX yang profesional, elegan, atau simpel dan ceria. Jika Anda masih kekurangan referensi desain, kami sarankan untuk mempelajari desain dari aplikasi dan website yang menurut Anda sendiri baik serta nyaman digunakan.

Jangan lupa simak artikel lain seputar dunia IT hanya dari website Appkey.id. Sampai jumpa lagi!


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang Website, Aplikasi, Desain, Video dan API langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Blog Post Ranking 10

Metadata Adalah? Fungsi dan Jenis-Jenis Metadata

Pernah mendengar istilah metadata? Mungkin, kita sering mendengar istilah metadata. Tetapi, banyak dari kita yang belum tahu arti dari metadata...

Proses Komunikasi: Encoding dan Decoding

Jika kita dapat melihat percakapan antar komputer, mungkin akan terlihat seperti ini: "010110111011101011010010110". Bahasa ini disebut dengan biner, encoding...

Pengertian Internet & Dampak Positif dan Negatif Internet

Internet mungkin bukan sesuatu yang asing lagi, sebab semua kalangan pasti tahu apa itu internet. Hanya saja jika ditanya...

Looping Adalah Algoritma Perulangan: Berikut Contohnya

Jika anda sudah mendalami atau sedang mendalami dunia pemrograman terdapat sebuah konsep yang dapat memudahkan anda dalam menyusun struktur...

Mau Jadi Front-end Developer? Kamu Perlu Menguasai 10 Skill Berikut Ini!

Secara umum untuk membuat sebuah website impian Anda menjadi nyata, Anda hanya perlu datang ke web developer dan menyampaikan...

Mockup adalah: Membuat Mockup Design untuk Website

Wireframes adalah kerangka. Prototipe menunjukkan perilaku. Mockup adalah kulitnya. Dalam artikel ini, kami akan menjelaskan mengapa mockup sama pentingnya dengan...

Jasa Pembuatan Website Untuk Toko Online

Perusahaan yang menyediakan Jasa pembuatan website untuk toko online bisa kita temukan dengan mudah di internet. Masing-masing dari perusahaan...

8 Contoh Search Engine Terbaik yang Paling Banyak Digunakan di Indonesia

Dulu jika ingin mencari informasi tentang apapun biasanya kita akan menanyakan kepada seseorang yang lebih mengetahui informasi, atau datang...

Layout adalah : 4 Prinsip Dasar Desain Layout

Desain layout adalah salah satu bagian dari seni kita semua tahu,  untuk bisa menampilkan seni dengan baik, kita harus...

Apa Itu Cache Memory? Pengertian dan Fungsinya

Apa itu cache memory? Orang yang setiap hari berinteraksi dengan internet, istilah cache tentu saja bukan lagi istilah yang...

Jasa Web

Bisnis online

Pengembangan

Murah

Profesional

Toko online

SEO

Pemasaran

Tips

Jasa Aplikasi

Pembuatan Aplikasi

Bisnis online

Pemasaran

Istilah IT

TIPS

TOOLS

JASA

HARGA

Jasa Marketing

Istilah SEO

Teknik SEO

Tips Marketing

Paling Sering dibaca
Mungkin Anda Menyukainya