Tutorial Mini – Memanfaatkan Fitur Figma untuk Seluruh Proses Desain

Dunia alat desain yang muncul sangat menarik. Program-program baru yang menjanjikan diluncurkan secara berurutan dengan cepat, tetapi ada satu program khusus yang perlahan-lahan menjadi pilihan terbaik untuk tim desain yang lebih besar dan sebagian besar terdistribusi.

Figma memiliki potensi untuk mendukung seluruh proses desain dari ujung ke ujung. Sketsa pertama, pengumpulan umpan balik, kolaborasi, prototipe siap uji, dan handoff pengembang berada dalam kemampuannya. Figma juga menyederhanakan pekerjaan manajer produk dan pimpinan desain, serta semua pemangku kepentingan lainnya.

Jadi, apa yang membedakan Figma dari kompetisi? Ada beberapa aspek kunci, tetapi semuanya dapat ditelusuri kembali ke fakta bahwa Figma berbasis web. Ini menimbulkan banyak keraguan ketika alat ini pertama kali dirilis, tetapi pada akhirnya, ini membuka jalan bagi fleksibilitas dan fungsionalitas unik Figma.

Apa yang Mendasar untuk Proses Desain Produk yang Lancar?

Meskipun benar bahwa setiap tim dan proyek mungkin memiliki alur kerja yang berbeda, ada fungsi dan fase yang merupakan komponen penting dari desain dan manajemen produk. Figma mencakup masing-masing.

1. Aksesibilitas dan kolaborasi . Apa pun alat yang digunakan tim, perlu ada cara untuk bekerja sama, mempresentasikan proyek, mengumpulkan umpan balik, dan menjaga agar pemangku kepentingan tetap terhubung. Semua fitur ini tersedia di Figma.
2. Fleksibilitas untuk mengulangi dan menghasilkan kiriman . Figma fleksibel dan dapat digunakan sebagai papan tulis kolaboratif untuk membuat sketsa ide awal dan mengulangi semuanya, mulai dari gambar rangka hingga mockup fidelitas tinggi.
3. Kemampuan untuk membangun prototipe dan pengujian . Mendesain aplikasi seluler? Bangun dan publikasikan prototipe interaktif dan uji langsung di ponsel cerdas—semuanya dari Figma.
4. Menetapkan satu sumber kebenaran . Figma adalah cara terbaik untuk mendefinisikan sistem desain produk yang sepenuhnya online. Ini adalah satu-satunya sumber kebenaran secara default. Tidak ada lagi yang bertanya-tanya, “Apakah ini versi terbaru?”
5. Serah terima halus . Cukup bagikan tautan dengan pengembang, dan mereka akan memiliki akses ke semua informasi yang diperlukan untuk mengimplementasikan desain–garis merah, pengukuran, dan aset grafis yang siap diekspor.
6. Fleksibilitas untuk disesuaikan dan ditingkatkan . Plugin API Figma memungkinkan tim untuk menulis plugin mereka sendiri atau memanfaatkan komunitas pengguna yang lebih luas dan memperluas alat dengan fungsionalitas baru.

1. Aksesibilitas dan Kolaborasi

Dapatkan Tim di Papan

Mari kita lihat lebih dekat bagaimana Figma berkontribusi pada enam area utama yang dibahas di atas. Pengguna baru mungkin ingin membuat akun Figma gratis, membentuk tim, dan menonton mulai menggunakan Figma. Setelah tim dibuat, undang anggota tim dan pemangku kepentingan terkait untuk bergabung.

Ada tiga tingkat akses yang tersedia. Ini cukup jelas, tetapi biasanya, hak edit diberikan kepada tim desain dan hak melihat kepada orang lain. Ini termasuk pengembang dan pemangku kepentingan lainnya yang harus dapat mengikuti proses desain dan memberikan umpan balik.

Opsi berbagi serupa tersedia di tingkat tim (ditampilkan di atas), tingkat proyek, dan tingkat file. Jika tingkat akses tidak ditentukan, mereka menyebar dari tim ke proyek dan dari proyek ke file.

Karena Figma tersedia di browser, tidak masalah bagaimana seseorang diundang atau sistem apa yang mereka gunakan. Selama perangkat dan browser yang mereka gunakan memenuhi persyaratan minimum, mereka dapat langsung masuk dengan tautan, dan antarmuka berubah sesuai dengan apakah mereka memiliki hak edit atau lihat.

Menyematkan File Proyek

File proyek Figma dapat disematkan dalam perangkat lunak pihak ketiga. Misalnya, dokumen Dropbox Paper yang dibagikan dapat digunakan untuk menyajikan status proyek saat ini.

Untuk menyematkan file proyek, atur visibilitas file ke Siapa saja yang memiliki tautan - dapat melihat , menyalin kode sematan, dan menyematkan file proyek di perangkat lunak pihak ketiga mana pun yang mendukung embed.ly.

Umpan Balik dan Revisi

