Desain Pada Skala: Satu Tahun Dengan Figma

Artikel ini akan membahas tentang bagaimana tim besar dapat memperoleh manfaat dari penggunaan alat yang lebih terbuka dan kolaboratif serta bagaimana membuat adopsi dan migrasi menjadi layak dan menyenangkan. Juga, jika Anda belum menebak dari judul artikel, sebagian besar akan tentang Figma dan bagaimana kami berhasil mengadopsi alat desain ini di tim kami.

Audiens yang dituju adalah desainer berpengalaman yang bekerja dalam tim yang lebih besar dengan sistem desain, pengembang, atau manajer produk yang ingin meningkatkan cara kerja tim lintas fungsi di organisasi mereka.

Saya telah menggunakan alat desain dalam lingkungan profesional selama lebih dari sepuluh tahun dan saya selalu berusaha membuat tim yang saya layani bekerja lebih efisien dan lebih efektif. Dari skrip dan tindakan di Photoshop, hingga pustaka widget di Axure, hingga plugin Sketch, dan sekarang dengan Figma — saya telah membantu tim desain tetap terdepan tanpa meninggalkan pengembang atau manajer produk.

Pengetahuan dasar tentang sistem dan alat desain akan membantu, tetapi tidak perlu karena saya berharap dapat membagikan contoh spesifik dan juga konsep dan metode "tingkat tinggi" yang dapat Anda sesuaikan untuk tim atau konteks Anda.

Alur Kerja Desain Kami Sekitar Tahun 2015

Alat utama kami di tahun 2015 adalah Sketch, dan di situlah kesamaan berhenti. Kita semua memiliki metode yang berbeda untuk membuat prototipe, mengekspor, dan berbagi desain dengan pemangku kepentingan (InVision, Axure, Marvel, Google Slides, dan bahkan Adobe PDF kuno) dan pengembang (Avocode, Zeplin, plugin tanpa aplikasi mandiri seperti Measure). Pada kesempatan langka, kami dapat mengirim file langsung ke teknisi yang cukup beruntung memiliki kombinasi langka dari lisensi MacBook dan Sketch.

Ketika InVision merilis plugin Craft, kami sangat senang — dapat membuat prototipe dan mengunggah layar dari Sketch ke InVision, berbagi komponen dan gaya di perpustakaan yang baru lahir di seluruh file — itu adalah impian desainer yang menjadi kenyataan.

Akhirnya, kami semua berkumpul di platform InVision. Kami membuat dan mendokumentasikan proses yang membantu mengurangi banyak gesekan dalam kolaborasi pemangku kepentingan dan penyerahan pengembang. Namun, karena struktur izin yang rumit, InVision tetap menjadi ekosistem tertutup — jika Anda bukan seorang desainer, ada rantai persetujuan yang mempersulit untuk mendapatkan akun InVision, dan begitu Anda mendapatkan akun, Anda harus ditambahkan kepada kelompok yang tepat.

Mengelola versi dan file secara manual, menyimpan dan mengaturnya di drive bersama, dan menangani konflik sinkronisasi hanyalah beberapa hal yang membuat kami pusing.

Bisakah kita benar-benar memiliki alat all-in-one yang memiliki semua fitur terbaik dari Sketch dan InVision, dengan kolaborasi real-time dan fitur komunikasi yang ditemukan di Google Documents? Selain mengurangi overhead dari pengalihan konteks, kami juga berpotensi menyederhanakan dari tiga langganan alat (untuk maket, pembuatan prototipe, dan penyerahan pengembang), menjadi hanya satu.

Proses

Desainer pertama dari tim kami yang mengadopsi Figma mulai bereksperimen dengannya ketika Figma beta pertama dirilis pada 2016. Fiturnya terbatas tetapi mencakup 80% dari apa yang kami butuhkan. Impor sketsa bermasalah, tetapi kami masih menemukan nilai luar biasa untuk dapat berkolaborasi secara real-time dan yang terpenting, kami dapat melakukan 90% pekerjaan desain untuk sebuah proyek di dalam satu alat. Umpan balik pemangku kepentingan, revisi, dan penyerahan pengembang meningkat secara eksponensial.

Pada tahun 2017, kami memiliki beberapa desainer yang menggunakannya untuk sebagian besar pekerjaan mereka, dan salah satu desainer Lexicon (sistem desain Liferay), Emiliano Cicero, dengan cepat menjadi penginjil — yang ternyata menjadi faktor kunci dalam meyakinkan sisa tim untuk beralih.

