Kekuatan Figma sebagai Alat Desain

Diterbitkan: 2022-03-11

Figma adalah alat desain berbasis cloud yang mirip dengan Sketch dalam fungsi dan fitur, tetapi dengan perbedaan besar yang membuat Figma lebih baik untuk kolaborasi tim. Bagi mereka yang skeptis terhadap klaim semacam itu, kami akan menjelaskan bagaimana Figma menyederhanakan proses desain dan lebih efektif daripada program lain dalam membantu desainer dan tim bekerja sama secara efisien.

Mari kita lihat lebih dekat.

Desain antarmuka di Figma
Figma memiliki antarmuka yang familier yang membuatnya mudah untuk diadopsi.

Figma Bekerja di Semua Platform

Figma bekerja pada sistem operasi apa pun yang menjalankan browser web. Mac, PC Windows, mesin Linux, dan bahkan Chromebook dapat digunakan dengan Figma. Ini adalah satu-satunya alat desain dari jenisnya yang melakukan ini, dan di toko-toko yang menggunakan perangkat keras yang menjalankan sistem operasi yang berbeda, semua orang masih dapat berbagi, membuka, dan mengedit file Figma.

Di banyak organisasi, desainer menggunakan Mac dan pengembang menggunakan PC Windows. Figma membantu menyatukan kelompok-kelompok ini. Sifat universal Figma juga mencegah gangguan PNG-pong (di mana gambar yang diperbarui dipantulkan bolak-balik antara disiplin tim desain). Di Figma, tidak perlu mekanisme mediasi untuk membuat karya desain tersedia untuk semua orang.

Kolaborasi di Figma Sederhana dan Akrab

Karena Figma berbasis browser, tim dapat berkolaborasi seperti yang mereka lakukan di Google Documents. Orang yang melihat dan mengedit file ditampilkan di bagian atas aplikasi sebagai avatar melingkar. Setiap orang juga memiliki kursor bernama, jadi melacak siapa yang melakukan apa itu mudah. Mengklik avatar orang lain akan memperbesar apa yang mereka lihat saat itu.

Alat kolaborasi desain Figma
Saat berkolaborasi di Figma, Anda dapat mengklik avatar siapa pun untuk melihat tampilan mereka.

Kolaborasi file real-time membantu mengurangi "desain melayang"—didefinisikan sebagai salah tafsir atau menyimpang dari desain yang telah disepakati. Pergeseran desain biasanya terjadi ketika sebuah ide disusun dan diimplementasikan dengan cepat saat sebuah proyek sedang berlangsung. Sayangnya, hal ini sering menyebabkan penyimpangan dari desain yang telah ditetapkan, menyebabkan gesekan dan pengerjaan ulang.

Menggunakan Figma, seorang pemimpin desain dapat memeriksa untuk melihat apa yang sedang dirancang tim secara real time hanya dengan membuka file bersama. Jika seorang desainer entah bagaimana salah menafsirkan cerita singkat atau pengguna, fitur ini memungkinkan pimpinan desain untuk campur tangan, memperbaiki arah, dan menghemat banyak waktu yang seharusnya tidak terbuang percuma. (Sebagai perbandingan, tim yang menggunakan Sketch tidak memiliki cara langsung untuk mengetahui apakah desainer tersesat.)

Catatan tambahan: Beberapa desainer tidak suka "dimata-matai" ketika mereka sedang bekerja, jadi terserah pemimpin desain untuk menjelaskan manfaatnya. Secara umum, sebagian besar desainer dengan cepat melihat nilai dalam fitur tersebut dan dengan mudah beradaptasi untuk bekerja di lingkungan bersama.

Figma Menggunakan Slack untuk Komunikasi Tim

