Perbedaan Figma dengan Adobe XD

Figma vs Adobe XD

Perbedaan Figma dengan Adobe XD - Figma dan Adobe XD telah bersaing sejak XD dirilis pada 2016. Pada awalnya, persaingan itu tidak terlalu ketat, dengan rilis awal XD kehilangan banyak fitur utama, tetapi banyak hal telah berubah selama beberapa tahun terakhir ini. Persaingan antara dua aplikasi sekarang jauh lebih ketat, dan tidak lagi mudah untuk menemukan mana yang paling cocok untuk Anda dan alur kerja Anda.

Dalam pertarungan ini, kita akan membahas perbandingan yang mendalam dan komprehensif antara Figma vs. Adobe XD, mencari tahu di mana masing-masing bersinar, mana yang lebih baik secara keseluruhan, dan mana yang lebih baik untuk situasi spesifik Anda.

Penetapan Harga ( USD )

Kami akan memasukkan harga sebagai perbandingan pertama kami sehingga saat kami membahas fitur dari kedua program, Anda akan memiliki konteks untuk menilai berapa banyak nilai yang akan Anda peroleh dalam setiap kasus

Calonsiswa.com

Figma memiliki tingkat gratis dengan penyimpanan tidak terbatas untuk dua editor dan tiga proyek. Proyek dapat berisi dokumen dalam jumlah tidak terbatas yang dapat disimpan secara online dan offline. Ini memiliki dua tingkatan berbayar dengan fitur yang berfokus pada tim bernama "Profesional" dan "Organisasi", masing-masing dengan harga $ 12 dan $ 45 per editor, per bulan.

Calonsiswa.com

XD juga memiliki tingkat gratis tanpa batasan pada proyek, namun file tidak dapat disimpan secara lokal dan harus disimpan ke cloud, dengan tunjangan penyimpanan 2GB. Tingkat berbayar adalah $ 9,99 per bulan, atau disertakan dengan langganan Creative Cloud saat ini $ 52,99 per bulan. Tingkat berbayar memungkinkan penghematan lokal dan juga meningkatkan penyimpanan cloud Anda hingga 100GB.

Catatan: Pada saat artikel ini, akun gratis menyertakan dokumen bersama tanpa batas & tautan bersama ditambah tabungan lokal. Namun mulai April 2020, dokumen dan tautan bersama akan dibatasi ke salah satu dari masing-masing, dan tingkat berbayar akan diperlukan untuk tabungan lokal.

Pemenang: Figma

Mengapa Figma Menang

• Anda mendapatkan lebih banyak di tingkat gratis Figma daripada di XD.
• Tingkat berbayar XD lebih murah, tetapi tingkat berbayar Figma memiliki lebih banyak fitur.

Mari kita lihat mengapa harga Figma menang, tingkat demi tingkat.

Tingkat Gratis

Jika bukan karena pembatasan April mendatang untuk kolaborasi dan tabungan lokal dengan XD, persaingan yang tingkat gratisnya paling menarik akan lebih dekat. Namun seperti berdiri Anda mendapatkan lebih banyak dari versi gratis Figma daripada XD:

• Penyimpanan cloud: Figma, tidak terbatas vs. XD, 2GB
• Dokumen bersama: Figma, unlimited vs. XD, 1
  
• Tautan bersama: Figma, tidak terbatas vs. XD, 1
  

Tingkat Berbayar Pertama

Pada tingkat pertama dari tingkat berbayar, XD lebih murah $ 2,01 per pengguna, yang harus diperhatikan.

Namun banyak dari apa yang Anda dapatkan di tingkat berbayar XD sudah tersedia di tingkat gratis Figma, yaitu dokumen bersama tanpa batas, tautan bersama tanpa batas, jumlah penyimpanan awan yang lebih besar.

Adapun fitur berbayar lainnya di tingkat pertama, perbedaan utama Adobe adalah termasuk akses ke perpustakaan font lengkap mereka, jika tidak hanya tersedia melalui Creative Cloud. Sebagai perbandingan, Figma menyediakan akses ke Google Fonts, tanpa perpustakaan font mereka sendiri.

Sebaliknya, tingkat berbayar pertama Figma menambahkan izin file / pengguna khusus, dokumen khusus undangan, dan perpustakaan tim bersama.

Dengan demikian, nilai yang diberikan kepada Anda pada tingkat pembayaran pertama dari aplikasi ini akan turun ke apakah font atau fitur untuk kolaborasi dan mendemonstrasikan kepada klien lebih berharga bagi Anda dalam alur kerja Anda.

Secara umum, perancang web akan lebih cenderung menemukan nilai dalam kolaborasi, izin, dan berbagi fitur tingkat berbayar pertama Figma daripada perpustakaan font tingkat berbayar pertama Adobe.

Catatan: Tingkat "Profesional" Figma juga memperpanjang riwayat versi dari 30 hari menjadi tidak terbatas.

XD baru saja menambahkan riwayat versi pada November 2019, dan memiliki batas 30 hari secara default, dengan opsi untuk menandai versi tertentu agar tetap tanpa batas. Ini tampaknya sama pada tingkatan gratis dan berbayar.

Tingkat Berbayar Kedua

Sekali lagi, tingkat pembayaran kedua XD lebih murah daripada Figma, kali ini $ 22,01.

Namun, tampaknya XD tidak menawarkan banyak tambahan pada tingkat ini seperti halnya Figma.

Tingkatan "XD untuk tim" menambahkan:

• Webinar orientasi
• Konsol admin berbasis web
• Dukungan teknis lanjutan

Tingkatan "Organisasi" Figma menambahkan:

• Sistem desain di seluruh organisasi
• Tim terpusat
• Plugin pribadi
• Administrasi plugin
• Font bersama
• Masuk tunggal + keamanan lanjutan
• Analisis sistem desain

Sekali lagi dalam kasus ini, meskipun tingkat kedua XD lebih murah, Figma tampaknya menawarkan nilai lebih dalam bentuk fitur yang akan berguna secara praktis untuk organisasi besar.

Platform yang Didukung

XD

Desktop:

Windows & Mac.

Peramban Desktop & Perangkat Seluler:

XD dapat menghasilkan pratinjau desain Anda yang dapat dilihat di browser untuk memungkinkan klien memberikan umpan balik.

Aplikasi perangkat seluler:

Aplikasi Adobe XD di iOS atau Android. Mengemulasi perangkat seluler untuk pratinjau langsung

Figma

Desktop:

Windows & Mac (resmi).

Linux melalui aplikasi Figma-linux yang dikelola komunitas - menyediakan dukungan untuk font yang diinstal secara lokal

Browser desktop:

Figma dapat digunakan untuk mengedit di browser pendukung WebGL. Ini juga memungkinkan pengeditan melalui ChromeOS dan sistem berbasis Linux / BSD lainnya.

Selain itu, desain dapat dilihat oleh klien di browser desktop.

Browser perangkat seluler:

Mode hanya lihat memungkinkan pratinjau desain di iOS dan Android. Secara resmi didukung di Safari dan Chrome, tetapi juga berfungsi di Firefox dalam pengujian saya.

Aplikasi perangkat seluler:

Aplikasi Figma Mirror di iOS atau Android. Lebih mengemulasi perangkat seluler daripada yang dilakukan browser untuk pratinjau