Ketika Figma 2.0 memulai debutnya pada musim panas 2017 dengan fitur prototyping ditambahkan dan peningkatan besar pada kemampuan handoff pengembang, kami tahu ini bisa menjadi alat yang layak untuk tim global kami. Tetapi bagaimana Anda meyakinkan 20+ desainer untuk meninggalkan alat dan alur kerja yang mereka sukai dan telah digunakan dengan nyaman selama bertahun-tahun?

Saya dapat menulis seri tentang subjek itu, tetapi saya akan meringkasnya dengan mengatakan dua hal terbesar adalah: memulai dari yang kecil , dan menciptakan infrastruktur yang solid .

Mulai dari yang Kecil

Pada musim gugur 2017, kami memulai uji coba pertama Figma dengan tim produk yang didistribusikan antara Amerika Serikat dan Brasil. Kami beruntung bisa mengadakan kickoff bersama selama seminggu di kantor kami di Los Angeles. Merancang aliran dan gambar rangka bersama di Figma jauh lebih cepat dan efisien. Kami dapat membagi tugas dan berbagi file dan komponen tanpa harus khawatir terus-menerus menyinkronkan folder atau perpustakaan.

Pada pertemuan global kami pada Januari 2018, kami merumuskan rencana untuk mengadopsi Figma secara perlahan, menggunakan pengalaman tim ini untuk membantu membentuk infrastruktur yang kami perlukan untuk seluruh organisasi sehingga migrasi dapat berjalan semulus mungkin.

Tantangan terbesar yang kami hadapi adalah tenggat waktu yang ketat — tidak masuk akal bagi kami untuk mengerjakan ulang proses peninjauan dan penyerahan kami karena skala proyek dengan beberapa tim teknik dan manajer produk yang didistribusikan di seluruh dunia. Meskipun hasil akhirnya akan lebih baik, waktunya tidak tepat. Faktor lain adalah kurangnya pengalaman desain offline yang andal dari Figma (lebih lanjut tentang itu nanti) , dan untuk alasan ini, tim memutuskan untuk menggunakan Sketch dan Figma untuk gambar rangka dan maket, tetapi setiap pembuatan prototipe atau peninjauan harus dilakukan di InVision.

Membuat struktur Figma yang solid

Salah satu langkah pertama adalah merumuskan pedoman kasar untuk proyek, file, dan organisasi komponen. Fondasi untuk hal-hal ini dimulai oleh dua desainer junior (saat itu), Abel Hancock dan Naoki Hisamoto, yang tidak pernah mengembangkan kebiasaan buruk penamaan layer yang tampaknya berasal dari desainer yang memotong gigi mereka di Photoshop. Metode organisasi ini, ditambah dengan satu tahun yang dihabiskan untuk mengembangkan perpustakaan kecil komponen untuk properti Liferay.com, sangat penting untuk menyiapkan tim global lainnya agar sukses.

Peningkatan organisasi awal yang dibuat oleh salah satu desainer Liferay.com kami, yang terinspirasi oleh tweet Ben, adalah sistem sampul kami.

Kami telah menyediakan file ini jika Anda ingin menyalinnya, jika tidak, ini adalah peretasan yang cukup mudah:

1. Buat satu bingkai di halaman pertama file Anda berukuran 620x320.
2. Tambahkan desain Anda. Jika Anda memiliki teks, kami menemukan bahwa ukuran minimum adalah ~24, judul dalam contoh kami ditetapkan pada 48.
3. Menikmati!

Catatan: Akan selalu ada sedikit margin di sekitar sampul Anda, tetapi jika Anda mengatur kanvas halaman dengan warna yang sama dengan kartu, itu akan mengurangi tampilan margin ini.

Ini membantu mengubah perpustakaan kami, tidak hanya untuk desainer, tetapi untuk manajer proyek dan produk serta insinyur yang mencoba menemukan sesuatu dengan cepat. Fungsi pencarian sudah sangat bagus, tetapi sampul membantu orang mempersempit segalanya lebih cepat, ditambah itu memungkinkan kami untuk langsung mengomunikasikan status file apa pun yang diberikan.

Sebelum menggunakan Figma, selain file Sketsa sistem desain 'Master', sebagian besar desainer memiliki file dasar yang telah mereka kembangkan dari waktu ke waktu dengan hal-hal seperti elemen wireframing dan komponen dasar. Saat kami bergabung menjadi satu pola, kami mulai menggabungkan semuanya dan menyempurnakannya menjadi satu perpustakaan. Karena kami melakukan wireframes, maket, dan prototipe di Figma, kami juga mulai meninggalkan aplikasi aliran seperti Lucidchart, daripada membuat komponen alur tugas kami sendiri di Figma.

