Di video kali ini kita akan belajar dasar-dasar menggunakan Figma. Namun sebelumnya, intro dulu. Terima kasih kepada Niagara Hoster yang telah menjadi sponsor video kita kali ini. Niagara Hoster adalah salah satu penyedia layanan hosting terbaik di Indonesia.
Beli hosting dan domain di Niagara Hoster dan gunakan kode kupon Koko Aldi untuk mendapatkan potongan sebesar 10% dan juga bonus aset berupa file adobo. mulai namun kebingungan kalian bisa menonton video ini dari awal sampai akhir Oke kemarin saya sudah membuat video impresi pertama saya bagaimana kreatif saya pertama kali menggunakan Figma ini di video ini durasinya sekitar satu jam di sana saya kebingungan dan stress karena saya masih mencari-cari kemana yang digunakan untuk mendesain sebuah UI UXd namun setelah beberapa project kemudian saya sudah bisa mulai lancar dan ini adalah video tutorial yang proper untuk menggunakan Figma. Pertama-tama, apa itu Figma? Figma adalah software untuk membuat dua UXd design seperti Sketch atau Adobe XdD. Namun di sini bedanya Figma itu mempunyai versi web app.
Artinya kalian bisa membuka Figma di browser kalian. Jadi Figma ini versatile. Bisa dibuka di Mac OS, Windows, maupun Linux sekalipun.
Fitur unggulan lainnya adalah Figma bisa digunakan untuk berkolaborasi dengan desainer lain. Bayangkan seperti Google Docs, kalian bisa mengedit file yang sama dalam waktu bersamaan dengan teman kalian. Di Figma juga seperti itu, beberapa designer bisa mengedit file yang sama secara bersamaan.
Fitur lain yang saya suka adalah kita bisa meng-share file Figma ini langsung ke klien atau tim kalian, mereka langsung bisa memberi komen di file desain kalian, dan kalian bisa langsung membalasnya di situ. Jadi nggak perlu export dulu, kemudian kalian... kirim ke WhatsApp atau Slack, minta feedback seperti itu. Jadi ini prosesnya lebih cepat. Oke, mari kita mulai saja.
Kita buka di webnya dulu, figma.com, di sini. Lalu untuk kalian yang baru pertama kali, silakan sign up di sini. Kalau sudah punya akun, silakan log in di sini.
Ini adalah tool gratis untuk lengkapnya kalian bisa baca di pricing ini. Saya menggunakan yang gratis ini karena saya rasa sudah cukup. Dan bagi kalian yang pengen menggunakan versi desktopnya, kalian bisa download di sini.
Resource, download. Dan ini adalah tampilan. tampilan awal ketika kalian sudah login atau sign up di Figma yang tampilan awalnya sudah ada beberapa project biar kalian bisa membuka project ini dan berlatih Bagaimana cara kerjanya lalu disini kalian bisa membuat project atau tim disini new team kalian bisa buat tim kalian dan invite teman kalian atau tim kalian disini namun untuk sekarang kita akan membuat file baru saja oke disini new file ini adalah file baru Figma akan saya jelaskan satu persatu perbagian bagian yang ini namanya adalah canvas atau workspace lalu diatas ini ada ada toolbar namanya. Kalian bisa klik di sini kalau keluar file dan macam-macam seperti ini.
Kalian coba sendiri untuk ini. Kita akan mencoba tooltomnya seperti ini. Nah, ini move untuk menggerakkan objek.
Ini scale untuk memperkecil dan memperbesar objek. Ini frame. Frame ini kalau di Adobe XdD itu kayak artboard.
Jadi, akan kita buat artboard sekarang. Klik frame. Nah, di sini akan keluar pilihannya. Dan panel yang kanan ini namanya adalah property panel.
Dia akan berubah sesuai dengan item atau objek yang sedang aktif. Karena tadi yang sedang aktif adalah frame, jadi kita memilih frame yang mana. Misalkan kita memilih iPhone Xd ya.
Kita klik, dan keluar di sini. Lalu di sini ada rectangle, line, arrow, ellipse, dan lain-lain. Oke, saya buat coba rectangle. Klik, dan buat seperti ini saja.
Oke, sudah. dan disini ada namanya pen dan pensil pen ini fungsinya sama seperti di Illustrator atau di Adobe HD sama jadi kalian bisa gambar disini seperti ini oke seperti ini lalu lalu disini ada comment akan saya jelaskan nanti kalau ini kita balik ke sini nah disini ada nama dokumen untuk mengganti nama dokumen kalian klik saja disini dan kita ganti tutorial Figma seperti ini lalu disini Disini ada avatar kalian, kalau misalkan file ini sedang dibuka oleh teman kalian yang lain, avatarnya juga akan muncul disini. Ini bisa share, kalian copy linknya yang kalian share ke klien atau tim kalian tadi, dan disini kalian bisa prototype.
Lalu di panel paling kiri disini ada layers dan asset. Asset ini akan saya jelaskan nanti. Layer ini seperti Photoshop biasa, jadi disini ada objek apa saja, di dalamnya ada apa saja, seperti itu. Dan di layar sini kita juga bisa membuat page baru. Seperti ini.
Jadi ini adalah page 1. Kalau kita ingin membuat page yang lain adalah klik ini. Karena ada page 2 seperti itu. Jadi jangan... Tovel ini akan bisa dibuat banyak sekali page. Oke, sekarang kita coba untuk mengedit frame.
Apa saja yang bisa diedit dari frame. Di sini ada posisi, kemudian dan lain-lainnya. Nah, di sini ada background.
Kita bisa ganti di sini background-nya. Kemudian ada stroke ini adalah garis, seperti itu. Dan di sini yang saya mau lihatkan adalah grid. disini untuk menambah grid klik saja plus disini lalu disini ada pilihannya mau gridnya itu kotak atau column atau rows saya akan menggunakan column saja disini seperti ini untuk mengedit bisa kalian jadi disini saya ganti satu saja bisa kemudian marginnya mungkin 16 ya seperti ini kalian bisa atur sendiri kan saya sembunyikan dulu nah untuk menyembunyikan kalian bisa disini atau untuk me-remove kalian bisa Klik yang minus ini seperti itu lalu untuk setiap shape atau object juga mempunyai properti yang beda-beda. Di sini kita bisa ganti properti layarnya di sini.
Lalu ini opacity, misalkan 50%. Seperti ini. Saya kembalikan lagi. Lalu fill-nya ini juga kita bisa ganti.
Warnanya seperti ini. Misalkan kita ganti linear, juga bisa seperti ini. Atau radial. Sesuka kalian. Kan ganti solid saja.
Untuk memberi garis tepi, kalian klik saja ini. Add. Lalu di sini ada ukurannya berapa. misalkan 5, nah disini akan keluar 5, seperti itu, nggak kelihatan, nah seperti itu, oke, lalu di bawahnya ada efek, efek disini ada drop shadow dan beberapa efek lain, saya akan contohkan drop shadow saja, kalian klik drop shadow, kemudian kalian klik ini, blur-nya ini mau berapa, misalkan 40, lalu, lalu Xd nya itu 0 saja, Y nya mungkin 30, nah seperti itu, ini opacity mungkin 10, nah seperti itu, kalian coba-coba cari sendiri, nah yang paling bawah disini ada export, jadi export ini bisa per object, atau kalian bisa export satu frame sekalian, jadi tergantung kebutuhan kalian, disini akan saya coba export disini, Lalu kalian pilih ini formannya apa, dan kalian pilih sebesar apa.
Kalau 1 ya berarti ukurannya sama seperti yang sebenarnya di sini. Kalau misal 2 ya berarti dikali 2 seperti itu dan seterusnya. Selanjutnya kita akan membuat komponen.
Kemudian ini juga bisa kita temukan di Adobe XdD, sama. Ini akan saya hapus dulu. Lalu kita akan buat button mungkin ya.
Button seperti ini. Kemudian akan saya ganti rounded-nya. Nah, 10 seperti ini. ini dan warnanya mungkin biru untuk teks Oh ya ini tadi kelupaan teks disini lalu untuk memberi teks diketik saja langsung nah untuk mengedit teks ini kalian bisa edit disini ada Pilihannya disini sudah otomatis karena ini adalah online, jadi disini ada otomatis font Google yang sudah terinstall.
Kalian tinggal pilih saja. Ini akan saya gunakan Roboto saja. Dan warnanya putih.
Dan besarnya mungkin 16 atau 24. Ya, seperti ini. Kita buat bold. Ya.
Dan disini ada properti yang lain seperti text align center, text align right, dan lain-lain. Masih banyak kalau kalian... kalian klik di sebagian sini ada pilihannya disini kalian coba-coba sendiri Oke selanjutnya akan kita buat di tengah-tengah caranya disini di pelan horizontal center lalu dibuat di middle seperti ini Kalau sudah kita group, kita group, ctrl G untuk group. Lalu kita buat komponen, caranya seperti ini.
Ini klik dulu, kemudian di sini. Create component, oke. Klik.
Nah di sini tadanya kalau dia komponen master, ada titik 4 seperti ini. Oke. Kalau kalian ke sini, assets, dia akan ada di sini. Oke. Jadi untuk misalkan kalian mempunyai banyak halaman, kalian tidak perlu membuat button lagi.
Jika kalian tinggal. tinggal drag saja ini ke sini. Seperti itu.
Oke. Dan seperti di Adobe HD, kalau kalian edit masternya, di sini namanya instance-nya, instance ini akan juga berubah sesuai dengan master. Akan saya coba. Di sini warnanya akan kita ubah.
Nah, dia akan ikut berubah. Seperti itu. Oke. Namun kalau kalian edit instance-nya, yang lain tidak akan ikut berubah. Paham ya?
Selanjutnya kita akan membuat color dan text style. Jadi kalian bisa menyimpan warna apa saja yang sering. Kalian gunakan warna brand guideline-nya ya.
Dan kalian juga bisa menyimpan text dan font style yang sering kalian gunakan, yang sesuai dengan brand guideline sebuah website atau app. Untuk menyimpan warna, klik saja warnanya. Lalu kita klik di sini, yang titik 4 ini. lalu kita klik add lagi, add disini. Nah disini akan kita namai purple main seperti ini.
Nah ini ikut ganti karena tadi ini adalah instance-nya dari master ini. Akan kita buat shape lain mungkin ini lalu warnanya kita beri merah untuk menyimpan warna yang ini caranya sama juga ini di plus red seperti itu ya jadi misalkan kalian mau buat shape lain seperti ini dan kalian ingin menggunakan warna yang sama dengan ini kalian klik saja disini lalu pilih dari sini seperti itu selanjutnya untuk menyimpan font style kalian buat dulu fontnya ini misalkan heading satu ini mungkin playfair playfair seperti ini kemudian 30 mungkin underline contoh saja ini nah seperti ini lalu untuk menyimpannya kalian klik disini yang titik empat ini lalu plus dan kita namai dengan heading oke create style Nah misalkan kalian membuat text random disini dan ingin menyesuaikan style-nya dengan ini kalian tinggal kesini lalu ke heading dia akan style-nya akan menyesuaikan dengan ini. Nah sama seperti komponen style-nya.
yang kalian simpan ini juga akan berpengaruh ke semua objek yang mempunyai style yang sama, misalkan kalau kalian tidak memilih apa-apa disini akan keluar style yang kalian simpan tadi, misalkan ini warna purple nya kita ganti disini kita ganti semuanya akan ikut terganti seperti itu ya dan textnya juga kalau ini kita ganti ini misalkan kita ganti begini dia akan juga ikut berganti semua jadi ini adalah cara cepat untuk kalian mengganti Nanti semua heading di semua screen kalian kalau kalian punya banyak screen. Jadi tidak perlu satu-satu-satu. Seperti itu ya. Selanjutnya kita akan mempelajari tool-tool penting di Figma ini. Yang pertama adalah masking.
Untuk membuat masking gamanya kita akan menginstall gambar. Misalkan ini. Kalau besar akan saya kecilkan dulu. Lainnya akan saya hapus saja. Oke untuk Masking kalian buat shape-nya dulu yang akan dibuat sebagai mask, misalkan seperti ini.
Lalu kalian arahkan gambarnya ini ke mask-nya, ke shape mask tadi. Lalu kalian atur gambarnya ini. di atas shape-nya bisa pakai ini atau kalian bisa pakai klik kanan ini bring forward Oke kalau sudah kalian select saja dua-duanya lalu kalian klik ini use as mask nah seperti itu kalian masih bisa edit lagi di sini seperti ini oke seperti itu Nah, untuk mengeluarkan masking-nya, kalian klik ellipsenya tadi, lalu kalian klik lagi ini. Dia akan keluar dari mask. Terus selanjutnya adalah mengeluarkan ruler.
Caranya adalah Shift R. Lalu di sini akan keluar penggaris seperti di Photoshop. Dan untuk membuat penggaris ini, kita drag saja ke artboard-nya, seperti ini. Ke frame-nya maksudnya, seperti ini. Hai jadi seperti itu untuk menghilangkannya kita cat lagi shift R ya terus lanjutnya adalah mengedit gambar langsung di Figma ini belum ada di adobe jadi ini adalah salah satu tulis sangat saya suka di sini kan bisa klik saja dua kali di gambarnya lalu kalian bisa edit disini, exposure nya kalian ganti, kemudian setoros nya juga hitam putih jadi kalian tidak perlu mengeditnya di photoshop lalu kalian import lagi disini kalian langsung bisa edit di figma selain itu dia juga bisa crop langsung disini, crop image seperti ini lalu kalian enter saja. Nah, seperti ini.
Tool selanjutnya adalah tool peganti repeat grid di Adobe HD. Kalau di HD kan sudah ada repeat grid yang digunakan untuk menduplikasi sekembalan objek dengan cepat. Di sini belum ada, namun di sini ada caranya, seperti ini. Misalkan akan saya buat ini dulu. Foto, lalu ada text mungkin.
Nah, ini kita mau buat banyak ke bawah sini kita grup dulu grup lalu kita duplicate manual atau kalian pakai shortcut keyboard adalah shift alt lalu kalian drag sini kalau sudah kalian select dua-duanya dan disini akan keluar seperti ini Untuk menubliqate itemnya, kalian klik yang ini. Lalu kalian pencet Ctrl D. Dia akan otomatis ke bawah ini. Ini akan saya panjangkan dulu. Dia akan otomatis ke bawah Ctrl D. Seperti itu.
Nah, untuk mengatur jaraknya, kalian bisa gunakan ini. Dia akan otomatis mengatur semua jarak itemnya. Selanjutnya, kita akan belajar tentang photo typing.
Jadi, kita butuh dua screen di sini. Di sini akan saya kembalikan. ke screen semula seperti ini. Jadi misalkan di sini ada screen 1 lalu ada screen 2, ini akan saya hapus dulu. Di sini ada detailnya, seperti ini akan saya buat dulu sebentar.
Nah seperti ini contohnya. Jadi kita mau klik ini lalu berpindah ke halaman yang kedua. Caranya adalah kita ke sini, type-auto type yang di kanan ini.
Lalu kita klik ini, dan kita... sambungkan ke kanan, sama seperti di adbsd ya, ke kanan lalu kita pilih, ini tagger-nya apa di tab, di drag atau yang lainnya, kita pakai tab saja kali ini, ini sudah benar navigate ke sini, iphone x2 dan animasinya kita gunakan misalkan slide in Seperti ini ya, sudah ada contohnya di sini. Lalu di screen yang kedua, kita klik tombol back ini, dia akan kembali ke screen 1. Ini kita arahkan ke sini.
Untap navigate to iPhone Xd1, sudah benar. ini arahnya seperti ini. Oke, sudah.
Kalau sudah, kita play saja. Jadinya seperti ini. Kita klik saja ini, dan akan keluar detailnya. Untuk kembali, klik saja panahnya ini. akan kembali ke tadi.
Oke, seperti ini. Gampang ya? Kita close lagi.
Selanjutnya kita akan membahas tentang kolaborasi dan sharing file di Figma ini. Yang pertama adalah kolaborasi. Agar teman di sini bisa mengedit file yang sama, kalian klik di sini, share, lalu kalian invite emailnya di sini, dan kalian pilih dia bisa lihat saja atau dia bisa mengedit.
Di sini akan saya pakai account saya yang lain. sudah ada di sini lalu saya gantiin ini menjadi can edit jadi nanti dia bisa nge-edit ya set invite lalu saya akan mencoba membuka file ini di account saya yang lain nanti anggota tim yang di invite akan keluar notifnya seperti ini mau di accept atau di decline sekarang kita accept dulu dan akan langsung masuk ke filenya tadi nah seperti ini disini kelihatan mouse nya mouse dari account saya yang pertama tadi di sini disini dan sekarang akan saya tunjukkan langsung bersebelahan jadi ngeditnya bersebelahan supaya kita bisa melihat dengan jelas kalau memang ini bisa di edit dengan real-time bersamaan jadinya seperti ini kalau ini saya gerakan kursor yang disebelah sini yang disebelah kiri juga akan berubah jadi kita akan tahu kalau memang teman kita sedang bekerja atau klien bisa mengecek kerjaan kita secara real-time apakah kita sedang bekerja atau tidak disini enaknya seperti itu jadi beberapa desainer bisa bekerja secara bersamaan di file yang sama. Selanjutnya kita akan membahas tentang developer handoff. Jadi misalkan desain web atau app kalian sudah jadi, kalian perlu memberikan file kalian ini ke developer, karena akan di-develop menjadi app atau website. Kalian tidak perlu menggunakan tool lain, karena di sini sudah built-in.
Caranya adalah kalian share, sama. Namun untuk developer biasanya kalian can view saja, karena takutnya nanti akan berubah-ubah desainnya. Kalian can view, lalu kalian invite. nanti developer akan bisa melihat cuma ini saja yang code ini jadi dia bisa inspect di sini itu apa saja propertinya lalu misalkan font disini mereka juga bisa melihat font family yang digunakan itu apa font style nya apa itu mereka juga bisa melihat jaraknya kalau ini di hover seperti ini akan kelihatan jaraknya jadi sangat praktis jika kalian ingin memberikan file figma ini ke developer langsung saja kalian share seperti tadi lalu kalian ganti ini can view oke, nah selanjutnya kita akan belajar tentang commenting, yaitu feedback disini, disini misalkan saya akan menggunakan account saya yang tadi tadi disini disini akan saya beri feedback misalkan ini dibuat reddit saja lalu pause Oke, kalau sudah, kita kembali ke akun yang tadi. Di sini akan ada notif.
Di sini, oke. Dan akan keluar apa saja di sini yang di-comment. Kalau belum dibaca, akan warnanya menjadi biru. Namun kalau sudah dibaca, nanti warnanya akan menjadi putih.
Kalian bisa balas juga di sini. Siap. kemudian ku reply, jadi sangat cepat untuk mendapatkan feedback dan koreksinya, kalian tidak perlu export file ini, lalu kalian kirim ke whatsapp atau slack seperti itu, kalian kirim saja linknya seperti tadi, di share, lalu can view, oke. Yang terakhir kita akan melihat plugin, jadi di Figma ini juga ada banyak sekali plugin, seperti di Sketch atau Adobe XdD, caranya kita ke sini, lalu kita ke plugin, dan manage plugin, oke, kalian bisa... search pluginnya disini lewat browse all plugin disini nah disini keluar semua pluginnya dan kalian bisa search disini mungkin untuk plugin-plugin yang sering saya gunakan akan saya bahas di video lainnya untuk sekarang penangan dulu saja plugin itu seperti disini dan untuk menginstal kalian klik saja install disini dia akan langsung terinstall tanpa mendownload karena ini sudah online memang dan untuk menggunakannya misalkan kita kembali ke tadi untuk menggunakannya kita bisa keklik kanan, lalu plugins, disini ada unsplash, sudah kan splash kita klik saja, dia akan keluar pilihan gambarnya, karena unsplash memang adalah plugin untuk gambar, stock gambar, misalkan nature, nah dia akan keluar disini, oke, itu dulu tutorial menggunakan dasar-dasar Figma pada video kali ini, jika kalian ada pertanyaan, langsung saja tulis di kolom komentar di bawah dan kalau kalian mau request sesuatu, langsung saja juga komen di bawah, untuk melihat tutorial video Figma yang lain, akan saya cantumkan plug-innya disini, dan follow juga Instagram aku Koko Ahadi, kalian disana saya banyak share tips-tips tentang desain, share juga video ini ke teman-teman kalian supaya kita bisa belajar fitman bersama, subscribe juga bagi yang belum supaya saya semangat-semangat untuk membuat video selanjutnya dan desain saya adalah desain dulu aja nanti juga bisa saya Koko Adanto, pamit