Pemenang: Figma

Mengapa Figma Menang

Saat ini Adobe tidak menyediakan cara untuk mengakses XD di luar Windows atau Mac, sementara Figma juga dapat diakses melalui ChromeOS dan Linux.

Lebih dari seperempat responden survei pengembang Stack overflow 2019 melaporkan menggunakan sistem berbasis Linux sebagai sistem operasi utama mereka, dan ini adalah platform yang umum digunakan di antara orang-orang yang terlibat dengan fase pengkodean pengembangan web. Dengan Figma yang dapat diakses di Linux dan ChromeOS melalui browser atau aplikasi desktop yang dikelola komunitas, ini menjadikannya alat pilihan untuk tim mana pun yang tidak 100% berbasis Mac / Windows. Meskipun demikian, jika tim Anda berjalan sepenuhnya di Mac & Windows, Anda tidak akan mengalami perbedaan yang signifikan dalam hal dukungan platform.

Calonsiswa.com

Kolaborasi, Berbagi & Pratinjau

    

Kolaborasi

Figma

Multiplayer

Dengan fitur “multiplayer” Figma, sejumlah orang dapat login dan mengedit dokumen secara bersamaan. Anda masing-masing akan memiliki avatar yang muncul di toolbar atas, dan kursor setiap orang akan ditampilkan dengan warna yang berbeda dan nama mereka yang melekat padanya.

Mode Pengamatan

Anda juga dapat mengaktifkan mode observasi dengan mengklik avatar pengguna lain yang masuk dan pada dokumen yang sama dengan Anda. Setelah ini diaktifkan, layar Anda akan mencerminkan milik mereka, menunjukkan kepada Anda setiap tindakan yang mereka lakukan saat mereka bergerak di sekitar dokumen. Anda dapat menggunakan ini baik untuk memamerkan dokumen ke orang lain, atau untuk melihat seseorang bergerak melalui prototipe untuk menguji kelemahannya.

Perpustakaan Tim

Fitur yang sangat membantu adalah perpustakaan tim. Anda tidak hanya dapat membuat sistem desain yang terdiri dari komponen yang dapat digunakan kembali, skema warna, dan gaya teks untuk pekerjaan Anda sendiri, tetapi Anda juga dapat membuat sistem desain tersebut tersedia untuk seluruh tim Anda sehingga setiap orang bekerja dengan elemen umum yang sama.

Simpan dan Sinkronisasi Otomatis

Yang terpenting, Figma secara otomatis menyimpan dan menyinkronkan setiap perubahan pada dokumen dan sistem desain di dalamnya. Jika seseorang sedang mengerjakan proyek bersama dan terjadi perubahan, mereka akan diberi tahu dan dapat memperbarui apa yang mereka lihat segera sehingga semua anggota tim selalu terbarui, tidak perlu unggahan file, unduhan, atau penggabungan manual.

Adobe XD

Coediting (beta)

Mulai November 2019, Adobe XD memiliki desain "coediting" kolaboratif dalam versi beta, yang berperilaku sangat mirip dengan fitur "multipemain" Figma. Saat ini, satu-satunya perbedaan visual yang menonjol di antara keduanya adalah Anda tidak melihat kursor dari desainer lain yang mengerjakan dokumen.

Aset Tertaut

XD juga memiliki "Aset Tertaut", di mana jika sebuah dokumen disimpan ke cloud, komponen dan gayanya dapat diakses dari dokumen lain melalui menghubungkannya. Jika komponen asli diubah kemudian disimpan di dokumen sumber, dokumen yang ditautkan akan menerima pemberitahuan yang dapat diperbarui untuk melihat perubahan.

Info lebih lanjut:

• https://helpx.adobe.com/xd/help/linked-assets.html

Perpustakaan Cloud Kreatif

Anda juga dapat mengatur dan mengakses aset melalui Perpustakaan Cloud Kreatif. Ini mulai mendekati fungsionalitas yang ditemukan di Perpustakaan Tim Figma, tetapi fitur untuk memfasilitasi jenis struktur tim yang digunakan orang pada proyek tidak sekuat itu.

Jika aset asli dari Perpustakaan CC diperbarui, aset tersebut tidak akan berubah di dokumen lain yang menggunakannya.

Info lebih lanjut:

• https://helpx.adobe.com/xd/help/cc-libraries-xd.html

Pemenang: Figma

Mengapa Figma Menang

Kolaborasi adalah fungsionalitas sentral di mana banyak Figma dibangun, dan itu terlihat. Menjadi berbasis web berarti fitur kolaborasi sangat cepat dan mudah diakses, mode multiplayer saat ini lebih maju daripada beta coediting XD, itu termasuk mode observasi, perpustakaan tim, dan proses yang mengalir lancar untuk menyinkronkan dan memperbarui perubahan pada aset bersama.

Berbagi

Figma

Undangan

Di Figma Anda dapat mengirim undangan ke orang-orang tertentu dan mengatur apakah mereka dapat melihat, mengedit dan menambahkan komentar. Mungkin juga, daripada mengundang individu satu per satu, untuk membuat tim, menambahkan orang ke tim tersebut, lalu berbagi dengan tim yang diperlukan. Lebih lanjut, Anda dapat membagikan semua dokumen dalam sebuah proyek dengan tim daripada harus membagikan satu dokumen pada satu waktu.

Izin

Ada juga empat tingkat izin yang dapat dimiliki seseorang: penampil, editor, admin, atau pemilik. Izin ini dapat diatur di tim, proyek dan tingkat dokumen.

Tautan

Anda dapat berbagi dokumen dengan mengirimkan link yang sama yang Anda gunakan untuk mengedit dokumen di browser. Sekali lagi, Anda dapat mengontrol akses apa yang memungkinkan melalui tautan, apakah itu mengedit atau hanya melihat. Ini memfasilitasi lingkungan berbagi antar desainer, mirip dengan GitHub atau CodePen, dan itu akan didukung oleh halaman komunitas Figma yang akan datang.

Info lebih lanjut:

• https://www.figma.com/blog/introducing-figma-community/
  
• https://help.figma.com/article/301-understanding-sharing-permissions
• https://help.figma.com/article/326-sharing-files

Adobe XD

Tautan Bersama

Dimungkinkan di XD untuk menghasilkan tautan ke versi dokumen berbasis web. Tautan ini dapat dibuat sebagai dioptimalkan untuk:

• Ulasan desain
• Handoff pengembang
• Presentasi
• Pengujian pengguna

Anda juga dapat menerapkan pengaturan khusus ke tautan yang Anda buat.

Dimungkinkan untuk mengizinkan akses terbuka ke tautan yang Anda bagikan, atau meminta kata sandi pilihan Anda.

Undangan Pribadi

Mulai Juni 2019, XD memiliki kemampuan untuk mengirim undangan pribadi melalui email untuk melihat tautan bersama. Sistem ini akan memungkinkan Anda untuk lebih memastikan, di luar perlindungan kata sandi, bahwa hanya orang yang diundang yang dapat melihat prototipe yang diterbitkan secara online.

Jika akses dibatasi hanya untuk undangan, akun Creative Cloud akan dibutuhkan oleh orang-orang yang diundang.

Pemenang: Figma

