Menguasai Alat Desain Figma: Kiat dan Cara Berguna

Diterbitkan: 2019-03-26

Setiap orang yang pernah bekerja dengan Google Documents tahu betapa nyamannya itu — mudah untuk mengedit, berkolaborasi, dan menyimpan file Anda di web. Bagaimana jika desainer web memiliki alat yang sama untuk proyek mereka? Yah, mereka sebenarnya punya satu dan itu Figma. Dalam ulasan Figma ini, kami akan memandu Anda melalui fitur paling cemerlang dari platform yang menjadikannya alat pilihan para desainer.

Apa itu Figma?

Figma adalah alat desain berbasis cloud yang, tidak seperti alat desain populer lainnya yang bekerja secara eksklusif di Mac OS atau Windows, juga dapat beroperasi di Linux. Dengan demikian platform ini memungkinkan kolaborasi desainer yang menggunakan sistem operasi yang berbeda dan perlu menghasilkan kode SVG, CSS, dan kode iOS atau Android untuk pekerjaan mereka.

Platform ini memungkinkan penggunanya untuk membuat desain, membuat prototipe, dan mengumpulkan umpan balik semua satu platform.

Mengapa menggunakan Figma

Sebelum kita beralih ke keindahan alat desain Figma, mari kita lihat apa yang membuat platform ini begitu menarik bagi para desainer.

  1. Ini berbasis web. Figma berjalan di browser Anda dan Anda dapat mengerjakan proyek Anda tanpa harus menyimpannya sebagai file terpisah ke komputer Anda — semua pengeditan otomatis disimpan ke cloud Anda. Tapi ingat, Anda memerlukan koneksi internet aktif untuk menyimpan semua perubahan.
  2. Hal ini memungkinkan kerja tim . Dengan Figma, Anda dapat memiliki tim yang terdiri dari dua hingga jumlah editor yang tidak terbatas, semuanya tergantung pada paket harga Anda. Anda akan selalu dapat melihat berapa banyak anggota tim yang mengerjakan satu proyek dan perubahan apa yang mereka buat.
  3. Ini gratis untuk desainer solo. Semua fitur benar-benar gratis untuk digunakan tanpa masa percobaan.

Secara keseluruhan, Figma memiliki tiga paket harga. Mari temukan fungsionalitas mana yang disediakan platform untuk masing-masing fungsi tersebut.

Paket harga Figma

Starter Profesional Organisasi
Gratis

Gunakan paket ini untuk menguji platform dan rasakan fungsionalitas dasarnya: pembuatan prototipe, atribut kode, komentar, ruang penyimpanan tak terbatas dan pemirsa tak terbatas, Impor sketsa, dan berbagai format file untuk diimpor.

$12 per editor/bulan

Beralih ke paket berikut jika proyek Anda memerlukan pengeditan dan pembagian tim. Dengan paket ini, Anda dapat menikmati editor, proyek, dan pemirsa gratis dalam jumlah tak terbatas, serta riwayat dan penyimpanan versi tak terbatas. Anda juga dapat membuat proyek dan sistem pribadi dengan komponen UI bersama yang dapat digunakan seluruh tim.

$45 per editor/bulan

Tingkatkan ke paket ini dan nikmati fungsionalitas yang lebih luas: jumlah tim yang tidak terbatas, kepemilikan draf, kontrol akses tautan, atau font bersama. Anda akan dapat menggali lebih dalam dengan kontrol akun yang dijamin oleh laporan log aktivitas, manajemen anggota terpusat, sistem masuk tunggal (SSO), dan penyediaan jarak jauh dengan penyedia identitas organisasi.

Memulai dengan Figma

Setelah mendaftar, pengguna menerima email selamat datang dengan tautan yang diperlukan untuk orientasi: pusat bantuan, tutorial video, forum, dan sumber daya yang berguna.

figma welcome email
Selamat datang email dari Figma

Selain itu, ketika pengguna mulai bekerja dengan alat ini, mereka ditawari panduan platform cepat. Anda berdua dapat bekerja secara online, dan mengunduh Figma versi desktop untuk mengatur alur kerja Anda secara offline. Faktanya, antarmukanya cukup intuitif, dengan Panel Lapisan, yang mencakup elemen proyek Anda, bilah alat dengan alat dan opsi yang tersedia, dan Panel Properti semuanya di sisi kanan.

figma interface
Antarmuka Figma

Sekarang mari kita uraikan fitur dan opsi Figma yang paling menonjol dan lihat bagaimana Anda dapat menerapkannya.

Fitur Figma dan opsi yang berguna

Pembuatan prototipe

Figma memungkinkan Anda membuat versi situs web atau aplikasi yang dapat diklik dengan membuat layar sebanyak yang Anda butuhkan. Dengan cara ini, Anda dapat menguji, mengedit, atau menyesuaikan fitur apa pun fungsionalitas tombol, rollover elemen, animasi jendela modal tanpa harus beralih antar tab. Anda akan dapat membuat koneksi dan hotspot untuk desain Anda untuk mensimulasikan tampilannya dalam pengaturan nyata.

Cukup beralih ke Prototipe di Panel Properti dan mulai membuat jalur dan interaksi.

figma prototyping
Membuat interaksi antar elemen menggunakan Figma Prototyping Mode

Komponen

