#1 Siapkan akun Figma
Untuk memulai Figma, Anda perlu memiliki akun. Jadi, mari kita buka bersama.
Pertama, kunjungi www.figma.com dan klik tombol Mulai di pojok kanan atas untuk mendaftar. Jika Anda sudah memiliki akun, klik tombol Masuk .
Karena ini tutorial, kita akan menggunakan opsi pendaftaran. Untuk itu, Figma memberi Anda dua pilihan.
Klik tombol Lanjutkan dengan Google atau masukkan alamat email dan kata sandi pilihan Anda. Anda juga akan diminta memasukkan nama, jenis pekerjaan, dan bagaimana Anda ingin menggunakan Figma.
Lalu, klik tombol Buat akun . Anda akan segera menerima email verifikasi. Buka pesan dan ketuk Verifikasi email , dan Anda sudah siap.
Sekarang, Anda seharusnya memiliki akses ke dasbor yang terlihat seperti ini:
Membuat proyek baru
Untuk membuat proyek di Figma, Anda harus menjadi bagian dari tim. Jika sudah, cukup bergabung dengan mereka dan buka peramban berkas mereka. Namun, jika belum, klik tombol Buat tim baru di sisi kiri halaman dan masukkan nama tim. Kemudian, undang kolaborator yang ingin Anda ajak bekerja sama dalam proyek ini.
Setelah Anda membuat tim, Anda akan diarahkan ke halaman tim. Dari sana, Anda dapat membuat proyek baru.
Jadi, mari kita lakukan itu!
Klik tombol Proyek Baru di pojok kanan atas halaman berkas tim Anda. Masukkan nama proyek jika Anda menggunakan paket Figma Pro, atau pilih kotak Proyek Tim untuk melanjutkan jika Anda menggunakan paket gratis.
Voila! Anda telah membuat proyek baru.
Anda hanya bisa membuat satu proyek dan tiga desain dengan paket Gratis. Namun, dengan paket Pro, Anda bisa mengakses proyek dan desain tanpa batas.
Menambahkan file desain
Berkas desain menampung desain yang ingin Anda kerjakan, dan dapat ditambahkan ke lingkungan proyek.
Cukup ketuk tombol File desain baru , dan Anda akan diarahkan ke halaman baru yang menampilkan file Figma seperti ini. 👇
Anda dapat memberi nama pada berkas desain Anda saat pertama kali membuatnya. Nama default-nya adalah “Tanpa Judul”, tetapi Anda dapat mengetuknya untuk mengubahnya agar lebih deskriptif.
Jelajahi template Figma
Figma memiliki basis data templat yang dapat Anda sesuaikan untuk desain UX Anda . Untuk mengaksesnya, kembali ke folder proyek dan pilih Lihat Semua . Templat ini berada tepat di bawah tombol Desain Baru yang Anda klik sebelumnya.
Sekarang akun Figma Anda sudah disiapkan, mari mulai membuat bingkai baru untuk desain Anda.
#2 Buat dan modifikasi bingkai baru
Bingkai itu seperti papan di Figma. Bingkai mewakili antarmuka yang akan berinteraksi dengan pengguna akhir desain. Anda dapat memilih bingkai yang berbeda di Figma untuk menempatkan desain Anda.
Untuk membuat bingkai baru, buka berkas desain dan klik alat Bingkai di pojok kiri atas. Kesulitan menemukannya? Cari tombol yang terlihat seperti tagar. Anda juga dapat membuat bingkai baru dengan menekan huruf F pada kibor.
Memilih ukuran bingkai
Setelah memilih alat bingkai, arahkan ke sisi kiri halaman. Pilih bingkai dari pilihan yang tersedia, dan bingkai tersebut akan muncul di kanvas. Ukuran bingkai yang tersedia mencakup sebagian besar iPhone dan Android.
Untuk tutorial ini, mari pilih bingkai Surface Pro 8:
Jika Anda membutuhkan bingkai yang berbeda dari yang tersedia, Anda dapat menggambar bingkai Anda sendiri dengan mengeklik dan menyeret mouse.
Mengedit properti bingkai
Setelah memilih bingkai, Anda akan melihat panel di bawah Desain di sisi kanan halaman. Di sana, Anda dapat menetapkan berbagai properti ke bingkai sesuai keinginan.
Misalnya, Anda dapat mengubah ukuran bingkai dengan mengetikkan ukuran piksel yang diinginkan di kolom X, Y, W, dan H.
Hal lain yang dapat Anda lakukan termasuk mengisi bingkai dengan warna menggunakan Isi, menambahkan efek dengan mengeklik Efek , dan banyak lagi.
Menggunakan lapisan
Di sisi kiri layar terdapat panel Layers . Setiap kali Anda menambahkan elemen atau bingkai baru, layer baru akan ditambahkan. Anda dapat mengatur ulang layer tersebut dengan menyeret dan melepaskannya.
Anda juga dapat mengelompokkan lapisan agar berkas lebih terorganisir jika ingin memindahkannya ke berbagai bingkai. Untuk mengelompokkan lapisan, pilih semua elemen. Tekan Ctrl+G jika Anda pengguna Windows atau CMD+G pada Mac.
Bentuk vektor
Jika Anda ingin menggunakan bentuk dasar (persegi panjang, lingkaran, dll.), pilih tanda persegi dari bagian atas halaman.
Untuk bentuk, ikon, logo, atau tombol yang lebih kompleks, pilih ikon pena dari menu atas atau tekan P pada keyboard Anda.
Dengannya, Anda dapat mengeklik di mana saja pada bingkai untuk membuat bentuk yang Anda inginkan. Lalu, tekan Enter setelah selesai.
Jika Anda ingin mengubah bentuk vektor saat mendesain, Anda dapat melakukannya melalui menu Properti di sisi kanan halaman.
Apalah arti desain tanpa gambar? Begini cara menambahkannya di Figma!
#3 Masukkan gambar, teks, dan objek lainnya
Ada berbagai cara untuk memasukkan gambar ke dalam bingkai di Figma. Cara yang paling populer dan paling mudah adalah dengan menyeret dan melepaskannya ke area kerja Anda.
Anda juga dapat mengeklik menu Bentuk di bagian atas halaman dan pilih Tempatkan gambar/video .
Ketika Anda mengeklik Buka , kotak dialog akan terbuka dan Anda dapat memilih gambar yang ingin digunakan. Kemudian, klik Oke untuk menyisipkan gambar.
Atau, tekan CMD+Shift+K atau Ctrl+Shift+K, untuk membuka kotak dialog.
Jika gambar yang ingin Anda gunakan berasal dari tempat lain di Figma, pilih gambar tersebut dan tekan CMD+C atau Ctrl+C. Arahkan ke frame yang ingin Anda gunakan dan tekan CMD+V atau Ctrl+V.
Tetapi bagaimana jika Anda ingin menyisipkan gambar ke dalam bentuk atau bingkai yang berbeda?
Untuk melakukannya, klik bingkai. Pilih Isi dari menu Properti di sisi kanan area kerja jika Anda ingin menambahkan warna.
Anda akan melihat menu tarik-turun di kiri atas roda warna: klik menu tersebut dan pilih Gambar atau Video .
Untuk memilih gambar, arahkan kursor Anda pada jendela yang lebih kecil dengan warna hitam dan putih lalu klik Pilih Gambar .
Kotak dialog akan muncul dan Anda dapat memilih gambar yang diinginkan. Klik Buka untuk memasukkannya ke dalam bentuk atau bingkai.
Jika Anda mau, Anda dapat mengedit gambar dengan berbagai parameter yang ditampilkan di jendela kecil.
Untuk menyisipkan objek, klik ikon bentuk persegi dari menu atas untuk menggambar poligon, bintang, panah, garis, persegi panjang, dan elips.
Pilih bentuk apa pun, klik bingkai, dan seret ke ukuran yang diinginkan. Untuk bentuk dengan proporsi yang sama, tekan tombol Shift sambil menggambar.
Menambahkan teks pada Figma juga cukup mudah.
Cukup klik tanda T dan ketuk di mana Anda ingin teks pada bingkai tersebut menggambar kotak teks. Lalu, mulailah mengetik.
Untuk mengedit teks, klik layer teks dan klik dua kali pada teks yang ingin diedit. Anda juga dapat mengeditnya dari menu Properti . Di sana, Anda dapat mengubah warna teks, jenis huruf, dan bahkan mengedit kata-kata di bagian konten.
Sekarang, jika Anda mengerjakan beberapa proyek desain menggunakan Figma, bukankah hebat untuk memiliki gaya tersimpan yang dapat Anda tambahkan ke setiap proyek?
Untuk mempelajari cara menyimpan gaya, teruslah membaca!
#4 Simpan gaya Anda
Dengan menyimpan gaya Anda, Anda dapat menghindari keharusan mengulang proses desain yang sama berulang-ulang.Sumber GIF: Giphy
Misalnya, jika Anda ingin judul teks desain Anda memiliki font, warna, dan ukuran yang sama, Anda dapat membuat gaya dan menyimpannya sebagai gaya H2 yang dapat digunakan kembali.
Lalu, terapkan gaya itu ke judul yang sesuai.
Berikut cara membuat gaya teks:
- Masukkan teks ke dalam bingkai dan format sesuai gaya yang Anda inginkan.
- Pilih teks dengan gaya yang ingin Anda simpan.
- Klik ikon gaya empat titik pada menu Properti .
- Ketuk tanda +, beri nama gaya, tambahkan deskripsi, dan klik Buat gaya .
Untuk menggunakan gaya, pilih teks yang ingin Anda format dan klik ikon gaya untuk memilihnya.
Teks bukan satu-satunya gaya yang bisa Anda simpan. Selain teks, Anda juga bisa menyimpan warna, kisi, dan bahkan efek.
Seperti yang telah kita bahas sebelumnya, gaya yang tersimpan dapat membantu Anda menggunakan kembali warna atau efek di proyek mendatang. Untuk melakukannya, Anda perlu:
- Pilih bentuk, objek, atau bingkai dengan warna atau efek yang ingin Anda simpan.
- Ketuk empat titik di sudut atas Isi (untuk warna) atau Efek pada panel Properti .
- Klik tanda +, lalu tetapkan nama dan deskripsi pada gaya tersebut.
- Klik Buat gaya .
Anda dapat mengikuti langkah yang sama saat menambahkan gaya teks ke teks kapan pun Anda perlu menggunakan kembali templat yang disimpan.
Hanya ada satu kelemahan kecil dalam menyimpan gaya; gaya tersebut hanya akan tersedia pada berkas yang sedang Anda kerjakan.
Jadi, bagaimana jika Anda ingin menggunakan gaya tersebut pada berkas proyek lain? Anda harus mempublikasikannya ke pustaka tim Anda. Begini caranya:
- Klik pada kanvas (yang berisi bingkai)
- Pilih panah bawah di samping nama file di bagian atas halaman
- Pilih Publikasikan perpustakaan dan ikuti petunjuk di layar
Sekian tentang cara menyimpan gaya. Ini akan membantu Anda menghemat waktu saat melakukan brainstorming, wireframe, atau mendesain.
Untuk lebih menyederhanakan proses ini, Anda mungkin ingin mempertimbangkan untuk menambahkan komponen yang dapat digunakan kembali ke alur kerja desain Anda.
Jangan khawatir, kami akan mengupas artinya dan cara menambahkannya di bagian berikutnya.
#5: Tambahkan komponen
Komponen adalah kumpulan elemen UI, objek, atau lapisan yang dapat Anda gunakan berulang kali di seluruh desain Anda. Komponen memudahkan Anda mempertahankan desain yang konsisten untuk memperbarui atau menskalakan pekerjaan Anda tanpa stres.
Misalkan Anda sedang mengerjakan desain web dan ingin logo dan nama merek muncul di seluruh situs.
Itu adalah elemen-elemen berbeda yang dapat Anda gunakan kembali. Anda dapat menambahkan keduanya ke suatu komponen dan memberinya judul ‘logo merek’. Kemudian, tambahkan ke frame lainnya.
Ikuti langkah-langkah berikut saat menambahkan komponen:
- Pergi ke sisi kiri ruang kerja dan pilih lapisan yang ingin Anda tambahkan ke komponen sambil menekan tombol shift.
- Kemudian, klik ikon komponen, yang menggabungkan berlian kecil di bagian atas halaman, untuk mengelompokkan lapisan bersama-sama.
Anda akan melihat bahwa kedua lapisan akan menyatu menjadi satu lapisan dengan nama baru: ‘Komponen 1.’ Anda dapat mengganti namanya dengan mengklik dua kali pada nama tersebut.
- Berikutnya, buat ikon komponen atau contoh komponen.
Hal ini mengacu pada penggunaan iterasi komponen dalam desain Anda yang tidak ada dalam komponen awal.
Untuk membuat ikon komponen, klik panel Aset , tab di samping menu Lapisan di sisi kiri halaman.
Pilih dan seret nama komponen ke kanvas untuk membuat sebuah instance. Anda dapat mengedit ikon komponen, yang tidak akan terlihat di aslinya.
Seperti gaya, Anda dapat menyimpan komponen untuk file atau proyek lain.
Klik di mana saja pada kanvas dan pilih panah bawah di samping nama berkas di bagian atas halaman.
Dari menu tarik-turun, klik Publikasikan pustaka dan ikuti petunjuk di layar untuk menerbitkan komponen ke pustaka tim.
Namun, fitur ini hanya tersedia untuk pengguna Pro atau Enterprise.
Namun, dalam menyederhanakan proses Anda, ada hal lain yang dapat Anda lakukan…
#6 Buat tata letak otomatis
Tata letak otomatis adalah fungsi yang memungkinkan Anda membuat bingkai dinamis yang mengembang atau menyempit saat Anda mengubah konten di dalamnya.
Ini akan membantu Anda menghindari penyesuaian bingkai berulang kali. Anda juga dapat melihat apakah desain Anda sesuai dengan kenyataan hanya dengan satu klik.
Untuk memulai, ubah lapisan ke tata letak otomatis:
- Tulis teks Anda seperti yang kami tunjukkan pada Langkah 3 di atas
- Tekan Shift+A untuk membuat bingkai tata letak otomatis di sekitar teks. Anda akan melihat kotak Bingkai 1 muncul di sekitarnya.
Saat Anda mengubah konten, kotak tersebut otomatis berubah ukuran.
Tata letak otomatis bersarang
Figma juga memungkinkan Anda menyusun tata letak otomatis, artinya Anda dapat memiliki bingkai di dalam bingkai untuk antarmuka pengguna atau desain UI yang lebih menarik.
Untuk menyusun tata letak otomatis, Anda harus memiliki beberapa elemen atau objek yang ingin digabungkan.
Pilih mereka, tekan shift+A, dan Anda akan memiliki tata letak otomatis bersarang.
Seharusnya menyertakan bingkai induk dan bingkai anak.
Dan itu saja untuk tata letak otomatis!
Tahukah Anda bagaimana Anda dapat melakukan uji kendara pada mobil yang hendak Anda beli?
Nah, Anda bisa melakukan hal yang sama untuk desain antarmuka Anda. Namun di Figma, ini disebut pengujian prototipe, yang akan kita bahas selanjutnya.
#7 Uji prototipe
Baik Anda mendesain aplikasi seluler, halaman arahan, atau situs web, Anda dapat menguji pengalaman pengguna kedua proyek tersebut di platform Figma secara real-time. Pengujian akan membantu Anda mengetahui apa yang perlu ditingkatkan.
Untuk memulai pengujian, buka menu Properti di sisi kanan halaman. Klik tab Prototipe di bagian atas panel.
Hal pertama yang mungkin Anda lihat adalah pilihan untuk memilih jenis perangkat yang ingin Anda lihat pratinjau desainnya.
Jika Anda sudah memilih perangkat yang Anda rancang saat membuat bingkai, Anda tidak akan melihat opsi itu.
Untuk melanjutkan, klik tanda + di samping titik awal Aliran.
Ini akan menempatkan teks Alur 1 di pojok kiri atas bingkai pertama untuk menunjukkannya sebagai titik awal alur desain. Jika Anda tidak ingin bingkai yang dipilih sebagai titik awal, klik kanan nama bingkai dan pilih Hapus titik awal .
Setelah memilih titik awal, Anda harus memilih hotspot dari bingkai awal. Hotspot adalah area atau elemen yang harus diklik pengguna untuk diarahkan ke halaman berikutnya.
Untuk memilih hotspot, arahkan kursor ke elemen yang diinginkan dan lihat lingkaran biru di tepinya.
Saat mouse Anda berada tepat di atas lingkaran, tanda plus akan muncul. Klik dan seret hotspot (+) untuk menghubungkannya ke layar berikutnya. Tampilannya akan seperti ini:
Setelah membuat koneksi, Anda akan melihat panel detail Interaksi .
Di sana, Anda dapat memilih jenis interaksi untuk hotspot. Misalnya, pilih “Saat diketuk” jika Anda ingin pengguna mengetuk hotspot untuk membuka halaman berikutnya. Anda juga dapat memilih animasi dari menu untuk menampilkan transisi antara kedua layar.
Sekarang, Anda dapat membuat lebih banyak koneksi dengan memilih hotspot di layar kedua yang, saat pengguna mengetuknya, akan terhubung kembali ke layar pertama.
Setelah selesai, Anda dapat melihat pratinjau desain web atau aplikasi dengan mengeklik tombol Putar di sudut kanan atas layar.
Jika Anda merasa nyaman dengan desain akhir, hanya ada satu langkah tersisa: undang anggota tim atau pemangku kepentingan lainnya untuk berkolaborasi.
Langkah #8: Bagikan proyek dan berkolaborasi
Berbagi proyek dengan tim Anda, alias serah terima pengembang, mudah dilakukan di Figma. Cukup klik tombol Bagikan di pojok kanan atas halaman.
Lalu, masukkan email pengguna atau kolaborator lain yang ingin Anda bagikan.
Cara pintasnya adalah dengan menyalin tautan dan membagikannya kepada para pemangku kepentingan. Jika Anda memilih opsi ini, perbarui pengaturan keamanan ke ” Siapa pun yang memiliki tautan” .
***
Dan dengan itu, kita sampai pada akhir tutorial ini.
Wah, banyak sekali! Tapi kami yakin Anda mendapatkan banyak manfaat dari panduan ini.
Tinggal satu hal lagi, dan kita bisa mengakhiri harinya.
Menyimpulkan
Sejauh ini, Anda telah mempelajari cara menggunakan Figma untuk desain, model, dan sebagai alat pembuatan prototipe.
Apa yang Anda butuhkan, selain itu, adalah proses desain yang lebih ramping yang dapat membantu Anda mendapatkan umpan balik kontekstual yang jelas pada visual Anda.
Sementara Figma memungkinkan Anda menambahkan komentar, Anda dapat melakukan lebih banyak hal dengan MarkUp.io .
Lebih khusus lagi, Anda dapat mengoptimalkan ulasan, menerapkan umpan balik, dan melacak komentar saat Anda menyelesaikannya.
Klien yang mungkin belum terbiasa dengan alat desain yang Anda gunakan juga akan lebih mudah memahaminya. Klaim uji coba gratis 30 hari dengan MarkUp.io untuk membuktikannya sendiri.