Mengapa Figma Menang

XD membuat kemajuan besar ketika menambahkan undangan pribadi, namun tetap berada di belakang manajemen tim dan sistem perizinan Figma yang canggih, dan kemudahan untuk mengizinkan berbagi terbuka melalui browser.

Pratinjau

Figma

Figma memberi Anda kemampuan untuk hanya mengirim klien atau manajer tautan untuk mendemonstrasikan mockup kepada mereka secara langsung di browser. Anda dapat menyetel tautan menjadi "lihat" saja sehingga orang tersebut tidak dapat melakukan perubahan yang tidak diinginkan secara tidak sengaja, atau Anda dapat memberikan kemampuan "edit" kepada mereka sehingga mereka dapat langsung berinteraksi dan menunjukkan kepada Anda apa yang mereka inginkan terjadi di merancang, atau membuat perubahan seperti menambahkan salinan yang telah mereka siapkan.

Anda juga dapat menggunakan "mode observasi" yang dijelaskan di atas untuk menunjukkan kepada seseorang melalui mockup.

Menyematkan dokumen juga dimungkinkan sehingga dapat ditampilkan dalam halaman web jika Anda lebih suka melihat pratinjau dengan cara ini. Untuk membuat perbandingan dengan CodePen lagi, ini mirip dengan menyematkan pena di halaman, tetapi dalam hal ini menampilkan desain daripada kode.

XD

Seperti disebutkan di atas, Anda dapat membuat tautan ke desain XD Anda yang, ketika dibagikan dengan klien atau manajer, akan memungkinkan mereka untuk melihat maket dan meninggalkan komentar di atasnya. Namun, jika Anda ingin mengizinkan orang tersebut untuk lebih terlibat, yaitu memberi mereka hak untuk mengedit, hal ini saat ini tidak memungkinkan.

Poin kuat yang dimiliki XD daripada Figma, adalah kemampuan untuk menambahkan narasi suara untuk memandu klien Anda melalui demonstrasi, fitur luar biasa jika Anda bekerja dengan orang-orang di zona waktu yang berbeda atau yang memiliki jadwal sibuk:

Pemenangnya: Seri

Mengapa Seri

Kedua aplikasi tersebut memiliki fitur yang sangat kuat untuk melihat pratinjau dokumen, terutama kepada klien, termasuk kemampuan untuk mengirimkan link yang memungkinkan dilakukannya pemeriksaan di browser.

Di satu sisi Figma memungkinkan Anda untuk membiarkan pihak lain yang berkepentingan berinteraksi langsung dengan dokumen, dan jika melakukan demonstrasi langsung mereka dapat melihat kursor Anda bergerak, atau mereka dapat menonton melalui mode observasi. Ia juga memiliki kemampuan untuk menyematkan dokumen ke situs web.

Dan di sisi lain, XD memberi Anda kemampuan untuk merekam penelusuran suara untuk klien, sesuatu yang bisa sangat berguna ketika percakapan waktu nyata bukanlah pilihan. Khusus untuk desainer web freelancer, fitur ini dapat menghemat banyak waktu dan potensi miskomunikasi saat digunakan sebagai pengganti penjelasan tertulis dari maket.

Mendesain

Bingkai Figma vs Artboards XD

Figma menggunakan "frame" sedangkan XD menggunakan "artboards". Mereka memiliki fungsi yang serupa, jadi mana yang lebih baik dan mengapa?

Artboards XD

Artboards XD bertindak sebagai wadah yang merepresentasikan viewports yang menampung desain, misalnya layar ponsel vs layar tablet. Anda dapat membuat artboards sebanyak yang Anda suka, dan saat membuat prototipe, Anda dapat menautkan artboards untuk meniru aliran yang mungkin diikuti pengguna melalui situs atau aplikasi.

Bingkai Figma

Frame Figma juga bertindak sebagai container seperti yang dilakukan artboards, tetapi container ini dapat mewakili viewports dan sub-elemen desain seperti tombol, bagian konten, elemen navigasi, dan sebagainya.

Saat digunakan di tingkat atas untuk merepresentasikan viewport, frame memiliki semua fungsionalitas yang dilakukan artboards. Tetapi karena mereka dapat disarangkan dan digunakan untuk membuat tombol, bilah navigasi, dan seterusnya, mereka juga menghadirkan fungsionalitas tambahan ke elemen ini, seperti kisi dan tata letak otomatis.

Pemenang: Figma's Frames

Mengapa Figma Menang

Sederhananya, frame dapat melakukan semua yang dapat dilakukan artboard, tetapi artboards tidak dapat melakukan semua yang dapat dilakukan frame.

Kisi & Panduan

Panduan

Baik XD dan Figma memiliki panduan.

Untuk sementara waktu XD tidak memiliki panduan dan Anda harus dengan canggung meniru fungsinya dengan menambahkan persegi panjang atau garis ke halaman Anda sehingga objek lain dapat menyesuaikan kesejajarannya. Anda mungkin pernah mengalami rintangan alur kerja ini di masa lalu, tetapi panduan telah ditambahkan, jadi yakinlah bahwa fungsionalitas sekarang sama antara XD dan Figma dalam hal ini.

Kedua aplikasi juga memiliki kisi, tetapi ada beberapa perbedaan dalam cara fungsinya, yang dijelaskan di bawah ini.

Adobe XD Grids

Dalam kisi XD dapat ditambahkan ke artboards. Kisi artboard dapat diatur ke kisi persegi atau kumpulan kolom vertikal. Setelah kisi dibuat, kisi dapat disetel sebagai kisi default untuk dokumen Anda sehingga dapat dengan mudah diterapkan ke artboards lain.

Figma Grids

Dalam Figma grids, alias "grid layout", dapat ditambahkan ke bingkai apa pun apakah itu bingkai tingkat atas yang bertindak sebagai artboard, atau bingkai bersarang yang bertindak sebagai sub-elemen desain. Ini berarti Anda dapat memiliki kisi yang dikonfigurasi berbeda yang bersarang dalam desain yang sama.

Figma juga memungkinkan Anda untuk menggunakan beberapa grid sekaligus pada satu frame, dengan masing-masing grid saling bertumpuk. Dengan demikian Anda dapat memiliki kotak persegi dan kolom dan baris.

Setelah kisi dibuat, kisi dapat disimpan sebagai gaya kisi dan diterapkan ke bingkai atau komponen apa pun. Anda dapat menyimpan gaya kisi sebanyak yang Anda suka.

Pemenang: Figma

Mengapa Figma Menang

Kedua aplikasi memiliki kisi dan panduan, tetapi Figma memungkinkan Anda menggabungkan jenis kisi, menggunakannya dalam item bersarang, dan menyimpan beberapa gaya kisi.

Tata Letak & Emulasi Responsif

Kendala

Kedua aplikasi memiliki batasan, yang memungkinkan Anda memberi tahu komponen untuk tetap pada posisinya atau mengubah ukuran relatif terhadap sisi tertentu dari bingkai / artboard induknya. Mereka pada dasarnya menyediakan pengaturan yang sama, jadi fungsinya setara untuk semua maksud dan tujuan.

Ada tata letak dan fungsi emulasi responsif di setiap aplikasi yang sangat berbeda, jadi mari kita lihat.