Utilitas lain yang kami kembangkan dari waktu ke waktu adalah komponen garis merah untuk membuat spesifikasi handoff yang tepat, catatan tempel untuk diagram afinitas (dan apa saja), dan node aliran.

Salah satu manfaat terbesar dari melakukan ini di Figma, adalah bahwa peningkatan pada salah satu komponen ini yang dibuat oleh desainer mana pun dapat dengan mudah ditarik ke perpustakaan dan kemudian didorong ke semua instance. Memiliki ini di tempat terpusat juga membuat pemeliharaan menjadi jauh lebih mudah, karena siapa pun dalam tim dapat berkontribusi untuk peningkatan dengan proses yang relatif sederhana.

Dokumen garis merah adalah untuk memudahkan pengembang mengetahui dimensi, spesifikasi visual, dan properti lain dari komponen UI atau sekumpulan komponen. Jika Anda tertarik dengan topik tersebut, Anda juga dapat membaca artikel Dmitriy Fabrikant tentang cetak biru desain.

Beberapa rekomendasi yang perlu diingat saat membuat komponen:

1. Penggunaan override dan master untuk komponen dasar yang kuat (lebih lanjut tentang itu di sini);
2. Tetapkan pola penamaan yang konsisten (kami menggunakan model atom);
3. Dokumentasikan dan beri label semuanya — terutama lapisan.

Dengan fitur gaya canggih yang dirilis pada awal Juni 2017, tim sistem menyelesaikan versi lengkap dari perpustakaan Lexicon kami di antara rilis produk besar kami pada bulan Juli dan peningkatan pada bulan Agustus. Ini adalah bagian terakhir yang kami butuhkan untuk mendukung tim global. Desainer yang bekerja di Pemasaran dan departemen lain telah menggunakan Figma selama beberapa waktu, tetapi pada musim gugur yang lalu hampir semua tim produk lainnya telah menyelesaikan perpindahan ke Figma.

Sampai hari ini, sebagian besar desainer produk hanya menggunakan Figma, ada juga beberapa desainer yang bekerja di sistem lama dengan banyak prototipe Sketsa rumit yang tidak layak diimpor ke Figma. Pengecualian lainnya adalah beberapa desainer yang terkadang menggunakan aplikasi seperti Principle atau Adobe After Effects untuk animasi yang lebih canggih yang tidak masuk akal untuk dilakukan di Figma. Kami bahkan memiliki beberapa desainer yang mengeksplorasi Framer X untuk prototipe yang lebih kuat, terutama dengan pekerjaan yang membutuhkan pemanfaatan segala jenis data dalam skala besar. Meskipun ada beberapa desainer yang menggunakan beberapa alat secara semi-reguler, 80% desainer produk kami menggunakan Figma untuk semua pekerjaan desain dan pembuatan prototipe mereka.

Perbaikan Berkelanjutan

Kami selalu mencari cara untuk bekerja lebih efektif, dan salah satu hal yang saat ini kami ulangi adalah praktik terbaik untuk memberi nama halaman. Pada awalnya, kami menamai halaman sesuai dengan nama halaman, tetapi itu terbukti bermasalah, ditambah, saat kami meningkatkan perpustakaan kami, kebutuhan akan file yang lebih besar dengan banyak halaman berkurang.

Saat ini, kami menggunakan sistem penomoran dalam file, dengan halaman paling atas yang dikirimkan ke pengembang. Fase berikutnya yang kita diskusikan saat ini adalah membuat versi lebih bermakna dengan label eksplisit (gambar rangka, maket, breakpoint, dll.) dan memanfaatkan versi bawaan Figma dengan lebih baik, menetapkan praktik terbaik untuk kapan dan bagaimana cara menyimpan versi.

Final_Final_Last_2 — Tidak Ada Lagi!

Saya biasanya tidak suka menggunakan istilah 'game-changer', tetapi ketika Figma merilis penamaan/anotasi ke riwayat versi Maret lalu, itu secara dramatis mengubah cara kami mengatur file kami. Sebelumnya, kita semua memiliki cara yang berbeda untuk menyimpan iterasi dan versi.

Biasanya kami akan membuat halaman baru dalam satu file, terkadang dengan file besar kami akan menduplikasinya dan menambahkan huruf di akhir nama file untuk menandakan iterasi. Jika Anda akan membuat perubahan drastis, maka Anda dapat membuat file baru dan menambahkan nomor versi. Ini sangat alami, berasal dari paradigma Photoshop/Sketsa dalam mengelola banyak file untuk semuanya.