Figma menggunakan Slack sebagai saluran komunikasinya. Saat saluran Figma dibuat di Slack, setiap komentar atau editan desain yang dibuat di Figma "dikurangi" ke tim. Fungsionalitas ini sangat penting saat mendesain langsung karena perubahan pada file Figma akan memperbarui setiap contoh lain di mana file tersebut disematkan (potensi memusingkan bagi pengembang). Perubahan pada mockup, dijamin atau tidak, segera diperiksa, dan saluran umpan balik ditayangkan.

Komunikasi tim desain Figma di Slack
Proyek Figma dapat menggunakan saluran Slack untuk komentar berulir dalam file.

Berbagi Figma Tidak Rumit dan Fleksibel

Figma juga memungkinkan berbagi izin berbasis file, halaman, atau bingkai apa pun (disebut artboard di alat desain lainnya). Ketika tautan berbagi dibuat ke bingkai pada halaman, orang yang mengklik tautan itu akan membuka versi browser Figma, dan tampilan bingkai yang diperbesar dimuat.

Berbagi file alat desain aplikasi
Figma berbagi proyek, file, halaman, dan bingkai dengan siapa saja yang memiliki izin.

Bentuk berbagi selektif ini, dari file hingga bingkai, memungkinkan desainer, pemilik produk, dan pengembang berbagi dengan tepat apa yang dibutuhkan dalam alat pelacakan bug dan perangkat lunak komunitas seperti Confluence atau SharePoint.

File Figma Tertanam Memberikan Pembaruan Waktu Nyata

Figma juga membagikan cuplikan kode sematan langsung untuk menempelkan iFrame di alat pihak ketiga. Misalnya, jika Confluence digunakan untuk menampilkan file mockup yang disematkan, file tersebut tidak "diperbarui" dengan menyimpan file Figma—file yang disematkan itu ADALAH file Figma.

Jika perubahan dibuat pada mockup oleh siapa pun di Figma, perubahan itu dapat dilihat langsung di mockup Confluence yang disematkan. (Anda dapat membaca lebih lanjut tentang integrasi Figma dan Confluence di sini.)

Pengaruh fitur ini pada proses UX diilustrasikan dalam diagram berikut:

Figma meningkatkan alat desain UX
Figma menghilangkan kebutuhan akan aplikasi khusus untuk membuat prototipe dan berkomentar.

Sebelum Figma, beberapa alat lain digunakan untuk memfasilitasi pertukaran mockup dan pembaruan desain. Siklus iterasi adalah serangkaian pembaruan file bolak-balik, sehingga tim dapat meninjau dan menerapkan desain saat ini.

Setelah Figma, alat pihak ketiga tidak lagi diperlukan (tetapi dapat digunakan jika diinginkan). Karena Figma menangani fungsionalitas alat pihak ketiga yang dijelaskan sebelumnya, hanya ada satu langkah dalam prosesnya—berpindah dari sketsa ke Figma dan semua grup memiliki maket terbaru. Tidak ada kata "lepas tangan" dalam arti kata yang paling ketat.

Figma Sangat Bagus untuk Umpan Balik Tinjauan Desain

Figma mendukung komentar dalam aplikasi dalam mode desain dan prototipe, dan utas komentar dilacak di Slack dan/atau email. Tidak perlu memublikasikan file PNG atau melakukan pembaruan terus-menerus untuk mendapatkan umpan balik dari tim menggunakan alat pihak ketiga seperti InVision atau Marvel.

Alat desain UI web dan ulasan umpan balik
Desainer dapat memberikan komentar selama ulasan dengan membuka file Figma yang sama.

Selama tinjauan desain, desainer tim dapat mendiskusikan pekerjaan mereka di layar besar, merekam komentar, dan memperbaiki masalah—semuanya di Figma. Bentuk umpan balik langsung ini tidak dimungkinkan dengan Sketch, yang memerlukan pengunggahan ke layanan cloud untuk mendapatkan masukan tim.

Dicari desainer UI lepas penuh waktu yang berbasis di AS

Handoff Pengembang Difasilitasi Menggunakan Figma