XD

Ulangi Grid

XD memiliki fungsi "Repeat grid", yang merupakan fitur penghemat waktu yang sangat baik. Untuk menggunakannya, Anda dapat memilih elemen apa pun, atau beberapa elemen, tekan tombol "Ulangi kisi" dan pilihan Anda akan secara otomatis disetel untuk mengulang sebanyak yang Anda suka, secara horizontal dan / atau vertikal. Elemen kisi berulang kemudian dapat diubah ukurannya dan spasi antar elemen diubah sesuai kebutuhan.

Info lebih lanjut:

• https://helpx.adobe.com/xd/help/create-repeating-elements.html
  

Ubah Ukuran Responsif

XD juga memiliki fungsi pengubahan ukuran responsif, yang mencoba menebak apa yang mungkin Anda perlukan dalam elemen tertentu. Ini kemudian akan menerapkan batasan ke elemen yang sesuai.

Seperti banyak fitur lainnya, seberapa berguna fitur ini akan bergantung pada alur kerja Anda. Anda mungkin merasa ini sejalan dengan cara Anda bekerja dan karenanya menghemat banyak waktu, atau Anda mungkin mendapati Anda sering kali harus menimpa batasan yang diterapkan secara otomatis. Cara terbaik untuk mengetahuinya adalah dengan mencobanya dan melihat kesesuaiannya untuk Anda.

Catatan: Komponen XD (simbol alias) sebelumnya tidak dapat diubah ukurannya, namun sekarang tidak lagi terjadi: https://helpx.adobe.com/au/xd/help/components.html#resize_component

Figma

Tata Letak Otomatis

Tata letak otomatis adalah fitur terbaru di Figma dan sangat canggih dan sangat membantu untuk maket desain web.

Ini memungkinkan untuk hal-hal seperti:

• Tombol secara otomatis mengubah ukuran agar sesuai dengan lebar teks dalamnya
• Container meluas atau menyusut ketika elemen anak ditambahkan atau dihilangkan
• Menerapkan pengaturan padding horizontal dan vertikal
• Menerapkan "spasi antar item", yang secara efektif berperilaku sebagai margin
• Menyeret dan melepas untuk mengurutkan item daftar, baik secara horizontal maupun vertikal
• Menyeret dan melepas item di antara daftar terpisah
  

Selanjutnya, Anda dapat menumpuk satu bingkai tata letak otomatis di dalam bingkai tata letak otomatis lain yang dikonfigurasi secara berbeda.

Ini berarti Anda dapat secara efektif membuat kisi dengan menggunakan bingkai tata letak otomatis horizontal untuk baris, dengan bingkai tata letak otomatis vertikal induk untuk setiap kolom. Anda juga dapat menggunakan penumpukan untuk membuat tata letak yang kompleks seperti ruang konten multi-posting.

Fitur tata letak otomatis ini memberi Figma emulasi terdekat dari perilaku browser nyata yang belum pernah saya lihat dalam aplikasi desain / mockup.

Info lebih lanjut

• Dokumen tata letak otomatis
  
• Blog Figma - Mengumumkan Tata Letak Otomatis
• Playground Tata Letak Otomatis
  

Pemilihan Cerdas

Pemilihan cerdas mungkin tidak diperlukan sesering sekarang karena Figma memiliki tata letak otomatis, tetapi yang memungkinkan Anda melakukannya adalah memilih beberapa elemen dan dengan cepat menyesuaikan jarak di sekitarnya.

Saya telah melihat fungsi ini dijelaskan sebagai jawaban Figma untuk fungsi grid berulang XD, namun saya akan mengatakan bahwa, meskipun itu memungkinkan Anda untuk mengubah jarak dengan cara yang sama, itu tidak membandingkan secara langsung karena tidak menangani replikasi otomatis item ke dalam kotak untuk Anda.

Info lebih lanjut:

• Figma Blog - Memperkenalkan Smart Selection
  
• Dokumen Pemilihan Cerdas
  

Pemenang: Figma

Mengapa Figma Menang

Perbandingan ini jauh lebih sulit untuk dipanggil, karena fungsi grid berulang XD sangat fantastis, dan pengubahan ukuran responsif dapat membantu dalam kasus-kasus tertentu.

Namun, fungsionalitas pemilihan cerdas Figma sudah sangat baik, dan sekarang fungsi tata letak otomatisnya adalah sistem paling canggih dari jenisnya yang pernah kami lihat di perangkat lunak desain / mockup UI. Ini akan membutuhkan banyak waktu bagi aplikasi lain untuk mengejar tata letak otomatis, apalagi menyalipnya.

Membuat Grafik Vektor

Adobe XD

Alat gambar vektor XD termasuk alat bentuk dan alat pena. Namun tidak ada cara untuk mengedit simpul dari bentuk yang telah ditentukan dan pengeditan vektor yang digambar pena terbatas.

Ide umum pengeditan vektor di XD adalah Anda menggunakannya untuk wireframing, dan Anda beralih ke Illustrator jika Anda ingin membuat grafik.

Figma

Figma juga memiliki alat bentuk dan alat pena, tetapi ini menambahkan alat pensil tangan bebas, dan juga bentuk yang telah ditentukan sebelumnya yang tersedia di XD memiliki bentuk bintang dan panah.

Anda dapat mengedit node dalam bentuk apa pun, baik yang telah ditentukan sebelumnya atau digambar dengan pena / pensil, dengan mengklik dua kali untuk masuk ke mode pengeditan node. Figma juga memiliki fungsionalitas "jaringan vektor" yang unik di mana sejumlah segmen dapat bercabang dari satu node, tidak hanya satu atau dua.

Alat pengeditan vektor Figma sepenuhnya mampu membuat banyak jenis grafik yang digunakan dalam desain web, seperti ikon, logo, dan ilustrasi.

Pemenang: Figma

Mengapa Figma Menang

Jika Anda ingin membuat grafik dari awal, Anda dapat melakukannya langsung di dalam Figma, sedangkan XD tidak dilengkapi untuk tugas ini, memerlukan perangkat lunak kedua sebagai gantinya.

Font

Figma terintegrasi dengan Google Fonts, sedangkan XD terintegrasi dengan Adobe Fonts. Keduanya dapat menggunakan font yang diinstal secara lokal.

Pemenang: Figma

Mengapa Figma Menang

Mengingat ini adalah perbandingan untuk perancang web, dan Google Fonts adalah pustaka font web yang paling banyak digunakan, ini membuat pustaka font Figma secara umum lebih membantu dalam hal ini.

Yang mengatakan, jika Anda menggunakan Figma untuk pekerjaan desain non-web, Anda mungkin merasa memiliki akses ke font Adobe lebih berguna. Selain itu, Adobe memang memiliki beberapa font web jadi mungkin ada baiknya Anda memeriksa koleksi mereka untuk membantu Anda memutuskan apakah itu memberikan nilai bagi Anda.

Styling

Mari kita lihat sekilas perbedaan antara opsi gaya di Figma dan XD

• Figma memiliki banyak isian dan goresan. XD hanya memiliki satu isian dan goresan.
• Keduanya memungkinkan Anda untuk mengontrol pengaturan stroke lanjutan seperti caps, miters dan stroke alignment.
  