Kemampuan untuk bekerja, secara berkala berhenti untuk memberi nama dan membubuhi keterangan suatu titik waktu akan sangat familiar bagi siapa saja yang pernah menggunakan kontrol versi seperti Git sebelumnya. Anda bahkan dapat melihat seluruh riwayat file, dan melihat snapshot sebelumnya, memilih satu dan memberi nama dan membubuhi keterangan.

Jika Anda ingin kembali dan kembali ke versi sebelumnya, Anda dapat memulihkannya dan mengerjakan file tersebut dari titik tersebut dalam riwayat. Bagian terbaiknya adalah Anda tidak kehilangan pekerjaan apa pun karena versi yang Anda 'pulihkan' tidak menghapus apa pun; itu hanya menyalin status itu dan menempelkannya di bagian atas.

Dalam ilustrasi ini, perancang tiba di final 3.0 setelah memulihkan final 1.1 , tetapi riwayat versi file masih sepenuhnya terlihat dan dapat diakses.

Dalam kasus di mana Anda memulai proyek baru, atau ingin membuat beberapa perubahan yang sangat dramatis pada file, Anda mungkin perlu 'membagi' file tersebut. Figma memungkinkan Anda untuk menggandakan file pada titik tertentu dalam riwayat, tetapi penting untuk dicatat bahwa riwayat file tidak akan disalin.

Kami telah menemukan bahwa cara yang baik untuk bekerja dalam sistem berversi ini adalah dengan menggunakan riwayat file Anda dengan cara yang mirip dengan cara pengembang menggunakan git — pikirkan versi Figma sebagai permintaan komit atau tarik, dan beri nama dan anotasi sebagai seperti. Untuk lebih banyak pemikiran yang lebih cerdas tentang ini, saya merekomendasikan Seth Robertson's Commit Frequent, Perfect Later, Publish Once: Git Best Practices — ini adalah filosofi umum yang bagus tentang cara bekerja dalam ekosistem yang dikontrol versi. Juga, Chris Beams's How to Write a Git Commit Message adalah panduan yang bagus untuk menulis catatan yang bermakna dan berguna saat Anda bekerja.

Beberapa tip praktis yang kami temukan:

1. Pertahankan judul hingga 25 karakter atau kurang .
   Judul yang lebih panjang terpotong dan Anda harus mengklik dua kali pada catatan di riwayat versi untuk membuka modal 'Edit Informasi Versi' untuk membacanya.
2. Pertahankan deskripsi Anda hingga 140 karakter atau kurang .
   Deskripsi lengkap selalu ditampilkan, jadi menjaganya tetap pada intinya membantu menjaga riwayat tetap dapat dibaca.
3. Gunakan mood imperatif untuk judul .
   Ini memberi Anda gambaran yang lebih jelas di masa depan tentang apa yang akan terjadi ketika Anda mengklik titik waktu itu, misalnya "mengubah warna tombol menjadi biru" vs. "mengubah tombol menjadi biru".
4. Gunakan deskripsi untuk menjelaskan 'apa' dan 'mengapa' versus 'bagaimana' .
   Menjawab 'mengapa' adalah bagian penting dari setiap pekerjaan desainer, jadi ini membantu Anda fokus pada apa yang penting saat Anda bekerja serta memberikan informasi yang lebih baik untuk Anda di masa depan.

Bekerja Offline

Penafian: Ini didasarkan pada pengalaman kami sendiri, dan sebagian besar merupakan tebakan terbaik kami tentang cara kerjanya.

Seperti yang saya sebutkan sebelumnya, dukungan offline di Figma lemah. Jika Anda sudah membuka file sebelum offline, Anda dapat melanjutkan mengerjakan file tersebut. Sepertinya setiap perubahan yang Anda buat memiliki stempel waktu. Dalam kasus orang lain mengerjakan file yang sama saat Anda offline, maka perubahan terbaru akan diberikan setelah Anda kembali online.

Dalam contoh sederhana ini, sepertinya bukan masalah besar — ​​tetapi dalam kehidupan nyata, ini bisa menjadi sangat berantakan, sangat cepat. Selain kemungkinan besar seseorang mengesampingkan pekerjaan Anda, bingkai dan grup dapat ditumpuk di atas satu sama lain.

Alur kerja kami adalah menduplikasi halaman sebelum (atau setelah) offline, dan kemudian melakukan pekerjaan Anda di salinan itu. Dengan cara itu tidak akan tersentuh ketika Anda kembali online, dan Anda dapat melakukan penggabungan yang diperlukan secara manual.

"F" Adalah Untuk Masa Depan

Mengadopsi alat baru tidak pernah mudah, tetapi pada akhirnya, manfaatnya mungkin jauh lebih besar daripada biayanya.

