Desain antarmuka kolaboratif dengan Figma
Indonesian (Bahasa Indonesia) translation by Cuma Hapsah (you can also view the original English article)
Figma adalah sesuatu yang sedikit khusus sekarang. Pada pandangan pertama itu adalah hanya aplikasi berbasis web desain, tetapi meskipun ada program lain dengan kesamaan, apa yang membuat satu ini berbeda adalah kemampuannya untuk memenuhi kebutuhan khusus dari perancang antarmuka.
Hal ini jelas orang-orang di belakang Figma memahami bahwa sebagian besar proyek desain antarmuka berbasis tim atau kolaboratif dalam beberapa cara. They're jelas juga menyadari rasa sakit poin tim sering harus bekerja melalui ketika menangani kolaborasi dan sinkronisasi, dengan studios biasanya perlu kasar bersama solusi terdiri dari beberapa desain, pihak ketiga penyimpanan, dan kontrol versi alat.
Figma menghilangkan kebutuhan untuk pendekatan ini terputus-putus dengan menyediakan:
- Lanjutan kemampuan kolaborasi hidup yang secara otomatis menyimpan semua anggota tim yang disinkronkan.
- Gabungan Desain, prototipe dan pengembang tangan-off dalam satu aplikasi sehingga lebih dapat dilakukan di satu tempat.
- Akses pada semua sistem operasi desktop, yaitu Mac, Windows, Linux dan ChromeOS.
Terlepas dari kenyataan Figma's "pada kanvas" alat yang hebat, dan mungkin cukup untuk meyakinkan banyak desainer untuk menggunakan perangkat lunak, ini adalah pendekatan yang berfokus pada kolaborasi yang memimpin banyak Studio untuk menempatkan aplikasi selain lain dan mengkonsolidasikan ke menggunakan Figma sebaliknya.
"Kami sekarang memiliki lingkungan yang dinamis, kolaboratif yang memungkinkan kita untuk melakukan brainstorming bersama-sama, bangkit ide dari satu sama lain dan akhirnya menjadi lebih kreatif."-Taylor Madaffari, Copywriter, lorong roket Studios
Dalam artikel ini Anda akan melihat sendiri mengapa tim mengambil minat pada Figma, seiring langkah Anda melalui bagaimana Anda dapat mengambil keuntungan dari yang gamut penuh dari kolaborasi alat.
Jika Anda belum memiliki rekening Figma Anda bisa mendapatkannya gratis dan ikuti bersama dengan segala sesuatu yang kita bahas.



Kami akan mencakup cukup banyak dalam posting ini, sehingga Anda mungkin ingin ambil kopi pertama:
- Bagaimana kolaborasi Figma dilakukan
- Membuat dan mengelola tim
- Kontrol tingkat akses anggota tim
- Komponen bersama tim dan gaya
- Berbagi dan menanamkan
- Komentar
- Riwayat Versi
- Mengintegrasikan dengan alat-alat tambahan
Bekerja bersama-sama, dokumen yang sama, Real Time
Salah satu fitur kolaborasi Figma yang paling menonjol adalah kemampuan untuk memiliki beberapa anggota tim bekerja sama secara bersamaan, dalam dokumen yang sama, seperti update secara real time.
Hal ini dimungkinkan oleh fakta Figma adalah aplikasi berbasis web. Dalam masa lalu berbasis web desain aplikasi mungkin tidak diambil sepenuhnya serius, tetapi dalam kasus Figma sifat online adalah bagian inti dari apa yang membuatnya begitu menarik.