• Keduanya memiliki sudut melengkung dan mode campuran.
• Keduanya memiliki efek, dengan keduanya memiliki bayangan jatuh, objek / lapisan buram dan latar belakang kabur, tetapi hanya Figma yang memiliki efek bayangan dalam.
  
• Figma memiliki pengaturan tipe lanjutan tambahan yang tidak dimiliki XD.

Pemenang: Figma

Mengapa Figma Menang

Persaingan dalam gaya cukup dekat, tetapi Figma memang menjadi yang teratas karena beberapa goresan & isiannya, bayangan bagian dalam, dan pengaturan tipe lanjutan. Untuk pekerjaan non-web, ini akan menjadi kurang signifikan, tetapi hanya Figma yang akan memungkinkan Anda mendesain jenis beberapa isian atau beberapa bayangan yang dimungkinkan melalui CSS.

Sistem Perancangan

Baik XD dan Figma memiliki tiga bagian penting dari fungsionalitas yang diperlukan untuk membuat sistem desain:

1. Komponen (sebelumnya simbol di XD)
2. Gaya warna / efek
3. Gaya teks / karakter

Mari kita lihat bagaimana ketiga fungsi ini berbeda, atau sama, antara XD dan Figma.

Info lebih lanjut:

• https://helpx.adobe.com/au/xd/help/design-systems.html
• https://www.figma.com/design-systems/

Komponen

Baik XD dan Figma menggunakan master dan sistem instance dengan komponennya, dengan kemampuan untuk mengganti properti pada instance komponen. Keduanya juga memungkinkan untuk komponen bersarang.

Keduanya dapat memungkinkan komponen dari satu dokumen untuk diakses di dokumen lain. Dengan Figma hal ini dilakukan melalui penerbitan komponen ke "Perpustakaan Tim", dan di XD dilakukan dengan "aset tertaut", di mana komponen dapat ditarik dari dokumen cloud.

Seperti yang disebutkan sebelumnya, dulu ada masalah dengan komponen di XD yang tidak dapat dibuat responsif, tetapi dengan pengenalan kendala yang tidak lagi terjadi.

Pemenangnya: Seri

Mengapa Seri

Komponen Figma dulu lompatan dan batas lebih maju daripada simbol XD, tetapi Adobe benar-benar menutup celah yang satu ini. Keduanya sekarang sangat dekat satu sama lain dalam fungsi komponen yang tidak memiliki keunggulan besar dibandingkan yang lain.

Gaya Warna / Efek

XD

Warna disimpan dalam XD dengan memilih objek kemudian mengklik tombol + di bagian Assets> Colors pada antarmuka. Ini akan menambahkan warna guratan dan isian ke palet. Mereka akan diberi nama sesuai dengan kode heksanya tetapi dapat diganti namanya, dan dapat diseret dan dilepaskan untuk penyortiran.

XD tidak memiliki cara untuk menyimpan efek, seperti bayangan, sebagai gaya.

Figma

Warna disimpan di Figma dengan memilih objek kemudian mengklik tombol yang terlihat seperti empat kotak di dekat bagian Isi, Stroke atau Efek pada sidebar kanan. Nama pilihan Anda dapat diberikan saat ini. Jika Anda menggunakan sintaks, category / namegaya Anda akan secara otomatis diurutkan ke dalam grup, mis buttons / nav. Mereka juga dapat diseret dan dilepaskan untuk penyortiran.

Figma juga dapat menyimpan efek sebagai gaya, seperti bayangan atau kabur.

Pemenang: Figma

Mengapa Figma Menang

Yang ini sangat dekat, hampir cukup untuk disebut imbang. Tetapi Figma memiliki kemampuan untuk menyimpan efek sebagai gaya sangat membantu untuk sistem desain, seperti kemampuan untuk memilih secara individual apakah akan menyimpan coretan dan warna isian. Penyortiran otomatis ke dalam grup juga merupakan fitur praktis.

Gaya Teks / Karakter

Baik Figma dan XD memungkinkan Anda untuk menghemat gaya font, yang disebut sebagai gaya teks di Figma atau gaya karakter di XD. Cara menyimpan gaya ini sama dengan yang digunakan untuk menyimpan warna di setiap program.

Kedua aplikasi memungkinkan Anda menyimpan semua opsi gaya font yang mereka sediakan. Satu-satunya perbedaan yang signifikan adalah XD memungkinkan Anda juga menyimpan warna default untuk gaya karakter. Ini bisa diganti tapi akan digunakan saat gaya pertama kali diterapkan.

Pemenang: XD

Dengan semua hal lain dianggap sama, fakta bahwa XD memungkinkan Anda menetapkan warna default untuk gaya karakter Anda cukup membantu, dan memberikan keunggulan dalam kasus ini.

Pembuatan Prototipe

Interaksi

Dukungan untuk Berbagai Interaksi

Di Figma, Anda dapat memiliki 1 interaksi per item, misalnya, interaksi hover atau interaksi klik.

Di XD Anda dapat memiliki beberapa interaksi per item, misalnya, interaksi hover dan interaksi klik.

Mari kita lihat daftar pemicu interaksi, tindakan, transisi, dan opsi easing yang tersedia di setiap aplikasi.

Figma

Pemicu

• Saat diklik
• Saat menyeret
• Saat melayang
• Sambil menekan
• Mouse masuk
• Tikus pergi
• Arahkan mouse ke bawah
• Arahkan mouse
• Setelah penundaan
  

Tindakan:

• Arahkan ke (frame - gunakan untuk berpindah di antara frame jenis artboard)
• Buka overlay (bingkai)
• Tukar dengan (bingkai - gunakan untuk menukar dalam bingkai tipe komponen alternatif, misalnya tombol, lihat bagian selanjutnya untuk info lebih lanjut)
• Kembali
• Tutup overlay
• Buka URL

Transisi

• Instan
• Larut
• Smart Animate (lihat bagian selanjutnya)
• Pindah
• Pindah
• Dorong
• Geser Masuk
• Geser Keluar

Meringankan

• Kemudahan
• Kemudahan
• Kemudahan Masuk dan Keluar
• Linear
  

XD

Pemicu:

• Keran
  
• Menyeret
• Arahkan kursor
• Waktu
• Suara
• Kunci
• Gamepad

Tindakan:

• Transisi (lihat tipe dalam daftar di bawah)
  
• Animasi otomatis (lihat bagian selanjutnya)
  
• Hamparan
• Pemutaran Ucapan
• Artboard sebelumnya
• Perubahan status (lihat bagian selanjutnya)

Transisi

• Larut
• Geser ke kiri
• Geser ke kanan
• Geser ke atas
• Meluncur ke bawah
• Dorong ke kiri

Meringankan

• Tidak ada (alias linier)
  
• Kemudahan
• Kemudahan
• Kemudahan Masuk-Keluar
• Jepret
• Menyelesaikan
• Melambung
  

Pemenang: XD

Mengapa XD Menang

XD memiliki kumpulan pemicu yang dapat Anda gunakan untuk interaksi yang tidak dimiliki Figma, khususnya: suara, tombol, dan gamepad. Ia juga memiliki pemutaran ucapan dan tindakan perubahan status yang tidak dimiliki Figma. Dengan demikian, XD memfasilitasi lebih banyak jenis desain UI seperti aplikasi berorientasi / berorientasi suara atau UI game web.

Selain itu, ini memungkinkan lebih dari satu interaksi per item, memungkinkan Anda mencapai prototipe dengan fungsionalitas yang lebih mirip dengan perilakunya di browser.

Serikat / Swapping

Adobe XD

XD memiliki fitur “status” untuk mempermudah mendesain hal-hal seperti tombol melayang atau sakelar sakelar.

Di XD Anda cukup membuat komponen, menambahkan status hover, lalu mengubah gaya status hover komponen master tepat di tempatnya. Saat Anda melihat pratinjau artboard Anda, secara otomatis interaksi hover bekerja. Lebih lanjut, setiap kali Anda menambahkan komponen ke artboard, status hovernya, status toggle, dan seterusnya akan siap dan siap digunakan.

Selain itu, Anda dapat membuat status sebanyak yang Anda butuhkan, lebih dari sekadar default dan arahkan kursor.

Satu-satunya downside adalah Anda hanya dapat menggunakan pemicu hover untuk memulai keadaan hover, dan tidak dapat menggunakannya untuk memicu tindakan lain seperti bergerak di antara artboards.

Figma

Dalam Figma tidak ada fungsi "status" yang eksplisit. Anda dapat membuat hal-hal seperti efek hover dan beralih toggles tetapi untuk melakukannya Anda harus membuat dua komponen terpisah dan menganimasikan di antara mereka baik dengan menukar dengan bingkai lain atau membuka overlay.

Jika Anda menukar antar bingkai, Anda dapat menggunakan animasi pintar untuk menangani transisi, tetapi Anda perlu membuat bingkai gaya artboard duplikat untuk setiap efek hover atau toggle yang ingin Anda buat. Misalnya, untuk menampilkan tiga status hover tombol, Anda memerlukan tiga frame duplikat, satu per status hover.

Jika Anda ingin bekerja dalam satu bingkai, Anda dapat membuka overlay, di mana overlay adalah bingkai yang mewakili keadaan baru, seperti tombol bergaya hover. Namun dengan opsi ini Anda hanya dapat menggunakan transisi larut atau "pindah", dan bukan animasi pintar, yang berarti Anda tidak dapat membuat sesuatu seperti efek sakelar toggle slide.

Anda juga perlu menghubungkan status yang didorong swapping ini setiap kali Anda menambahkan instance komponen, tidak seperti komponen XD tempat status tersebut dibuat.

Pemenang: Adobe XD

Mengapa XD Menang

Saat ini Figma tidak benar-benar memiliki sistem status, melainkan solusi menggunakan swapping untuk membuat sesuatu yang serupa. Sebaliknya, sistem status XD kuat dan menyediakan lebih banyak metode untuk membuat interaksi dan meniru fungsionalitas browser. Ini juga lebih cepat dan lebih nyaman untuk menggunakan status yang diberikan dapat disimpan ke dalam komponen dan kemudian ada saat Anda menambahkan contoh komponen tersebut.

Animasi

Ketersediaan animasi di XD adalah fitur yang sangat membedakan antara itu dan Figma untuk beberapa waktu, namun Figma juga baru-baru ini menambahkan dalam animasi, memperkecil celah dalam kategori ini.

Kedua aplikasi memiliki fungsi yang serupa, di mana Anda dapat beralih antara dua artboards / bingkai gaya artboard tingkat atas, dan setiap lapisan dengan nama yang cocok di seluruh bingkai tersebut dapat memiliki animasi yang secara otomatis diterapkan padanya.

Namun dengan XD, perbedaan utamanya adalah Anda juga dapat menggunakan animasi otomatis untuk transisi antar status komponen, tidak hanya antar frame.

Selain itu, XD mendukung interpolasi antara lebih banyak properti daripada Figma. Mari kita lihat interpolasi yang tersedia di masing-masing:

Figma Smart Animate Interpolated Properties

• Skala
• Posisi
• Kegelapan
• Rotasi
• Isi Padat
• Isi Gradien
  

Lihat: https://help.figma.com/article/365-smart-animate#how

XD Auto-Animate Interpolated Properties

• Ukuran Perbatasan
• Kegelapan
• Sudut Bulat
• Posisi (X / Y)
• Ukuran (W / H)
• Rotasi 
• Ukuran teks
• Spasi Karakter
• Spasi Paragraf
• Spasi Baris 
• Jalan

Lihat: https://helpx.adobe.com/xd/kb/supported-auto-animate-features-in-xd.html#main-pars_text

Informasi lebih lanjut

• https://help.figma.com/article/365-smart-animate
  
• https://www.figma.com/blog/announcing-smart-animate-and-advanced-transitions/
• https://helpx.adobe.com/xd/help/animate-prototypes.html
• Lihat juga kursus Tuts + gratis kami tentang animasi otomatis Adobe XD
  

Pemenang: XD

Mengapa XD Menang

XD memungkinkan Anda untuk menganimasikan antara status komponen serta artboards / frame, dan mendukung interpolasi pada lebih banyak properti dalam prosesnya. Perhatikan khususnya kemampuannya untuk menginterpolasi jalur, yang berarti ia dapat berubah antara satu bentuk dan bentuk lainnya. Faktor-faktor ini menjadikannya yang terkuat dalam animasi saat ini.

Handoff

Pembuatan Kode

Adobe XD

XD dapat menghasilkan kode CSS. Untuk melihat kode ini, Anda harus membuat tautan pengembang kemudian mengunjungi tautan tersebut di browser. Jika ada perubahan pada dokumen, Anda harus membuat ulang tautan ini dan menyegarkannya.

Figma

Figma dapat menghasilkan CSS, Swift untuk iOS dan XML untuk Android.

Untuk melihat kode yang dihasilkan Anda cukup membuka tab Kode di sidebar kanan. Jika ada perubahan pada dokumen, kode akan dibuat ulang secara real time, secara otomatis.

Figma juga memungkinkan Anda untuk langsung menyalin kode CSS atau SVG dengan mengklik kanan objek, memilih salin / tempel, lalu memilih Salin sebagai CSS atau Salin sebagai SVG .

Pemenang: Figma

Mengapa Figma Menang

Figma dapat menghasilkan kode untuk iOS dan Android serta CSS. Kode tersebut jauh lebih mudah untuk mengakses inline di aplikasi Figma daripada proses XD untuk membuat link kemudian mengunjunginya di browser. Pembaruan kode Figma secara real time, dan CSS serta SVG dapat disalin langsung dari kanvas. Fitur-fitur ini membuat Figma menjadi pemenang yang jelas dalam pembuatan kode.

Mengekspor Gambar

Format

Baik XD dan Figma dapat mengekspor gambar sebagai PNG, SVG, PDF, dan JPG.

Kerapatan piksel

Figma dapat mengekspor PNG dan JPG di: 0,5x, 0,75x, 1x, 1,5x, 2x, 3x, 4x

XD dapat mengekspor JPG dengan 1x atau 2x. Itu dapat mengekspor PNG pada 1x, 2x, 3x, atau jika mengekspor untuk Android, 75% ldpi, 100% mdpi, 150% hdpi, 200% xhdpi, 300% xxhdpi, 400% xxxhdpi.

Pengaturan kualitas

