Warning: getimagesize(): http:// wrapper is disabled in the server configuration by allow_url_fopen=0 in /home/yfzbjhce/indonesiamendesain.com/wp-content/plugins/td-cloud-library/shortcodes/header/tdb_header_logo.php on line 792

Warning: getimagesize(http://indonesiamendesain.com/wp-content/uploads/2020/09/Screen-Shot-2020-07-16-at-13.07.54-300x136.png): failed to open stream: no suitable wrapper could be found in /home/yfzbjhce/indonesiamendesain.com/wp-content/plugins/td-cloud-library/shortcodes/header/tdb_header_logo.php on line 792

Warning: getimagesize(): http:// wrapper is disabled in the server configuration by allow_url_fopen=0 in /home/yfzbjhce/indonesiamendesain.com/wp-content/plugins/td-cloud-library/shortcodes/header/tdb_header_logo.php on line 792

Warning: getimagesize(http://indonesiamendesain.com/wp-content/uploads/2020/09/Screen-Shot-2020-07-16-at-13.07.54-300x136.png): failed to open stream: no suitable wrapper could be found in /home/yfzbjhce/indonesiamendesain.com/wp-content/plugins/td-cloud-library/shortcodes/header/tdb_header_logo.php on line 792

How To : Mendesain UI Menggunakan Figma (Tutorial)

- Advertisement -
- Advertisement -
- Advertisement -

Pada tutorial kali ini kita akan menggunakan Figma sebagai design tool.

Apa itu Figma?

Figma adalah salah satu design tool dan keunggulan dari Figma adalah web based. Sehingga jika kamu pengguna windows, linux ataupun mac, kamu bisa menggunakan design tool ini.


Untuk menggunakan tool ini, Kamu cukup membuka Figma.com


Lalu melakukan registrasi


Dan kamu siap untuk menggunakan nya


Mari kita membuat UI untuk mobile app seperti design dibawah ini


Kita mulai dengan membuat Frame terlebih dahulu. Klik icon frame di pojok kiri atas


Lalu pilih iPhone 8 (375 x 667) untuk frame nya


Tampilan nya sudah seperti dibawah ini?


Setelah itu, masukkan tulisan dengan memencet icon Teks di sebelah kiri atas. Lalu klik di sembarang tempat pada frame nya.


Kita buat tulisan “Discover” sebagai title. Untuk informasi nama font, ukuran, dan warna nya sudah ada di sebelah kanan ya.


Setelah itu tempatkan tulisan “based on your streaming activity” sebagai description. Untuk informasi nama font, ukuran, dan warna nya sudah ada di sebelah kanan ya.


Setelah itu kita buat kotak dengan menekan icon kotak diatas


Lalu tempatkan di frame


Setelah itu kita ubah sudut kotak menjadi melengkung, dengan mengubah border-radius nya menjadi 8


Sehingga tampilan nya menjadi seperti ini


Setelah itu kita masukan gambar. Situs favorit saya adalah Unsplash.com.

Memasukkan gambar cukup mudah:

  1. Hanya dengan meng-klik kanan pada gambar
  2. Lalu pilih copy image
  3. Setelah itu paste pada frame dengan menekan command+V (pada Mac) atau ctrl + V (pada windows)

Agar gambar bisa masuk ke dalam kotak, kita masking kotakan nya dengan cara:

  1. mengklik kanan kotakan nya
  2. Lalu pilih “Use as Mask

Sehingga tampilan nya menjadi seperti ini


Setelah itu posisikan gambar agar aduhai


Setelah itu kita tempatkan teks “Health is the best Investment” sebagai judul di card tersebut. Untuk informasi nama font, ukuran, dan warna nya sudah ada di sebelah kanan ya


Setelah itu kita masukan lingkaran dengan menekan icon pada pojok kiri atas seperti berikut


Lalu tempatkan di atas card. Ingat, saat menggambar lingkaran nya, selalu tekan tombol Shift agar lingkaran nya bulat sempurna. Untuk informasi lebar dan tinggi lingkaran, warna lingkaran dan lain nya ada di sebelah kanan ya.


Setelah itu kita masukan segitiga, dengan menekan tombol seperti berikut


Lalu tempatkan di atas lingkaran


Agar segitiga bisa menjadi tombol play, lakukan langkah berikut:

  • Perkecil segitiga nya
  • Beri warna putih dengan mengubah Fill nya
  • Putar segitiga 150 derajat ke arah kanan
  • Ubah sudut segitiga agar tumpul dengan mengganti corner radius nya

Semua settingan bisa kamu lihat di sebelah kanan


Setelah itu kita buat lingkaran untuk tempat avatar


Setelah itu cari gambar untuk avatar, lalu paste


Gunakan teknik “Use as mask” untuk memasukkan gambar avatar ke dalam lingkaran


Mari kita ke bagian layer dulu. Berikut adalah layer layer yang kita punya. Mari rapikan terlebih dahulu.


Untuk avatar, jadikan satu folder, agar layer diatas nya tidak ikut masuk ke dalam lingkaran. Select Lingkaran dan Foto nya seperti dibawah ini


Klik kanan — lalu pilih Group Selection


Sehingga akan tampak seperti dibawah ini


Mari kita lanjutkan mendesain nya. Kini tambahkan teks “by Samantha” di samping avatar. Untuk informasi nama font, ukuran, dan warna nya sudah ada di sebelah kanan ya


Setelah itu tambahkan garis, sebagai pemisah Judul Card dengan Avatar. Cara nya klik menu seperti dibawah ini


Setelah itu gambar garis di frame. Pencet shift agar garis nya lurus. Tebal garis bisa 0.5 agar tampak tipis


Sejauh ini, berikut yang kita punya


Mari kita rapikan dulu layer nya agar nyaman. Berikut adalah pengaturan layer saya


Mari kita lanjut mendesain. Kita tambahkan teks “Popular” di bawah card. Untuk informasi nama font, ukuran, dan warna nya sudah ada di sebelah kanan ya.


Setelah itu kita tambahkan kotakan di bawah nya. Spesifikasi nya bisa dilihat di kanan ya


Setelah itu tambahkan teks “How music can boost my mood” di samping card. Untuk informasi nama font, ukuran, dan warna nya sudah ada di sebelah kanan ya.


Setelah itu tambahkan teks “Angela Smith” di bawah nya. Untuk informasi nama font, ukuran, dan warna nya sudah ada di sebelah kanan ya.


Setelah itu cari foto yang clean dan colorful, untuk mengisi kotak nya


Ulangi langkah diatas untuk membuat konten dibawah nya


Lalu tambahkan garis sebagai pemisah. Spesifikasi garis nya ada di sebelah kanan ya.


Sejauh ini kita telah memiliki design seperti berikut


Mari kita lanjutkan untuk mendesign menu di sebelah kanan atas. Pertama gambar garis (Line). Untuk spesifikasi nya ada di sebelah kanan ya


Setelah itu gambar 1 garis lagi. Untuk spesifikasi nya ada di sebelah kanan ya


Setelah itu, gambar 1 garis lagi. Untuk spesifikasi nya ada di sebelah kanan ya


Setelah itu, gambar lingkaran merah untuk tanda notifikasi. Spesifikasi nya ada di sebelah kanan ya


Ulangi langkah-langkah diatas hingga menjadi design seperti dibawah ini


Semoga bermanfaat 🙂

sumber : medium.com -dwinawan

- Advertisement -

Latest articles

7,350 Followers
Follow

Related articles