Skip to main content

Sebagai seorang UI designer pastinya tools utama kita adalah design tools. Dimana kita menciptakan sejuta mockup demi sebutir nasi(┬_┬)

Anyway, artikel ini akan berisikan beberapa UI design tools yang ada diluar sana. Untuk artikel ini kita akan me-review Sketch, Adobe XD dan Figma. Mulai dari review singkat, harga, pro dan kontra dari masing-masing tools.

Sebelumnya disclaimer terlebih dahulu, jika ada yang merasa tools mereka tidak masuk kesini jangan berkecil hati. Setiap mockup tools punya positif dan negatif-nya sendiri-sendiri. Lalu untuk review disini gw pakai macbook, jadi maaf kalau ada perbedaan dengan yang ada di windows. Dan yang terakhir semua review disini bersifat subjektif, hanya gimana gw ngerasain selain pakai ini tools.

Sekian disclaimer, mari kita mulai dari tools pertama.

Sketch

Review

Sketch bisa dibilang design tool pertama yang ditujukan untuk UI Designer. Kenapa? Karena menurut google (which is true) sketch adalah vector graphics editor pertama yang tidak memiliki fungsi design printing. Dengan tidak adanya fitur itu, sketch ditujukan khusus untuk designer yang membuat design hanya untuk digital saja. Oh dan menurut google sketch pertama kali keluar tanggal 7 September 2010 dan mendapatkan penghargaan dari Apple (mereka hanya special untuk produk apple, hingga sekarang.

Menjadi yang pertama di bidangnya, membuat sketch (menurut gw) menjadi design tool pilihan utama untuk UI Designer. Meski begitu banyak bugs yang sering terjadi, dan juga masalah utama mereka yaitu hanya bisa dipakai di macbook, tapi karena semakin banyak perusahaan yang mengharuskan UI designernya menggunakan sketch membuat tools ini makin powerfull.

Jadi untuk calon atau junior UI Designer diluar sana, kalau kebetulan kalian sedang mencari tools yang cocok untuk UI Designer atau kalau punya Macbook, iMac atau Mac Mini bertebaran dirumah, silakan mencoba program sketch. Mereka punya free trial 14 hari, cukup untuk belajar dan lihat-lihat.

Pricing – Seberapa mahal Sketch?

  • Free trial untuk 14 hari
  • $99 untuk update selama 1 tahun dan tambahan $69 untuk update the next year. Buat yang bingung, jadi $99 pertama untuk membeli sketch dan update mereka selama 1 tahun. Setelah 1 tahun selesai kalian tidak akan bisa update sketch lagi sampai kalian perpanjang license kalian seharga $69 (untuk sketch update sangat direkomendasikan, karena banyaknya bug yang suka menganggu)
  • Untuk yang punya banyak device, atau perusahaan, sketch punya harga untuk beberapa device, dimulai dari $89 per device (untuk 2 device) dan seterusnya bisa dicek disini
  • Terakhir sketch punya diskon hingga 50% untuk pelajar atau guru dan gratis untuk institusi. Hanya saja kalian butuh register dan menunggu review dari mereka, dan tidak tau apakah ini international atau tidak, cuma kalau mau kalian bisa isi form-nya disini

Pro – Kenapa pakai Sketch?

  • Sketch yang pertama, termasuk tools paling terkenal dan banyak perusahaan yang menggunakan sketch, bahkan di Indonesia.
  • Banyak plugin yang membuat sketch makin powerfull, beneran banyak banget plugin-nya ಠ_ಠ
  • Resource UI banyak dibuat dalam files sketch.
  • Sketch mudah digunakan karena hanya punya fungsi untuk UI designer. Jadi jangan berharap untuk edit foto disini. Cuma pembuatan icon masih bisa dilakukan.

Kontra – Jangan pakai Sketch!

  • Hanya bisa dipakai di produk apple (Macbook, iMac dan Mac Mini)
  • Banyak bug yang nyebelin dan suka random terjadi, tanpa alasan dan solusi yang jelas.
  • Update sketch termasuk sangat cepat, which is bagus. Jeleknya update suka banyak bugs awal2, dan juga ketika kita punya file sketch dengan versi beda pas dibuka berantakan atau dalam beberapa khasus tidak bisa dibuka.
  • Hanya bisa buka file sketch.

Adobe XD

Review

Siapa didunia design yang tidak kenal Adobe, terutama Adobe Photoshop. Nah buat yang tidak tau, Adobe XD adalah jawaban untuk UI Designer dari Adobe, dan juga untuk ngalahin sketch setelah gagal dengan Photoshop (ingat saat photoshop jadi punya artboard? Itu salah satu cara Adobe datang ke dunia UI Designer)

Adobe XD atau yang pertama kali disebut project comet muncul saat acara Adobe Max 2015, dan akhirnya keluar dan punya nama official sebagai Adobe XD ditahun 2016. Alasan utama Adobe membuat XD adalah supaya mereka punya satu software yang fokus untuk UI Designer.

Secara tampilan sekilas Adobe XD sangat mirip dengan sketch, cara pakainya pun bisa dibilang sangat tidak berbeda dengan sketch. Jadi buat kalian yang sudah biasa dengan sketch, kalau mau pindah ke Adobe XD tidak akan terjadi banyak masalah. Hanya butuh penyesuaian dikit dengan shortcut dan beberapa istilah yang berbeda.

Pricing – Seberapa mahal Adobe XD?

  • Free, tapi kalian hanya bisa punya 1 prototype yang aktif, dan 1 design spec yang aktif.
  • Rp. 134.800 perbulan untuk menggunakan Adobe XD sepuasnya.
  • Jika kalian sudah subscribe ke all plan Adobe, silakan langsung download Adobe XD. Yang belum punya Adobe memberikan tawaran untuk membayar Rp. 715.100 perbulan dan kalian bisa pakai semua software Adobe (yap photoshop, dreamweaver dan illustrator termasuk)

Pro – Kenapa pakai Adobe XD?

  • Kalian para pengguna windows, berbahagialah Adobe XD bisa digunakan di windows!
  • Kalau kalian suka menggunakan software lain dari Adobe, kalian akan senang menggunakan XD. Karena XD dapat membuat file photoshop, illustrator dan bahkan SKETCH!
  • Adobe XD punya design spec. Gampangnya XD punya zeplin included. Untuk yang belum pernah menggunakan Zeplin, mudahnya design spec digunakan untuk mempermudah programmer melihat spesifikasi design seperti kode warna, ukuran, beda margin atau padding, dll tanpa butuh membuka file XD.
  • Beberapa fitur sudah ada didalam XD tanpa butuh plugin (contohnya repeat grid, responsive design tools)
  • Entah kenapa panel simbol dan aset XD lebih rapi
  • Auto-animate, ini salah satu fitur baru di XD dimana kalian bisa punya transisi yang tidak biasa untuk prototype kalian. Fitur ini beneran keren!
  • Adobe XD lebih ringan dibanding beberapa designer tools lainnya.

Kontra – Jangan pakai Adobe XD!

  • Masih sedikit yang kenal Adobe XD, termasuk calon perusahaan kalian.
  • Tidak banyak plugin di XD seperti di sketch. Cuma siapa tau dengan berjalannya waktu akan semakin banyak.
  • Resource UI masih sedikit dalam bentuk XD file.

Figma

Review

Ok! mungkin tidak banyak yang tahu tentang Figma, tapi ada 1 hal utama yang membuat figma menang dari design tools lainnya, Collaboration!

Penjelasan paling singkat adalah kalau kalian pernah menggunakan google doc (google drive) maka figma sejenis itu, tapi untuk kolaborasi design. Bayangkan kalian bisa design bersamaan dalam real time. Setiap orang akan punya cursor yang berbeda-beda (dan punya username disampingnya). Kalian bisa lakukan apapun yang di figma berasama-sama diwaktu yang sama juga.

Fitur ini membuat Figma sangat berguna untuk project yang dibuat oleh beberapa orang dalam waktu bersamaan. Dan karena mereka kolaborasi real time, Figma 100% di cloud, jadi kalian membutuhkan koneksi internet untuk bekerja dengan Figma. Positifnya kalian tidak butuh save apa-apa, karena semua otomatis disimpan secara real time.

Pricing – Seberapa mahal Figma?

  • Free, tapi kalian hanya bisa punya 3 project dan 2 editor
  • $12 per-editor, perbulan
  • $45 per-editor, perbulan. Untuk yang ini kalian akan dapat fitur lebih banyak. Lengkapnya bisa dicek disini.

Pro – Kenapa pakai Figma?

  • Seperti XD untuk pengguna windows, have fun!
  • Figma tidak butuh didownload, kalian bisa menggunakan figma langsung dari browser.
  • Kolaborasi! Tetep fitur paling utama dari Figma.
  • Banyak plugin untuk membuat Figma makin powerfull.
  • Figma bisa buka file sketch.

Kontra – Jangan pakai Figma!

  • Sama lagi seperti XD, figma masih kurang dikenal.
  • Harganya termasuk paling mahal, apalagi jika digunakan oleh banyak orang karena bayarannya tergantung banyaknya editor.
  • Resource UI masih sedikit dalam bentuk Figma file.

Kesimpulan

Saatnya kesimpulan. Hampir semua UI design tools memiliki banyak banget kesamaan. Mulai dari tampilan, tools yang ada, sistem grid, vector base, sistem simbol dan asset export bahkan hingga beberapa plugin pun sama.

Jadi apapun yang kalian pakai, tidak ada yang salah. Pilihlah mana yang paling cocok dengan keadaan kalian. Dan untuk yang tertarik untuk pindah, karena mereka semua nyaris sama, maka kalian tidak akan terlalu lama mempelajarinya. Hanya butuh beberapa waktu untuk penyesuaian.

Untuk kesimpulan ketiga tools diatas bisa disingkat sebagai berikut:

  • Sketch – Untuk pengguna apple product, plugin segudang-gudang dan lebih senior
  • Adobe XD – Ringan, cepat, animasi, design spec dan kolaborasi dengan produk Adobe lainnya.
  • Figma – Kolaborasi dan secara general lebih stabil.

See you until next time ( ̄▽ ̄)ノ

Credit:

Leave a Reply