Fungsi canvas/frame dan Slice tool serta menentukan frame sesuai Project mu | Membuat UI design part1#

Dutormasi.com-Halo sahabat dutormasi!!. Pada kesempatan kali ini kita akan membahas mengenai 
"fungsi  canvas/frame dan Slice tool serta menentukan frame sesuai Project mu" |Membuat UI design part1# 

Untuk memulai project UI design pastinya kalian harus menentukan canvas project sesuai dengan project yang akan kalian buat …. Yuk mari kita pelajari mengenai canvas/ frame dan slice tool.

Fungsi  canvas/frame dan Slice tool serta menentukan frame sesuai Project mu | Membuat UI design part1#


Software untuk membuat desain UI

Pertama kalian harus punya software untuk membuat desain UI , cek postingan sebelumnya . kali ini kita akan mengguanakan salah saut software yaitu FIGMA link www.figma.com.

Ketik Figma.com lalu masuk baik melalui web browser, aplikasi yang sudah diinstal di PC.

Fungsi  canvas/frame dan Slice tool serta menentukan frame sesuai Project mu | Membuat UI design part1#

Setelah Login maka akan muncul tampilan awal seperti ini...

Fungsi  canvas/frame dan Slice tool serta menentukan frame sesuai Project mu | Membuat UI design part1#


FRAME 

Selanjutnya klik icon dibawah yang bertanda biru atau tekan F pada keyboard

Fungsi  canvas/frame dan Slice tool serta menentukan frame sesuai Project mu | Membuat UI design part1#

lalu banyak terdapat pilihan pada bagian kanan layar, yang tertera dibawah 
Fungsi  canvas/frame dan Slice tool serta menentukan frame sesuai Project mu | Membuat UI design part1#
Pilih Phone bila ingin membuat desain untuk bermacam jenis baik  android maupun ios.
Fungsi  canvas/frame dan Slice tool serta menentukan frame sesuai Project mu | Membuat UI design part1#
Pilih tablet bila  ingin membuat desain tablet untuk bermacam jenis baik  versi android maupun ios.
Fungsi  canvas/frame dan Slice tool serta menentukan frame sesuai Project mu | Membuat UI design part1#
Pilih desktop bila ingin membuat desain pada pc untuk bermacam jenis baik  android maupun ios
Fungsi  canvas/frame dan Slice tool serta menentukan frame sesuai Project mu | Membuat UI design part1#
Pilih Watch ingin membuat desain untuk bermacam jenis smarth watch  
Fungsi  canvas/frame dan Slice tool serta menentukan frame sesuai Project mu | Membuat UI design part1#
Pilih paper bila ingin membuat desain untuk bermacam kertas/ baik sejenis poster dll 
Fungsi  canvas/frame dan Slice tool serta menentukan frame sesuai Project mu | Membuat UI design part1#
Pilih social media bila ingin membuat desain untuk bermacam jenis konten pada sosial media kamu

Fungsi  canvas/frame dan Slice tool serta menentukan frame sesuai Project mu | Membuat UI design part1#
Dan terakhir ada Figma Community bila ingin membuat desain icon dll.

Fungsi  canvas/frame dan Slice tool serta menentukan frame sesuai Project mu | Membuat UI design part1#

Slice

Next ada icon slice pada bar yang sama dengan frame 

Fungsi  canvas/frame dan Slice tool serta menentukan frame sesuai Project mu | Membuat UI design part1#

Ini buat saya berfungsi saat ingin mengekspor suatu icon, gambar atau ilustrasi . misalkan icon yang saya buat adalah 14 x 13 menjadi ukuran dengan padding 15 x 15agar menciptakan icon yang seimbang untuk diekspor

Jadi di Figma sudah lengkap ya , jadi kalian gk perlu bingung lagi karena semua ukuran untuk desain kalian sudah tersedia.  Kita akan belajar membuat UI design dari hal yang paling dasar , tungguin part2nya ya... Salam Dutormasi.

Ikaln Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel