Seberapa Membantukah Figma Plugins?
Berbagai pekerjaan di dunia ini apapun bidangnya, baik pekerjaan white-collar yang mengacu pada pekerjaan yang umumnya dilakukan di kantor, ataupun pekerjaan blue-collar yang mengacu pada pekerjaan fisik yang lebih banyak dilakukan di lapangan, pasti memiliki banyak tantangan dan membutuhkan alat yang dapat membantu menyelesaikan proses pekerjaan lebih efisien. Mengapa? Karena pekerjaan yang lebih efisien menghasilkan percepatan dari sisi waktu dengan tetap menjaga kualitas proses dan hasil.
Hal ini juga sangat dirasakan oleh pengguna software digital pada profesi designer. Mencari dan menggunakan software yang tepat menjadi sangat penting untuk memudahkan pekerjaan sebagai UI/UX Designer. Dengan mempertimbangkan interface, fungsi, dan kemudahan setiap toolsnya. Selain itu, menggunakan alat tambahan juga menjadi hal yang perlu untuk dipertimbangkan dalam memudahkan proses pengerjaan design.
Saat ini, software pilihan yang paling banyak digunakan oleh mayoritas UI/UX Designer di seluruh dunia adalah Figma. Berdasarkan data dari Contrary Research, pada tahun 2024 ini pengguna Figma telah mencapai 4 juta pengguna dan 75% designers produk pada tahun 2023 memilih Figma sebagai pilihan utama software untuk design. Selain karena Figma memiliki interface, fungsi, dan kemudahan tools yang maksimal, Figma juga memiliki segudang alat tambahan yang disebut sebagai plugin. Plugin merupakan tools yang dapat memperluas fungsionalitas dan mempercepat proses design. Mereka memberikan fitur-fitur khusus yang tidak tersedia secara bawaan dalam software Figma.
Mengapa ada segudang plugins? Karena plugins yang tersedia cukup banyak dan rata-rata disediakan oleh pengembangnya secara bebas dan terbuka. Dari data Contrary Research, pada tahun 2019, Figma Community diluncurkan sebagai platform sumber terbuka bagi para designer untuk menerbitkan dan berbagi berkas dalam domain publik. Para pengguna dapat menerbitkan dan menggunakan aset seperti widget, template, dan bahkan plugins. Pelanggan yang menerbitkan aset-aset ini dapat menawarkannya secara gratis atau sebagai sumber daya berbayar, di mana Figma mengambil 15% dari penjualan.
Siapa yang tidak tertarik dengan ketersediaan plugins yang lengkap seperti Figma? Tentunya, dengan plugin yang lengkap dan beragam, Figma dapat menjadi aplikasi yang primadona bagi UI/UX Designer untuk bisa melakukan proses design dengan efektif dan efisien tanpa mengurangi kualitasnya. Mulai dari plugin yang memiliki fungsi dasar seperti Styler untuk generate style dasar untuk warna dan teks, hingga plugin yang memiliki fungsi spektakuler seperti Charts Generate yang mampu membuat diagram berdasarkan data yang nyata dan memiliki tipe chart yang beragam sesuai dengan kebutuhan.
Di Badr Interactive, proses pengerjaan sebuah design baik itu aplikasi secara keseluruhan ataupun hanya beberapa fitur saja, tidak lepas dari penggunaan plugins sebagai alat bantu yang esensial. Secara kolaboratif, kami mengumpulkan berbagai daftar plugins Figma dalam satu file repositori untuk menunjang kemudahan kami dalam menemukan plugin yang bisa digunakan oleh tim. Hal ini kami lakukan agar plugin yang biasa kami gunakan dapat terdokumentasi dengan baik mulai dari nama, deskripsi, dan link plugin tersebut.
Inilah beberapa plugin yang sangat powerful untuk membuat pekerjaan kami lebih efektif dan efisien:
Plugin untuk Review Kontras Warna
Dalam pembuatan UI design, ada standar-standar yang perlu diperhartikan. Salah satunya standar penggunaan warna agar sesuai dengan panduan warna kontras. Kami terbiasa mengatur standar sesuai dengan panduan kontras warna WCAG (Web Content Accessibility Guidelines). Untuk menjaga kualitas dan standar warna tersebut, kami menggunakan plugin yang bernama Contrast. Plugin contrast memudahkan kami mengecek apakah komponen atau UI yang kami buat sudah sesuai dengan standar kontras WCAG. Hasil pengecekan akan menunjukkan suatu komponen sudah layak standar atau belum berdasarkan 3 variabel, yaitu: Normal text, Large text, dan Graphics.
Plugin untuk Penggunaan Interactive Notes
Proses yang cukup penting dalam menyelesaikan sebuah design adalah bagaimana mengirim & menyelesaikan design dengan baik kepada tim teknis ataupun stakeholders. Maka dari itu, seringkali kami menambahkan catatan khusus di dalam UI yang sudah dibuat. Kami menggunakan plugin/widget bernama Notes. Berfungsi untuk memberikan anotasi khusus untuk menjelaskan bagian-bagian kecil pada sebuah design agar bisa dipahami dengan baik oleh audience.
Plugin untuk Penggunaan di Presentasi Mockup
Presentasi mockup masih menggunakan tampilan biasa? Padahal, Figma udah punya banyak alternatif plugins yang bisa digunakan untuk membuat mockup dengan mudah karena memiliki banyak varian bentuk dan ukuran mulai dari ukuran mobile hingga ukuran layar PC. Salah satu plugins yang kami gunakan adalah Mockup Plugin. Penggunaannya sangat mudah, hanya perlu menyeleksi bentuk device yang tersedia, lalu pilih frame UI yang akan dibuat mockup-nya, kemudian plugin tersebut akan generate mockup dan tampil di layar kerja Figma.
Plugin untuk Membuat Chart Diagram
Salah satu tantangan yang cukup rumit bagi UI/UX Designer adalah membuat komponen atau tampilan chart diagram. Bagaimana kita dapat menyajikan sebuah tampilan diagram yang sesuai dengan data dan memilih bentuk diagram yang tepat guna. Ada beberapa plugins untuk membuat chart diagram, salah satunya yaitu Charts Generate. Plugin ini mampu membantu kita dalam menggenerasi diagram dengan berbagai bentuk dan tipe, dan kustomisasi data yang beragam.
Plugin untuk Generate Dummy Content
Masih sering bingung bagaimana melengkapi konten pada UI Design? Kami cukup sering menggunakan plugin yang powerful ini, namanya Content Reel. Yap, sebuah plugin yang digunakan untuk membuat dummy content pada design, agar design kita selalu punya konteks dan tidak lagi menggunakan konten “lorem ipsum”. Plugin ini berupa koleksi konten dummy yang bisa langsung digunakan ke dalam layout atau placeholder yang telah dibuat. Bahkan, yang membuat plugin ini bermanfaat banget adalah, bisa membuat koleksi sendiri sehingga kita memiliki koleksi konten yang sesuai dengan case di proyek masing-masing, contohnya, saat membuat design halaman untuk daftar rumah sakit, lalu kita membuat koleksi nama rumah sakit secara random, dan hasilnya langsung bisa digunakan untuk dummy content pada layout UI kita. Mudah bukan?
Plugin untuk Membuat Table
Dalam merancang tampilan table, biasanya membutuhkan waktu yang cukup lama dalam kustomisasi variant component untuk setiap cell-nya. Table Creator punya solusi untuk membuat table sederhana dengan hasil yang baik. Secara sederhana, kita hanya perlu jalankan plugin, lalu plugin akan membuat component variant. Setelah itu kita set kebutuhan jumlah row atau column-nya. Kemudian kita juga dapat kustomisasi style dan komponen pada table cell yang sudah dibuat tadi sesuai kebutuhan.
Plugin untuk Seleksi Layar yang Sama
Masalah yang seringkali muncul ketika mendesain UI dengan membuat banyak halaman yang serupa adalah menyeleksi komponen yang sama di semua frame. Plugin ini cukup membantu untuk melakukan hal tersebut. Namanya Similayer. Similayer ini merupakan plugin next level dari fitur “Select All with”-nya milik Figma. Dengan plugin ini, kita dapat dengan mudah menyeleksi layar yang sama atau serupa berdasarkan berbagai macam properti dengan lebih detail. Misalnya: Memilih semua komponen tertentu untuk ditukar dengan komponen lain, mengubah semua layar dengan text style tertentu ke text style yang baru, seleksi semua komponen card dengan corner radius dan warna yang sama, dll.
Plugin untuk Membuat Color Style dan Variable dengan Cepat
Mengatur skala dan palet warna dalam desain UI adalah sebuah tantangan tersendiri karena membutuhkan waktu dan kecermatan dalam memilih warna. Namun, plugin ini sangat membantu kita untuk mempercepat proses secara instan. Namanya Tailwind CSS Color Generator. Plugin ini mampu generate skala warna berdasarkan standar skala yang diimplementasi pada sebuah library yang bernama Tailwind. Mulai dari hexcode, HSL color, dan random color. Hanya perlu memilih warna sesuai yang dibutuhkan, kemudian generate menjadi color scale dengan memilih sesuai kebutuhan dokumentasi dan konfigurasi pada proyek Figma Anda apakah Anda ingin generate menjadi color style, atau color variables, atau hanya color guide saja.