Figma menampilkan cuplikan kode pada setiap bingkai atau objek yang dipilih dalam format CSS, iOS, atau Android untuk digunakan pengembang saat meninjau file desain. Komponen desain dapat diperiksa oleh pengembang mana pun dalam file apa pun yang dapat mereka lihat. Tidak perlu menggunakan alat pihak ketiga untuk mendapatkan informasi. Meski begitu, Figma memiliki integrasi penuh dengan Zeplin jika tim ingin melakukan lebih dari sekadar pengukuran sederhana dan tampilan CSS.

Tinjauan prototipe Figma dan penyerahan pengembang
Pengembang dapat mengakses kode dari file desain atau dengan menjalankan prototipe Figma.

File Proyek Figma Berada di Satu Tempat—Online

Karena Figma adalah aplikasi online, ia menangani organisasi file dengan menampilkan proyek dan file mereka dalam tampilan khusus. Figma juga mendukung banyak halaman per file, seperti Sketch, sehingga tim Agile dapat mengatur proyek mereka secara logis:

  • Buat proyek untuk tema fitur .
  • Buat file untuk fitur epik atau besar.
  • Buat halaman dalam file itu untuk setiap cerita pengguna.

Ini hanyalah salah satu metode pengorganisasian file yang dapat dibuat lebih atau kurang granular tergantung pada apa tuntutan proses.

Alternatif Sketsa Online untuk Windows
File proyek dapat diatur dengan mudah dalam tampilan khusus.

API Figma Menyediakan Integrasi Alat Pihak Ketiga

Figma sekarang memiliki API pengembang untuk memungkinkan integrasi yang sebenarnya dengan aplikasi berbasis browser apa pun. Perusahaan menggunakan ini untuk mengintegrasikan tampilan file desain secara real-time di aplikasi mereka. Misalnya, Uber memiliki layar besar yang menampilkan file desain "siaran langsung" di sekitar perusahaan mereka. Desain dibagikan, dan umpan balik diterima dari siapa pun di perusahaan.

Perangkat lunak JIRA Atlassian telah menerapkan add-on Figma sehingga pemilik produk, pengembang, dan insinyur berkualitas selalu melihat versi terbaru dari setiap mockup dari para desainer.

Selain itu, API Figma berjanji untuk memenuhi permintaan pelanggan untuk plugin pihak ketiga dan peningkatan fitur yang sudah disediakan Sketch.

Pembuatan Versi File Otomatis atau Sesuai Permintaan

Setiap ketidakpastian seputar pembaruan file langsung dimitigasi lebih lanjut oleh sistem versi bawaan Figma. Setiap saat, seorang desainer dapat membuat versi dan deskripsi bernama dari file Figma; ini dapat dilakukan segera setelah perubahan yang disepakati dilakukan pada desain.

Desain antarmuka web pembuatan versi file otomatis
Versi file disimpan secara manual untuk membuat cabang desain.

File langsung di lingkungan bersama tidak akan terpengaruh hingga perubahan sengaja dilakukan ke versi aslinya. Anda juga dapat memulihkan versi yang disimpan secara otomatis untuk membuat duplikat atau menimpa versi asli.

Prototyping di Figma Mudah dan Intuitif

Sementara Sketch baru-baru ini menambahkan artboard ke prototyping artboard, Figma telah melangkah lebih jauh dengan menyediakan transisi antar frame. Fitur prototyping sederhana Figma menghilangkan kebutuhan akan alat lain yang melakukan prototyping gaya slideshow, seperti InVision atau Marvel. Ketika semua yang dibutuhkan adalah presentasi sederhana dengan transisi, tidak perlu mengekspor ke alat tinjauan.

Prototipe desain web yang intuitif
Prototyping Figma bekerja seperti alat lain menggunakan panah penghubung antar frame.

