Newest Info

Berita, info dan pengumuman terbaru berkaitan dengan perkembangan teknologi

Tutorial design menggunakan Figma

31 Juli 2019 | Dwinawan via medium
post image

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: Hanya dengan meng-klik kanan pada gambar Lalu pilih copy image 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: mengklik kanan kotakan nya 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…. IndonesiaIT 2019, [...], Artikel ini di ambil dari feed medium, untuk pengalaman baca yang lebih baik, silahkan kunjungi situ aslinya. IndonesiaIT - Software Developer Terbaik. Baca Selengkapnya.