Ini adalah elemen UI yang dapat digunakan kembali di seluruh proyek Anda. Fitur ini memungkinkan Anda membuat komponen simetris dengan membaliknya atau mengulangi pola dengan menyusun komponen. Anda dapat membuat komponen dari tombol, bidang, atau menu. Untuk membuat komponen Master, klik tombol Buat Komponen di Menu Opsi atau klik kanan pada layer dan pilih opsi Buat Komponen.

Anda dapat menggunakan kembali Komponen Master dengan membuat Instance. Anda juga dapat membuat komponen ini dari elemen UI seperti warna, blok, tombol, bentuk, dan halaman arahan sebagai komponen terpisah.

Untuk membuat Komponen Instance, pilih Komponen Master, tahan hotkey (Alt atau D untuk Windows dan Mac OS masing-masing), seret instance dari komponen dan salin ke lokasi lain jika perlu.

figma components
Membuat komponen instan

Ingat, Instans yang Anda buat ditautkan ke komponen Master, artinya semua perubahan yang Anda buat pada yang terakhir akan berlaku untuk semua yang sebelumnya. Misalnya, dengan memperbarui bentuk atau warna tombol di Komponen Utama, Anda akan memperbarui komponen turunannya di seluruh desain situs web Anda.

Jaringan Vektor

Fitur Figma ini memungkinkan Anda untuk membuat bentuk vektor yang kompleks karena Anda tidak lagi dibatasi oleh hanya dua garis yang berasal dari dua titik. Anda dapat menggunakan alat pena untuk menggambar garis ekstra dari titik mana pun dari bentuk yang telah Anda buat.

figma vector networks
Jaringan Vektor sedang digunakan

Selain itu, Vector Networks dapat memudahkan rutinitas HTML Anda karena Anda dapat menyalin kode SVG dari sumber eksternal dan menempelkannya sebagai lapisan vektor langsung ke Figma. Anda juga dapat menyalin vektor Figma sebagai kode SVG. Untuk melakukannya, cukup klik kanan pada elemen, pilih salin sebagai SVG, dan tempel kode ke HTML atau proyek web apa pun yang Anda buat.

Komentar, pengeditan, dan berbagi bawaan

Dengan Figma, Anda dapat membuat tim dan memilih izin untuk dilakukan oleh setiap anggota tim dengan proyek Anda: baik melihat atau melihat dan mengedit juga. Anda juga dapat melihat bagaimana anggota tim memperbarui atau mengubah desain secara real time.

figma editing
Pengeditan tim waktu nyata

Tim Anda dapat memberikan umpan balik atau mendiskusikan elemen apa pun dari proyek langsung di area kerja dan menyematkannya di mana saja di kanvas, seperti di Google Documents. Untuk meninggalkan komentar Anda, pilih balon bicara di menu atas, klik elemen yang ingin Anda komentari, dan tulis tanggapan Anda.

figma commenting
Mengomentari proyek yang dibuat dengan alat desain Figma

Kontrol versi

Dengan Figma, Anda dapat melacak riwayat setiap kolaborator dan bahkan memutar kembali ke versi sebelumnya. Layanan secara otomatis menyimpan versi ketika pengguna menutup tab dengan proyek atau jika tidak ada perubahan yang dibuat dalam waktu 30 menit. Untuk mendapatkan akses cepat ke opsi ini, pilih ikon tarik-turun di sebelah kiri nama proyek di bilah alat. Anda akan melihat riwayat versi di sebelah kanan Anda dengan opsi untuk memberi nama, memulihkan, atau menduplikasi versi tertentu.

figma version history
Menu riwayat versi

Alat desain Figma beraksi

Setelah mengenal platform dan fungsinya, kami memutuskan untuk mencoba opsi desain Figma dan membuat halaman sederhana untuk eBook. Pertama, kita klik tanda “+” di menu atas. Setelah itu, kami mengklik ikon "Bingkai" di bilah alat untuk membuat bingkai dan mengatur desain kami di kanvas. Selanjutnya, kami mengisi proyek kami dengan lapisan yang diperlukan — blok teks, persegi panjang, dan gambar — dan mengonfigurasi semua ruang di antara elemen.

Inilah yang berhasil kami buat:

figma design example
Halaman e-book yang dibuat dengan alat desain Figma

Ingatlah bahwa Anda tidak akan dapat membuat cetakan yang berkualitas, karena platform tidak memiliki palet utama untuk melukis — palet CMYK — atau sakelar ukuran antara milimeter dan sentimeter.

Pengambilan terakhir

Figma terasa seperti alat yang telah dipikirkan dengan cermat oleh desainer untuk desainer. Platform memungkinkan Anda untuk

  • bekerja online dan simpan desain Anda di cloud tanpa harus bergantung pada penyimpanan komputer Anda;
  • membuat desain pada berbagai sistem operasi;
  • berkolaborasi dengan tim secara real-time, berkomentar, mengedit, dan berbagi file;
  • nikmati fungsionalitas yang berguna seperti pembuatan prototipe, jaringan vektor, pembuatan komponen, dan instansnya untuk mengedit, menguji, menyesuaikan desain Anda, dan memperluas kemungkinannya.

Kami berharap ulasan Figma kami telah membersihkan trik di dalam platform dan Anda cukup terinspirasi untuk mencobanya. Buat desain Anda dengan Figma dan proyek pemasaran dengan SendPulse. Sampai ketemu lagi!