Fungsionalitas kunci lainnya untuk proses desain produk adalah kemampuan untuk mendistribusikan desain, mengumpulkan umpan balik, dan mengelola revisi. Siapa pun yang memiliki tautan Figma dapat melihat versi terbaru dan berkomentar langsung tentang poin yang ingin mereka beri masukan.

Untuk menandai anggota tim, gunakan karakter @, dan sistem akan menampilkan daftar nama yang dapat dipilih. Melakukannya akan memberi tahu anggota tim, dan setelah umpan balik diproses, diskusi dapat ditutup dengan mengklik Selesaikan .

Untuk menjaga keselarasan tim, ada integrasi bagus yang dapat mempublikasikan diskusi dari file Figma di saluran Slack yang ditentukan.

Kolaborasi Real-time Nyata

Salah satu fungsi yang lebih menarik dari Figma adalah apa yang mereka sebut multipemain . Ini memungkinkan beberapa anggota tim untuk membuka dan mengerjakan file desain secara bersamaan. Semua orang yang mengerjakan file terlihat di kanan atas halaman, dan avatar mereka diberi nama dan dapat diklik.

Perlu beberapa waktu untuk memahami apa artinya ini secara praktis. Meskipun tidak mungkin bahwa desainer akan menggunakan multipemain untuk bekerja secara bersamaan pada bagian file yang sama, sangat nyaman untuk tidak perlu khawatir tentang konflik versi file, terutama untuk tim terdistribusi yang lebih besar.

Multiplayer sangat berguna saat melakukan presentasi dari jarak jauh karena memungkinkan semua orang yang terhubung ke file untuk mengikuti viewport presenter. Ini juga memungkinkan tim untuk melewati program tambahan dan menggunakan Figma sebagai papan tulis online (meskipun solusi spesifik, seperti Miro, pada akhirnya mungkin lebih cocok untuk pekerjaan itu).

Untuk tujuan ini, disarankan untuk membuat komponen khusus untuk mereplikasi aset tertentu sebagai catatan tempel virtual atau elemen diagram.

2. Fleksibilitas untuk Iterasi dan Menghasilkan Hasil Kerja

Setelah anggota tim diundang dan sketsa awal sedang berlangsung, Figma dapat digunakan untuk melakukan iterasi. Alasan utama Figma dibuat adalah desain antarmuka—dengan papan tulis selesai, tim dapat berpindah ke peta alur dan gambar rangka. Sekali lagi, adalah cerdas untuk membangun pustaka komponen yang dapat digunakan kembali untuk tugas-tugas ini. Koleksi template resmi memberikan inspirasi dan pengaturan desain untuk memulai.

3. Kemampuan Membangun Prototipe dan Menguji

Cukup mudah untuk membuat prototipe interaktif dengan Figma. Ketika file Figma dibuka dengan hak pengeditan, dimungkinkan untuk beralih antara mode desain dan prototipe. Setelah dalam mode prototipe, dimungkinkan untuk mengklik elemen untuk membuatnya interaktif, baik dari panggung atau bilah sisi lapisan.

Dengan elemen yang dipilih dalam mode Prototipe, sebuah lingkaran kecil muncul di samping. Saat diseret, garis biru muncul, dan dapat dijatuhkan di layar atau status untuk menunjukkan hasil interaksi.

Transisi umum tersedia di Figma, membuatnya lebih mudah untuk membuat prototipe fidelitas tinggi. Bahkan, tim Figma baru-baru ini merilis fitur smart animate dan drag trigger. Aspek animasi cerdas menginterpolasi gerakan elemen serupa, sementara pemicu seret adalah jenis interaksi baru. Keduanya secara drastis meningkatkan kualitas prototipe interaktif.

Pengujian Pengguna

Sekali lagi, hanya tautan yang diperlukan untuk mendistribusikan prototipe Figma, bahkan untuk pengujian pengguna. Mengklik ikon putar kecil di kanan atas meluncurkan prototipe, dan URL baru dibuat. Anda dapat menyalin URL atau menggunakan tombol Bagikan Prototipe berwarna biru. Setelah pengguna membuka tautan, mereka disajikan dengan prototipe interaktif dan dapat meninggalkan komentar jika diinginkan.

Pengujian di Seluler

Desain untuk perangkat seluler disajikan dengan mockup perangkat aktual yang mengelilingi prototipe. Jika diperlukan lebih banyak realisme untuk menguji interaksi, sebaiknya unduh aplikasi Figma Mirror untuk pengujian khusus perangkat.

4. Membangun Satu Sumber Kebenaran

Riwayat Versi

Bukankah lebih bagus jika file proyek selalu terkini dan terus-menerus dicadangkan? Fungsionalitas ini disertakan dalam Figma secara default. Setiap file disimpan secara otomatis saat mengerjakannya, dan Figma membuat entri baru dalam riwayat versi setelah 30 menit tidak aktif. Log dari semua versi yang disimpan secara otomatis dibuat, dan setiap versi dapat dipulihkan jika diperlukan.