Untuk setiap orang dengan Figma tertentu file terbuka, kolaborator lain akan melihat sedikit pointer mouse melayang-layang kanvas dengan nama orang itu melekat padanya, menunjuk di mana mereka titik. Setiap perubahan yang mereka buat untuk dokumen akan di-relay ke semua anggota lain, yang akan melihat perubahan-perubahan tersebut muncul secara real time. Perubahan dalam Figma file tersedia untuk orang lain, langsung.
Ini terpusat, nyata waktu update dari kolaboratif file berarti:
- Tidak ada lagi mengirimkan file bolak-balik antara anggota tim.
- Tidak ada lagi yang mengkonversi dari satu format ke lain untuk berurusan dengan software yang berbeda untuk tahap yang berbeda dari proyek.
- Tidak ada lagi upload file ke pihak ketiga penyimpanan sehingga anggota tim lainnya dapat mengakses perubahan.
- Lagi mendapatkan keluar dari sinkronisasi antara perubahan satu anggota memiliki dalam file mereka dan anggota lain mereka telah di mereka.
- Anda dapat bekerja melalui ide-ide dan saran bersama-sama, seperti Anda sedang mendiskusikan mereka.
- Demikian pula, Anda dapat menerapkan klien umpan balik seketika saat Anda menunjukkan kepada mereka sebuah desain.
Jadi bagaimana Anda pergi tentang memungkinkan orang untuk berkolaborasi dengan cara ini? Mari kita Cari tahu.
Bagaimana kolaborasi Figma dilakukan
Dalam Figma ada dua cara Anda dapat bekerja sama.
- Satu adalah melalui membuat dan mengelola tim anggotanya semua memiliki akses ke proyek-proyek bersama (pendekatan besar untuk studios).
- Yang lain adalah melalui berbagi dokumen, yang dapat baik untuk lebih bebas-bentuk berbasis masyarakat kerjasama.
Kita akan mulai dengan melihat tim, yang menjadi fokus utama Figma kolaborasi.
Membuat dan mengelola tim
Untuk memulai bekerja dengan tim di Figma Anda harus membuat tim baru pertama. Login ke Figma dan menekan tombol tim baru di sudut kiri bawah antarmuka:



Di halaman Anda kemudian akan diarahkan ke, masukkan nama untuk tim baru Anda:



Selanjutnya, Anda akan dibawa ke halaman di mana Anda dapat memilih antara dua tim rencana jenis. Anda dapat menggunakan tingkat gratis, yang memungkinkan tim dua orang dan pemirsa yang terbatas untuk mengakses tiga proyek, atau rekening dibayar untuk anggota tim dan proyek-proyek serta Beberapa fitur tambahan yang Anda dapat membaca tentang pada halaman harga Figma.



Mengundang anggota tim
Saat ini tim Anda telah dibuat dan siap untuk Anda untuk mengundang anggota.
Di daerah browser file Figma, terlihat di sidebar kiri untuk melihat nama tim Anda hanya mengatur. Klik untuk pergi ke jendela manajemen untuk tim:



Di kanan bawah antarmuka Anda akan melihat sebuah area dengan judul anggota tim, dan di bawah judul yang Anda akan melihat + mengundang link. Klik link untuk memulai proses undangan.



Dalam popup yang muncul, masukkan alamat email dari orang yang Anda ingin mengundang. Pada titik ini Anda juga akan menetapkan tingkat akses anggota tim untuk baik "admin", "bisa mengedit" atau ""dapat melihat"(kita akan pergi ke apa yang berarti izin tersebut segera).



Setelah diundang, orang akan menerima lansiran dalam Figma atau email di mana mereka dapat menerima undangan dan bergabung dengan tim:



Menciptakan tim proyek
Setelah Anda memiliki anggota tim Anda mengundang Anda dapat mulai mendirikan proyek tim dapat semua akses.
Pada halaman manajemen tim, klik + baru proyek link Anda akan melihat di bawah nama tim Anda, di sisi kiri di daerah manajemen tim.



Anda akan mendapatkan popup dengan bidang di mana Anda dapat menambahkan nama proyek baru Anda, dan daftar dropdown untuk mengatur perizinan tingkat proyek untuk tim.
Catatan: pada tingkat gratis Anda hanya bisa memilih opsi pertama izin, "semua orang di <team>dapat mengedit" (izin ini akan dijelaskan kemudian).</team>



Sekarang ketika Anda melihat daftar di bawah "Tim proyek" Anda harus melihat proyek Anda baru dibuat, siap untuk tim Anda untuk mulai bekerja pada.



