Membuat UI UX Design di Figma

    Hari ini Saya akan memberikan Tutorial singkat bagaimana caranya membuat UI/UX Design di salah satu aplikasi Berbasis Website yaitu FIGMA. Menurut saya Pribadi figma merupakan aplikasi yang sangat mudah dijalankan dan Efektif untuk para UI UX Designer. Aplikasi ini juga GRATIS dan tidak memerlukan Biaya apapun.
  1. Buka browser yang ada di device anda lalu ketik URL www.figma.com 
  2. Saat tiba di laman Figma, klik login jika sudah punya akun. Kalau belum punya akun, klik menu daftar / registrasi. Begitu selesai, kita busa langsung mulai mengedit. 
  3. Scroll ke pojok kiri atas > klik icon ‘frame’ > buat frame baru.
  4. Anda akan melihat 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!

Komentar

Posting Komentar

Postingan populer dari blog ini

6 Situs Untuk Mencari Inspirasi Seputar Desain UI/UX

Gambar
Berikut ini enam situs yang dapat dimanfaatkan untuk mencari inspirasi seputar UI/UX.  Dribbble.com Situs ini bisa dibilang sebagai komunitas terbesar bagi desainer UI/UX dan bisa menjadi tempat yang sangat baik untuk mendapatkan  feedback  dari orang lain. Di sini desainer mengunggah desain mereka dan bisa dikomentari oleh pengguna lain. Desain-desian yang diunggah di Dribble memiliki sandar kualitas yang tinggi.  Pttrns.com Pttrns adalah kumpulan desain yang diambil dari aplikasi-aplikasi iOS dan Android terbaik. Ada banyak konten yang tersedia sejak tahun 2012 yang bisa dipilah berdasarkan puluhan kategori, tahun, atau tags.  Uplabs.com Situs yang dibangun oleh Matt Aussaguel dan Guillemette Dejean ini pada awalnya hanya menjadi tempat kumpulan konten Material Design, tapi sekarang situs ini menjelma menjadi komunitas developer dan desainer untuk berbagi inspirasi UI/UX. Uplabs juga memiliki Market yang menjual UI Kits, Themes, dan Icons yang dibuat oleh komu...
Baca selengkapnya

Apakah UI/UX Designer Harus Bisa dan Belajar Coding ?

UI/UX Designer pada saat ini adalah seseorang yang bekerja untuk merancang sebuah produk baik berupa apps maupun website. UI/UX Designer bekerja bersama dan berkolaborasi dengan product manager dan juga developer. Kedekatan dengan pembuatan produk digital yang tengah dibangun membuat kita bertanya-tanya, Apakah UI/UX designer harus memiliki keahlian di bidang pengembangan yaitu coding? Jawabanya tidak perlu, namun jika kita memiliki wawasan tentang cara kerja coding itu memang bisa menjadi lebih baik. Hal penting adalah kita memahami cara kerja dan hal dasar. Namun ini tetap tidak menjadi keharusan. Tujuan dari memahami coding khususnya pada bagian front-end (HTML, CSS, Javascript) adalah untuk memiliki empati kepada developer agar kita dapat memahami batasan dan kesulitan yang dialami developer. Tidak lebih dari itu! Bahkan jika kita berkaca pada perusahaan yang besar UI/UX Designer pun dipecah menjadi beberapa bagian khusus agar lebih fokus. Namun dibalik pembahasan di atas tahukah k...
Baca selengkapnya

Cara Download Extension Visual Code Studio

Gambar
  Segera setelah menginstall Visual Studio, Anda bisa langsung menggunakannya untuk mendownload Extension. Nah, langkah-langkahnya sebagai berikut: Pada tampilan awal Visual Code, silakan klik  ikon Extension  yang terletak di Sidebar. Anda akan menuju halaman Extension Marketplace. Di sini, ketikkan nama Extension atau cari berdasarkan Extension terpopuler. Setelahnya, klik tombol  Install. Mohon menunggu, proses install Extension akan berlangsung. Jika berhasil, Anda akan melihat Extension tersebut pada tab  Installed. Bagaimana, mudah sekali bukan?
Baca selengkapnya