Tentu saja, pembuatan versi otomatis bukan satu-satunya pilihan untuk menyimpan pekerjaan. Dimungkinkan untuk menyimpan versi secara manual atau mengedit versi tertentu dalam riwayat versi.

Sistem Desain dan Pustaka Komponen

Aspek lain di mana Figma bersinar adalah bagaimana memungkinkan desainer membuat, mengatur, dan mendistribusikan perpustakaan komponen. File apa pun dapat diterbitkan sebagai pustaka, dan setiap warna, gaya teks, efek, kisi, atau komponen tersedia untuk digunakan dalam file Figma lainnya.

Saat perubahan dilakukan pada elemen apa pun di pustaka, pengeditan dapat dipublikasikan dan disebarkan ke file yang menggunakan elemen tersebut. Desainer yang mengerjakan file-file ini kemudian dapat memutuskan untuk menerima pengeditan atau tidak.

Kemampuan untuk memutuskan bagaimana mendistribusikan perpustakaan, dikombinasikan dengan opsi untuk mengaktifkan visibilitas atau ketidaktampakan elemen perpustakaan, membuat seluruh pengalaman menjadi lancar dan kuat.

Komponen dan pustaka dapat disarangkan untuk membuat sistem desain yang canggih di mana semuanya berversi dan mutakhir untuk semua orang yang terlibat. Dan semua komponen dapat dijelaskan dengan komentar.

5. Handoff Halus

Serah Terima Pengembang

Dengan Figma, desainer dan pengembang tidak memerlukan alat terpisah, seperti Zeplin, untuk mengelola handoff. Mereka cukup membuka file dan beralih ke mode Kode di bilah sisi kanan, bahkan dengan akses hanya lihat.

Saat mode Kode aktif, memilih elemen di panggung akan mengungkapkan semua informasi relevan yang diperlukan untuk implementasi, dan semua informasi lain mengenai posisi komponen dalam kaitannya dengan elemen lain terlihat. Seperti solusi serupa, kode yang dihasilkan tidak dimaksudkan untuk sepenuhnya disalin, tetapi memiliki akses yang mudah akan sangat membantu.

6. Keserbagunaan untuk Disesuaikan dan Ditingkatkan

API Figma dan Plugin Kustom

API dan sistem plugin Figma memudahkan berbagai tim desain dan disiplin ilmu untuk menyesuaikan program untuk kebutuhan proses spesifik mereka. Fleksibilitas Figma memberi pengguna kemampuan untuk berinteraksi secara terprogram dengan platform. Beberapa contoh:

Menggunakan Data Nyata

Sangat berharga untuk dapat menggunakan data nyata dalam maket dan prototipe, dan Figma memungkinkannya dengan mengizinkan konten dari sumber eksternal untuk diimpor. Dengan memanfaatkan konten nyata, dimungkinkan untuk menguji komponen desain, menjaga mockup terkini, dan melibatkan tim yang tidak terkait dengan desain.

Sebuah plugin bernama Google Sheets Sync adalah contoh sempurna dari apa yang dapat dilakukan. Plugin ini mempermudah integrasi Google Sheets sebagai sumber untuk mengisi dan menyinkronkan konten komponen dalam file Figma.

Alur Kerja Lanjut

Kemampuan untuk menempatkan sistem desain dalam program desain UI hanya berharga jika sistem diterapkan secara konsisten di layar yang menghadap pelanggan. Untungnya, ada Figma API, plugin, dan integrasi yang dapat membantu.

Addon Storybook menyinkronkan file Figma dan menampilkan komponen desain Figma di panel bersama komponen yang diimplementasikan. Kasus penggunaan menarik lainnya adalah Figma to React Converter, peningkatan alur kerja yang mengubah komponen Figma menjadi kode.

Fitur Figma Ideal untuk Seluruh Proses Desain

Tidak ada program desain tunggal yang dapat menangani kebutuhan setiap desainer atau masalah desain, dan itu hal yang baik. Persaingan di antara alat desain menguntungkan bagi desainer. Ini memastikan bahwa perusahaan yang membuat alat kami mendengarkan apa yang kami butuhkan dan memberi kami fitur terbaru yang sesuai untuk pekerjaan yang kami lakukan.

Konon, Figma adalah alat canggih namun intuitif yang telah membuktikan dirinya lebih dari mampu menangani seluruh proses desain digital. Perancang individu dan tim sama-sama dapat memperoleh manfaat dari fitur kolaborasi dan iterasi yang unik, dan jika program gagal, banyak pilihan plugin mengisi kekosongan.

• • •

Bacaan lebih lanjut di Blog Desain Toptal:

• Kekuatan Figma sebagai Alat Desain
• Figma vs. Sketch vs. Axure – Tinjauan Berbasis Tugas
• Tutorial Mini – Bekerja dengan Komponen Tombol Figma
• Kuasai Kerajinan Anda dengan Alat UX Teratas Ini
• Desain dengan Presisi – Ulasan Adobe XD