XD memiliki kemampuan untuk mengatur kualitas gambar sebagai persentase pada ekspor JPG, sedangkan Figma tidak, yang berarti setelah mengekspor dari Figma Anda mungkin harus mengekspor ulang untuk menurunkan ukuran file ke jumlah yang sesuai untuk web.

Pemenang: XD

Mengapa XD Menang

Sementara Figma memiliki sedikit lebih banyak fleksibilitas dengan pengaturan ekspor kepadatan piksel, XD menyertakan pengaturan kualitas, dan untuk desainer web itu sangat penting. Untuk alasan ini, dan khusus untuk desainer web, XD adalah pemenang dalam mengekspor gambar.

Lain-lain & Ekstra

 Penyimpanan File

Catatan: Di sini kita berbicara tentang menyimpan file dokumen Anda, bukan menyimpan file gambar seperti yang dibahas di bagian sebelumnya.

Figma

File figma disimpan otomatis secara online dan secara opsional dapat disimpan secara lokal sebagai file .fig . Kedua jenis tabungan ini tersedia di semua tingkatan harga.

Figma juga memungkinkan Anda untuk mempertahankan koleksi riwayat file yang ekstensif, memungkinkan Anda untuk kembali ke versi sebelumnya kapan saja. Tingkat gratis memiliki riwayat 30 hari sementara tingkat berbayar memiliki riwayat tidak terbatas.

XD

File XD dapat disimpan ke dokumen Creative Cloud di tingkat gratis. Pada tingkatan berbayar, mereka juga dapat disimpan secara lokal sebagai file .xd .

XD juga memungkinkan Anda untuk memelihara sejarah dokumen. Secara default, versi ini bertahan selama 30 hari, dengan opsi untuk menandai versi tertentu untuk dipertahankan. Saya tidak dapat memastikan apakah ada perbedaan antara tingkatan gratis dan berbayar untuk riwayat dokumen di Figma, tetapi dari informasi yang tersedia tampaknya sama di keduanya.

Pemenang: Figma

Mengapa Figma Menang

Baik Figma dan XD memiliki penyimpanan lokal dan online / cloud, namun Figma menyediakan kedua opsi ini di tingkat gratis mereka sementara XD memerlukan pembayaran untuk tabungan lokal dan memiliki batas penyimpanan cloud. Selain itu, fungsi penyimpanan otomatis Figma sangat nyaman dan membantu mencegah kehilangan pekerjaan.

Bekerja Offline

XD

XD memungkinkan Anda untuk bekerja secara offline kapan saja, namun Anda memerlukan akun berbayar untuk menyimpan file Anda secara lokal sebelum offline.

Figma

Figma memungkinkan bekerja secara offline, tetapi Anda harus memiliki koneksi internet ketika Anda pertama kali memulai sesi Anda untuk memuat perangkat lunak dengan benar. Setelah itu Anda bisa melanjutkan bekerja secara offline.

Pemenang: XD

Mengapa XD Menang

XD adalah satu-satunya pilihan dari keduanya yang memungkinkan pekerjaan offline sepenuhnya. Jika Anda tinggal atau bepergian di daerah dengan konektivitas internet yang terputus-putus, XD akan menjadi pilihan yang lebih baik.

Interoperabilitas

Baik XD dan Figma memiliki interoperabilitas dengan Sketch yang memungkinkan Anda membuka file Sketch dan terus mengerjakannya. Mari kita lihat perangkat lunak lain apa yang dapat saling beroperasi.

Adobe XD

Photoshop

Anda dapat mengklik kanan gambar PNG, JPG, BMP atau GIF yang telah ditambahkan ke dokumen XD dan memilih Edit di Photoshop . Gambar akan terbuka di Photoshop, dan setelah melakukan pengeditan, Anda dapat menyimpan file dan perubahan Anda akan tercermin di XD.

Anda juga dapat langsung membuka PSD di XD, fitur ekstra berguna jika Anda ingin bekerja dengan aset template yang telah Anda beli dari desainer lain yang dibuat di Photoshop.

Setelah efek

XD sudah memiliki fungsi animasi yang kuat dengan animasi otomatis, tetapi animasi dan interaksi mikro yang lebih canggih dapat dibuat dengan menghadirkan After Effects ke dalam alur kerja. Anda cukup memilih artboard dari layer yang ingin Anda animasikan kemudian ekspor ke After Effects di mana Anda dapat menggabungkan animasi Anda.

Ilustrator

Telah disebutkan sebelumnya bahwa ilustrasi vektor tidak dapat dilakukan secara inline di XD karena idenya adalah Anda menggunakan Illustrator sebagai bagian dari alur kerja Anda. Untuk menggunakan Illustrator untuk mengedit vektor yang sudah ada di dokumen Anda, Anda dapat memilihnya lalu menyalin tempel vektor langsung ke kanvas di Illustrator, lalu salin tempel kembali setelah Anda selesai mengedit. Dengan cara yang sama, Anda dapat menyalin vektor yang telah Anda buat di Illustrator langsung ke XD.

Info lebih lanjut:

• https://helpx.adobe.com/au/xd/help/working-with-external-assets.html
  

Figma

Figma tidak dirancang untuk beroperasi dengan perangkat lunak desain lain seperti XD. Namun yang dapat Anda lakukan adalah menyalin vektor yang dibuat di Figma sebagai SVG, dan kemudian sebagian besar program pengeditan vektor, (seperti Affinity Designer atau Inkscape), akan memungkinkan Anda untuk menempelkan vektor tersebut ke kanvas untuk pengeditan lebih lanjut.

Pemenang: XD

Sebenarnya tidak ada persaingan yang signifikan antara Figma dan XD pada interoperabilitas – Figma tidak dirancang untuk itu, sementara XD bekerja dengan perangkat lunak lain dalam rangkaian Creative Cloud. Memang, Figma sudah memiliki alat pengeditan vektor yang kuat di dalamnya, tetapi XD jelas memiliki keunggulan karena dapat memfasilitasi pengeditan yang lebih canggih melalui Illustrator, Photoshop, dan After Effects.

Integrasi

Integrasi dengan perangkat lunak pihak ketiga adalah sesuatu yang saya klasifikasikan secara terpisah untuk interoperabilitas, di mana yang pertama memfasilitasi sebagian alur kerja di luar pembuatan mockup, sedangkan yang terakhir digunakan selama proses desain. Mari kita lihat daftar integrasi XD dan dukungan Figma.

Catatan: Dalam beberapa kasus mungkin ada plugin yang memungkinkan integrasi tambahan tetapi kami berfokus pada integrasi resmi.

Adobe XD

Memamerkan

• Behance

Lepaskan

• Zeplin
• Avocode
• Sympli

Animasi & Pembuatan Prototipe Tingkat Lanjut

• ProtoPie
• Komposit Layang-layang

Manajemen Tim & Proyek

• Jira
• Microsoft Teams
• Kendur

Figma

Memamerkan

• Komunitas Figma (beta)
• Dribbble

Lepaskan

• Zeplin
• Avocode

Animasi & Pembuatan Prototipe Tingkat Lanjut

• ProtoPie
• Prinsip
• Flinto

Manajemen Tim & Proyek

• Jira
• Trello
• Terima Pemberitahuan Komentar di Slack

Panduan Gaya

• Zeroheight

File sharing

• Dropbox

Pemenangnya: Seri

Mengapa Seri

Figma mungkin memiliki lebih banyak integrasi daripada XD, dengan 12 vs. 9, tetapi itu sendiri tidak bermakna secara inheren. Sebaliknya, apakah aplikasi yang Anda gunakan dalam alur kerja Anda didukung yang menentukan nilai integrasi ini. Dengan demikian, mengingat keduanya memiliki penawaran integrasi yang solid dalam beberapa kategori, kami akan menyebutnya seri.

Lebah

Figma memiliki API yang memungkinkan file desain menjadi output sebagai data JSON, dapat membaca & menulis komentar, dan menghasilkan file gambar. Hal ini memungkinkan pengembangan semua jenis integrasi ke dalam alur kerja desain berbasis Figma. Sebagai contoh,

• Uber menggunakan API untuk menampilkan desain yang sedang berlangsung di TV di sekitar kantor mereka, dan memungkinkan staf untuk melihatnya dengan teliti melalui etalase berbasis browser internal.
  
• Microsoft menggunakan API untuk memfasilitasi proses handoff desain otomatis yang mereka perkirakan mengurangi alur kerja mereka hingga 70%.
• GitHub membangun sistem yang memungkinkan seluruh sistem ikon mereka dikelola dari satu file desain.

API ini dapat diakses secara terbuka oleh siapa saja yang memiliki akun Figma gratis atau berbayar.

Pemenang: Figma

Mengapa Figma Menang

XD tidak memiliki API apa pun. Figma melakukannya, dan sejauh ini telah digunakan untuk tujuan yang sangat bermanfaat.

Info lebih lanjut:

• https://www.figma.com/developers/api
  
• https://www.figma.com/blog/https-blog-figma-com-microsoft-automates-design-handoff-with-figmas-api/
• https://www.figma.com/blog/introducing-figmas-platform/
  

Plugin

Untuk sementara hanya XD yang memiliki plugin dan ini merupakan keunggulan yang cukup signifikan dibandingkan Figma. Namun sekarang baik XD dan Figma memiliki plugin, jadi kekuatan masing-masing dalam kategori ini mungkin akan turun ke seberapa berlaku plugin untuk setiap aplikasi untuk alur kerja spesifik Anda.

Jelajahi plugin XD: https://www.adobe.com/products/xd/resources.html

Jelajahi plugin Figma: https://www.figma.com/c

Pemenangnya: Seri

Baik Figma dan XD memiliki ekosistem plugin yang sehat sekarang dengan banyak alat buatan komunitas yang bermanfaat.

Catatan: Figma memang memiliki fitur tambahan yang dapat dibuat dan digunakan di tingkat Organisasi, plugin pribadi, namun mengingat itu hanya di tingkat tertinggi, mungkin tidak cukup fitur pembeda untuk mengatakan bahwa sistem plugin Figma akan lebih berharga bagi sebagian besar desainer .

Skor Akhir

Figma Menang: 14

• 1. Penetapan harga
• 2. Platform yang Didukung
• 3a. Kolaborasi
• 3b. Berbagi
• 4a. Bingkai vs Artboards
• 4b. Kisi & Panduan
• 4c. Tata Letak & Emulasi Responsif
• 4d. Membuat Grafik Vektor
• 4e. Font
• 4f. Styling
• 5b. Gaya Warna / Efek
• 7a. Pembuatan Kode
• 8a. Penyimpanan File
• 8e. Lebah
  

Adobe XD Menang: 7

• 5c. Gaya Teks / Karakter
• 6a. Interaksi
• 6b. Serikat / Swapping
• 6c. Animasi
• 7b. Mengekspor Gambar
• 8b. Bekerja Offline
• 8c. Interoperabilitas
  

Imbang: 4

• 3c. Pratinjau
• 5a. Komponen
• 8d. Integrasi
• 8f. Plugin
  

Pemenang Keseluruhan: Figma, 14 hingga 7

Pada tahap ini Figma tetap menjadi pemenang yang cukup dominan atas Adobe XD dengan 14 kemenangan berbanding 7, dan sisa 4 poin pertimbangan menjadi imbang. Namun, masih ada kondisi di mana Anda mungkin lebih memilih Adobe XD, dan itu adalah jika 7 area yang dimenangkannya lebih penting bagi Anda daripada 14 area yang dimenangkan Figma.

Kekuatan Masing-masing

Kekuatan XD: Pembuatan Prototipe, Creative Cloud, Offline

XD memiliki peluang bagus untuk menjadi lebih baik untuk Anda jika Anda sudah jauh bekerja di ekosistem Adobe. Jika Anda semua menggunakan perangkat lunak Adobe dan Anda menginginkan sesuatu yang lebih baik untuk desain antarmuka daripada AI atau PS tetapi masih dalam keluarga Cloud Kreatif, XD adalah solusi Anda.

Selain itu, area kekuatan menonjol XD saat ini adalah pembuatan prototipe, setelah meraih kemenangan dalam tiga subbagian prototipe kami: Interaksi, Status, dan Animasi.

XD juga mungkin menjadi pilihan yang lebih baik untuk Anda jika Anda tidak memiliki akses ke internet yang andal atau ingin menggunakan perangkat lunak desktop asli / non-web.

Kekuatan Figma: Kolaborasi, Desain, Lintas Platform

Jika kolaborasi adalah prioritas tinggi bagi Anda dan tim Anda, Figma saat ini tak tertandingi di ruang ini. Itu telah dibangun dari bawah ke atas dengan kolaborasi dalam pikiran dan karena itu akan sulit bagi aplikasi lain untuk menjatuhkannya dari posisi teratas dalam waktu dekat.

Saat ini juga melampaui XD cukup jauh sebagai alat desain, mengambil kemenangan di semua enam subbagian desain kami: Bingkai vs Artboards, Kisi & Panduan, Tata Letak & Emulasi Responsif, Membuat Grafik Vektor, Font, Styling

Dan terakhir, jika Anda memiliki anggota tim yang menggunakan Linux atau ChromeOS, Figma memiliki dukungan lintas platform untuk menyediakan platform ini.

Perlombaan Berlanjut

Ketika Adobe XD pertama kali keluar, itu benar-benar tidak ada persaingan yang signifikan dengan Figma sama sekali, bertindak lebih sebagai pilihan yang lebih baik untuk desainer antarmuka berbasis Creative Cloud daripada Photoshop atau Illustrator. Namun sejak saat itu, sementara Figma mungkin masih unggul saat ini, XD telah menutup celah tersebut.

Persaingan antara Figma dan XD terus berlanjut, dan masing-masing program pasti saling mendorong untuk terus meningkatkan permainannya. Kami melihat fitur-fitur yang secara eksklusif di satu muncul di yang lain secara cukup teratur. Tekanan yang mereka terapkan pada satu sama lain untuk berinovasi menghasilkan hasil yang sangat baik bagi kami sebagai desainer.

Jadi, mana pun yang Anda putuskan untuk digunakan pada tahun 2020, perhatikan apa yang dilakukan orang lain karena, siapa tahu, itu bisa menjadi favorit baru Anda kapan saja.

Sumber CC : https://webdesign.tutsplus.com/