Prototipe Figma dapat didistribusikan seperti file desain Figma; siapa pun dengan izin tautan dapat melihat dan mengomentari prototipe, dan sekali lagi, umpan balik itu ditangkap di panel komentar alat dan direkam di Slack. Pengembang dapat melihat alur kerja desain, meninggalkan @pesan langsung untuk desainer, dan mendapatkan pengukuran dan atribut CSS dari dalam prototipe.

Perpustakaan Tim Figma Ideal untuk Sistem Desain

Sistem desain telah menjadi kebutuhan bagi banyak perusahaan, dan ada kebutuhan untuk komponen (simbol di Sketch dan Illustrator) yang dapat digunakan kembali, terukur, dan "ditoken" untuk digunakan dalam pustaka pola yang tersedia untuk desainer UX dan pengembang front-end.

Perpustakaan sistem desain Figma
Dialog tanpa mode perpustakaan tim Figma memberikan akses tak terbatas ke komponen dan gaya.

Ungkapan yang sering digunakan "sumber kebenaran tunggal" cocok di sini—setelah perpustakaan tim Figma dibuat, siapa pun yang memiliki akses ke proyek dapat menggunakan instance komponen dalam desain mereka dan memastikan mereka bekerja dengan versi terbaru.

Desain perpustakaan komponen sistem
Pengorganisasian komponen sederhana dan fleksibel menggunakan file dan bingkai.

Pendekatan Figma ke pustaka komponen sederhana dan mudah dikelola. Desainer dapat membuat file yang penuh dengan komponen atau menggunakan komponen di halaman untuk mengatur pustaka pola. Setiap frame di halaman Figma menjadi bagian organisasi di perpustakaan tim (tidak perlu membuat hierarki\seperti\ini).

Salah satu cara untuk mengatur perpustakaan adalah memiliki proyek yang didedikasikan hanya untuk komponen. File dalam proyek itu dapat diatur sesuai kebutuhan, dan halaman di dalam file tersebut dapat diatur sesuai kebutuhan.

Figma Dibangun untuk Meningkatkan Kerja Sama Tim Desain

Menggunakan Figma untuk waktu yang lama akan menunjukkan manfaat dari alat kolaborasi langsung ini. Itu membuat tim tetap pada tugas dan mendorong pengungkapan penuh, penting ketika membangun sistem desain untuk berbagai disiplin ilmu. Figma mudah digunakan oleh siapa saja di platform apa pun, dan memungkinkan tim berbagi pekerjaan dan perpustakaan mereka dengan cepat.

Pakar desain yang menggunakan Figma setelah beralih dari Sketch (file Sketsa dapat diimpor dengan paritas ke Figma) tidak kecewa:

…itu benar-benar mengubah cara Anda bekerja dengan kolega dan klien Anda – Merampingkan Desain Kolaboratif dengan Figma

Figma menyatukan yang terbaik dari segalanya di dunia alat desain UI dalam beberapa tahun terakhir – Mengapa Tim Desain Anda Harus Mempertimbangkan Beralih ke Figma

Selama setahun terakhir, saya telah menggunakan Figma untuk proses desain UI/UX saya dan itu telah menghemat jam kerja saya. Ini benar-benar mengubah alur kerja desain saya – Cara Merampingkan Alur Kerja UI/UX Anda dengan Figma

Waktu yang saya habiskan di Figma biasanya merupakan bagian yang paling menyenangkan dan paling produktif dari hari saya – Figma Mengubah Seluruh Alur Kerja Saya, dan Ini Luar Biasa!

• • •

Bacaan lebih lanjut:

  • Kuasai Kerajinan Anda dengan Alat UX Teratas Ini
  • Merampingkan Desain Kolaboratif dengan Figma
  • Gunakan Craft by InVision untuk Merampingkan Kolaborasi Tim
  • Kematian pada Wireframe. Langsung ke High-Fidelity!
  • Menjadi Desainer Kelas Dunia dengan Menjadikan Globe sebagai Kantor Anda