Area peningkatan terbesar yang dialami tim kami adalah:

• Kolaborasi
  Jauh lebih mudah untuk berbagi pekerjaan dan peningkatan kami dengan tim dan komunitas.
• Transparansi
  Sistem yang terbuka secara default secara alami lebih inklusif bagi orang-orang di luar bidang desain.
• Evolusi
  Menghapus "lapisan" antara desainer dan insinyur, memungkinkan kami untuk mengambil langkah berikutnya dalam kedewasaan desain.
• Operasi
  Mengadopsi alat tunggal untuk gambar rangka, maket, prototipe, dan handoff pengembang membuat hidup lebih mudah untuk akuntansi, TI, dan manajemen.

Mengurangi jumlah langganan secara keseluruhan sangat membantu tim kami, tetapi karena biaya dapat bervariasi dari 'gratis' hingga lebih dari $500 per tahun, ini mungkin tidak masuk akal untuk konteks dan kebutuhan spesifik Anda. Untuk rincian lengkap, lihat halaman harga Figma.

Tumbuh Dan Menjadi Lebih Baik

Tentu saja, tidak ada alat yang sempurna, dan selalu ada ruang untuk perbaikan. Beberapa hal yang hilang dari tools sebelumnya yang kami gunakan adalah:

1. Tidak ada ekosistem plugin .
   Ekstensibilitas Sketch adalah faktor besar dalam membuat peralihan dari Photoshop menjadi mudah. Figma memang memiliki API web, tetapi saat ini, tidak ada fungsi 'tulis'. Untuk saat ini, Sketch tetap menjadi pemimpin pasar dengan komunitas ekstensi dan plugin yang dinamis. (Tentu saja, hal-hal mungkin berubah di masa depan jika Figma membuka panggung untuk pengembangan plugin juga.)
2. Mengimpor data web, atau JSON dalam prototipe .
   Akan jauh lebih mudah bagi kita untuk mendesain dengan data nyata. Sketch baru-baru ini memperkenalkan fitur "Data" di v.52, plugin Craft InVision masih menjadi standar emas dalam hal menambahkan sejumlah besar data yang berbeda dengan mudah — dan untuk saat ini, kita terjebak mengisi bidang teks secara manual.
3. Lebih banyak gerak .
   Integrasi Prinsip bagus (jika Anda memiliki Prinsip), tetapi memiliki animasi dasar dan fitur prototipe lanjutan di Figma akan jauh lebih baik.
4. Pengalaman offline yang lebih lancar
   Seperti yang disebutkan sebelumnya, selama Anda membuka file Figma sebelum offline, Anda baik-baik saja. Ini mungkin OK untuk kebanyakan orang — tetapi jika Anda ingin mematikan komputer Anda setiap malam, itu bisa menyakitkan ketika Anda membukanya di pagi hari di kereta atau pesawat dan menyadari bahwa Anda lupa membiarkan Figma terbuka.

Desain Sumber Terbuka

Beberapa bulan yang lalu, Dann Petty yang selalu kontroversial baru-baru ini men-tweet tentang pengembang yang memiliki GitHub, fotografer memiliki Unsplash — tetapi desainer tidak memiliki platform untuk berbagi sesuatu secara gratis. Design Twitter️ masuk dan dia menghapus tweetnya sebelum saya bisa mendapatkan screengrab, tapi satu hal yang ingin saya sebutkan adalah apa yang sangat kami sukai di Liferay, adalah open source. Untuk itu, kami telah membuat proyek Figma untuk sumber daya untuk dibagikan dengan komunitas desain.

Untuk mengakses salah satu file ini, lihat liferay.design/resources/figma, dan pantau terus saat kami berkembang dan berbagi lebih banyak lagi!

Bacaan lebih lanjut

• “6 Bulan Pertama Kami Dengan Figma,” Danny Saltaren
• “Menunggu Tanda Untuk Mulai Membangun Perpustakaan Komponen Tim Desain Anda?,” William Newton
• “Cara Merampingkan Alur Kerja UI/UX Anda Dengan Figma,” Nicole Saidy
• “Memulai Tim di Organisasi Figma,” Thomas Lowry
• “5 Cara Untuk Menyusun Alur Kerja Anda Dengan Halaman Di Figma,” Josh Dunsterville
• “Praktik Terbaik: Komponen, Gaya, Dan Pustaka Bersama,” Thomas Lowry
• “Figma: Pendekatan Desain Fluid Dan Modular Untuk Tipografi Dengan Komponen,” Mirko Santangelo

Sumber Daya Lainnya

• Komunitas Figma di Spectrum
• Buku Pegangan Desain Figma oleh David Ukauwa