- Untuk lebih di tim manajemen kunjungi: Figma Bantuan: membuat dan mengelola tim Anda
Kontrol tingkat akses anggota tim
Setiap anggota tim dapat memiliki tingkat akses mereka secara individual diatur ke salah satu dari empat pilihan:
- Pemilik.
- Admin.
- Editor.
- Penampil.
Ini tingkat kontrol akses:
- Apakah Anda dapat mengedit atau hanya melihat file.
- Tingkat anggota tim Anda dapat mengundang untuk proyek.
- Tingkat anggota tim untuk siapa Anda dapat mengubah hak akses.
Tingkat akses anggota tim akan berlaku untuk semua bahwa tim proyek dan file.
Yang dapat mengubah file?
Setiap tingkat kecuali pemirsa dapat membuat perubahan ke file.
Pemilik dan undangan Admin dan pengaturan izin
Pemilik dan admin dapat mengesahkan sebuah tim dengan kendur, mengundang anggota tim sebagai admin, editor atau pemirsa, dan juga mengubah hak akses anggota tim.
Pemilik dan admin adalah fungsional sama, tapi hanya mungkin ada satu set orang dengan status pemilik sehingga tampaknya menjadi terutama tentang berkomunikasi siapa yang bertanggung jawab atas proyek. Pemilik dapat mentransfer bahwa status ke anggota tim lainnya.
Editor dan penampil undangan dan pengaturan izin
Editor dapat mengundang dan mengubah hak akses untuk editor dan pemirsa. Pemirsa dapat mengundang pemirsa lain tetapi tidak dapat membuat perubahan izin.
Mengubah tingkat akses
Anda dapat mengubah tingkat akses anggota tim di sudut kanan bawah halaman tim, tim pengaturan di bawah:



Atau Anda dapat mengeklik ikon roda gigi Admin Dashboard link di bagian atas kanan, dekat judul tim pengaturan:



Di sini Anda memiliki opsi untuk downgrade anggota untuk "Penampil":



Lanjutan izin untuk tim Pro
Jika Anda berada pada tingkat yang dibayar di Figma Anda dapat menggunakan "Advanced Permissions", dimana proyek-proyek individu dapat memiliki tingkat akses yang menimpa anggota tim tingkat akses yang normal. Berikut adalah opsi-opsi tambahan yang disebutkan sebelumnya tersedia di dibayar tingkatan bila Anda membuat proyek baru.
Sebagai contoh, jika sebuah proyek diatur ke "setiap orang di <team>dapat melihat", anggota tim bahkan yang memiliki izin Editor tidak akan mampu membuat perubahan dalam proyek.</team>
Opsi default, tersedia pada tingkatan gratis, adalah:
- Semua orang di <team>dapat mengedit: ini adalah fungsi akses normal, sehingga tingkat izin individu diutamakan.</team>
Pilihan lanjutan izin adalah:
- Semua orang di <team>dapat melihat: anggota tim dapat lihat tetapi tidak mengubah proyek.</team>
- Hanya mengundang - biarkan aku memilih siapa yang memiliki akses: proyek tidak terlihat kecuali seseorang secara eksplisit diundang.
- Baca lebih lanjut mengenai ijin Figma: Figma Bantuan: izin
Komponen bersama tim dan gaya
Komponen dalam Figma pra-dibuat objek grafis yang dapat digunakan kembali sebagai diperlukan, seperti kartu, judul dan tombol. Gaya di sisi lain adalah pra-dikonfigurasi koleksi properti yang dapat diterapkan ke objek, seperti teks styling.
Sebagai contoh, ini adalah Perpustakaan penuh tarik & drop siap komponen UI bahan:



Aku tidak akan pergi terlalu banyak ke dalam kemampuan komponen dan gaya sekarang, ketika kita berfokus pada kolaborasi alat, tetapi jika Anda ingin mempelajari lebih lanjut tentang masing-masing, kunjungi:
Berbagi Perpustakaan
Perpustakaan komponen dan gaya dapat dibagi di seluruh tim. Pada halaman manajemen tim untuk tim Anda, lihat di bawah "Tim pengaturan" di bagian kanan atas dan klik tautan mengaktifkan Perpustakaan.



Anda akan melihat daftar pustaka yang berpotensi tersedia untuk tim dan Anda dapat beralih akses on atau off untuk masing-masing:



Tips untuk mencegah kecelakaan komponen perubahan
Catatan: jika Anda memiliki akses ke lanjutan perizinan, seperti dijelaskan sebelumnya, Anda dapat menggunakannya untuk memastikan tidak ada yang membuat setiap perubahan tidak disengaja komponen yang kemudian bisa digulung di seluruh papan. Hanya perlu komponen utama Anda dalam proyek-proyek hanya Lihat, kemudian anggota tim Anda akan dapat melihat dan menggunakan komponen tapi tidak memodifikasi mereka.
- Untuk lebih tim di Perpustakaan kunjungi: Figma blog: tim Perpustakaan 1.0
Berbagi dan menanamkan
Kolaborasi Figma adalah tidak hanya untuk tim sendirian. Anda juga dapat menggunakan fungsi berbagi memungkinkan siapa pun untuk mengedit atau melihat salah satu dokumen Anda, sehingga besar untuk lebih longgar terkoordinasi masyarakat dan orang-orang hanya mencari untuk menciptakan dan hadiah aset dengan desainer lain.
Untuk berbagi dokumen tekan tombol berbagi biru di ujung kanan atas toolbar.



Dalam popup yang muncul klik link yang mengatakan memungkinkan akses link.



Setelah selesai, di samping baris yang berbunyi siapa pun dengan link, pilih apakah Anda ingin orang untuk dapat mengedit atau hanya melihat dokumen. Anda juga dapat menghapus akses link di sini kemudian jika Anda perlu.



Selain itu, pada yang sama "Berbagi" popup Anda dapat mengundang seseorang secara langsung daripada memungkinkan akses link. Seperti halnya dengan anggota tim, setiap orang yang mendapatkan akses mengedit dokumen melalui berbagi dapat berkolaborasi di atasnya secara real time.
- Baca lebih lanjut tentang berbagi Figma dokumen-dokumen berikut: Bantuan Figma: berbagi file dan proyek
Embedding
Jika Anda ingin agar dapat menampilkan desain Figma dari dalam situs lain, Anda dapat melakukan ini dengan embedding.
Sementara masih dalam kotak yang terbuka ketika Anda menekan tombol berbagi, klik <>umum menanamkan link di bagian bawah untuk mendapatkan copy dan paste siap menempelkan kode:



Setelah HTML ini digunakan untuk menanamkan dokumen Figma dalam Halaman ini akan terlihat seperti ini:



File tertanam update secara real time, memastikan versi terbaru selalu sedang ditampilkan.
- Untuk lebih di Figma hidup menanamkan Dibaca: Figma Bantuan: menanamkan Figma hidup
Komentar
Meskipun kolaborasi dapat terjadi dalam real time melalui Figma, itu tidak berarti itu selalu harus. Untuk komunikasi yang tidak secara real time komentar sistem datang ke dalam bermain, sehingga setiap anggota tim atau klien dengan pemandangan akses dapat menambahkan umpan balik di posisi apapun di atas kanvas desain.



Ketika meninggalkan komentar, anggota tim lainnya akan melihat peringatan atas ikon komentar pada toolbar, dan Kapan lansiran yang diklik pada sedikit pidato gelembung akan muncul pada halaman. Pada gilirannya, ketika gelembung diklik teks komunikasi panel akan terbuka melalui yang catatan dapat ditukar.
- Untuk membaca lebih banyak di komentar di Figma: Figma Bantuan: komentar
Riwayat Versi
Salah satu layanan pihak ketiga yang tim kolaboratif sering perlu untuk mengkoordinasikan alur kerja mereka adalah beberapa jenis sistem kontrol versi. Dengan Figma ini dibangun tepat di dan semua itu terjadi secara otomatis, dengan versi diselamatkan setiap kali ada suatu periode tidak aktif pada file selama 30 menit, yaitu ketika tak seorang pun sedang mengerjakan berkata file.
Riwayat Versi kembali 30 hari pada tingkat gratis, dan tidak terbatas pada tingkatan yang dibayar.
Untuk melihat Riwayat Versi file, membukanya kemudian tekan v berbentuk link di sebelah kanan nama file pada bagian atas toolbar, dan memilih Tampilkan Riwayat Versi:



A list of saved versions will appear in the right sidebar:



Jika Anda klik salah satu item berikut versi file yang terkait akan memuat ke kanvas, item dalam daftar Riwayat Versi akan berubah menjadi biru, dan tiga titik akan muncul di samping itu. Jika Anda mengklik ini tiga titik-titik yang Anda akan mendapatkan di mana Anda dapat mengubah nama menu, mengembalikan atau duplikat versi itu.



- Lebih pada versi sejarah di Figma Figma membantu: sejarah versi
Integrasi dengan alat-alat tambahan
Figma telah Anda cukup banyak tertutup pada semua yang Anda butuhkan untuk berkolaborasi dalam ruang desain. Tapi itu juga membantu Anda untuk memperluas pilihan kolaborasi luar proses desain dengan mengintegrasikan dengan berbagai macam alat pihak ketiga.
Kendur
Kendur integrasi adalah titik fokus tertentu bagi Figma, dengan kemampuan untuk mengubah setiap tim kendur yang ada menjadi tim Figma. Anda juga dapat memiliki pemberitahuan dikirim melalui kendur ketika komentar kiri di Figma file.
- Lebih pada integrasi kendur di: Figma Bantuan: Figma kendur
Dribbble
Figma memiliki kelancaran arus ekspor bingkai dan mendorongnya langsung ke Dribbble.
- Lebih pada integrasi Dribbble di: Figma Bantuan: Figma dan Dribbble
Zeplin
Figma sudah memiliki alat tangan-off pengembang sendiri, tetapi jika Anda masih membutuhkan atau ingin menggunakan Zeplin pula Figma menyediakan integrasi dengan mudah mengekspor frame menjadi proyek Zeplin.
- Lebih pada integrasi Zeplin di: Figma Bantuan: Figma dan Zeplin
Dropbox kertas
Figma's integrasi dengan Dropbox bukan untuk tujuan penyimpanan, melainkan itu adalah untuk memungkinkan Anda untuk dengan cepat embed desain ke file-file kertas Dropbox. Kertas adalah dokumen kolaboratif mengedit layanan. Jadi tim Anda juga dapat berkolaborasi pada dokumen, sementara desain Figma yang tertanam di dalamnya update secara real time sebagai perubahan yang dibuat untuk itu.
- Lebih pada kertas Dropbox integrasi di: Figma Bantuan: Figma dan Dropbox
JIRA dan Trello
Untuk membantu dengan sisi manajemen proyek hal, Figma terintegrasi dengan Jira kedua dan Trello, memungkinkan Anda untuk memiliki hidup yang komprehensif Figma file di dalam masalah / kartu.
- Lebih pada Jira integrasi di: Figma Bantuan: Figma dan Jira
- Lebih pada integrasi Trello di: Figma Bantuan: Figma dan Trello
Membungkus
Seperti yang Anda lihat, Figma menyediakan array mengesankan fitur untuk membantu antarmuka desainer bekerja sama bersama-sama dan efisien. Beberapa yang umum sakit poin tim berbasis proyek pergi dengan ini terpusat, pendekatan berbasis web.
Dan sebagai mengesankan seperti alat-alat kolaborasi Figma, itu masih hanya sebagian dari apa yang membuatnya menarik dan menarik aplikasi tersebut.
Untuk mempelajari lebih lanjut tentang mengapa Anda harus memberikan Figma berjalan, periksa beberapa tutorial dan kursus lain kami:


FigmaFigma lapisan Panel TipsKezz Bracey

Desain UIBaru kursus: Pengantar FigmaAndrew Blackman

FigmaMelampaui dasar-dasar desain UI dalam kursus Figma kami baru.Andrew Blackman



