Membangun dan Menskalakan Sistem Desain di Figma: Studi Kasus

Menentukan bagaimana membangun sistem desain untuk perusahaan multinasional berarti membuat katalog setiap komponen dan pola dengan sangat teliti. Ini adalah usaha besar yang membutuhkan pandangan gambaran besar dan fokus pada hal-hal spesifik. Inilah cara seorang pemimpin tim sistem desain menyelesaikannya.

Ketika perusahaan induk yang berbasis di Swiss, ABB, mulai membuat sistem desain, tujuannya adalah untuk menyatukan tampilan dan nuansa yang konsisten untuk ratusan produk perangkat lunak, banyak di antaranya memberi daya pada sistem mekanis yang membuat pabrik, tambang, dan lokasi industri lainnya tetap beroperasi. . Itu bukan tugas kecil untuk sebuah perusahaan dengan hampir dua lusin unit bisnis dan hampir 150.000 karyawan di seluruh dunia. Untuk Abdul Sial, yang menjabat sebagai desainer produk utama di tim sistem desain 10 orang ABB, penskalaan perpustakaan komponen dan pola bergantung pada pemeliharaan keterbukaan dan transparansi, dengan penekanan pada dokumentasi ekstensif.

Peran Desainer Sistem Desain

Semakin banyak, perusahaan besar seperti ABB memiliki tim yang didedikasikan secara eksklusif untuk menciptakan dan memelihara sistem desain. “Sistem desain memungkinkan konsistensi, masuk ke pasar dalam waktu yang adil dan tidak membiarkan produksi terjebak pada penyesuaian yang tidak membangun nilai,” kata desainer yang berbasis di Madrid, Alejandro Velasco. Atau, seperti yang dijelaskan oleh Alexandre Brito, seorang desainer di Lisbon, Portugal, “Sistem desain datang untuk menyediakan struktur setiap kali ada banyak orang yang menggunakan seperangkat alat yang sama. Ini seperti semua orang memiliki bahasa yang sama.”

Jika panduan gaya tradisional mencakup dasar-dasar desain—font dan warna, misalnya—sistem desain memiliki jangkauan lebih jauh. “Sistem desain adalah campuran dari panduan gaya, ditambah komponen desain, pola desain, komponen kode dan, di atasnya, dokumentasi,” kata Sial. Ketika dia mengerjakan sistem desain ABB, sekitar 120 desainer menggunakannya secara teratur. Upaya tersebut mewakili versi 4.8 dari sistem, dan tim menjulukinya "Evolusi Desain."

Desainer sistem desain memainkan peran yang berbeda dari mereka yang hanya fokus pada produk individu. “Anda memiliki pandangan luas tentang semua produk berbeda yang digunakan perusahaan,” kata Sial.

Bekerja dalam operasi desain juga membutuhkan komunikasi dengan pemangku kepentingan di seluruh perusahaan. “Desainer sistem desain harus sosial,” kata Velasco. “Seorang perancang sistem desain harus benar-benar suka bekerja dan berbicara dengan orang-orang yang memiliki peran berbeda dalam suatu organisasi. Mereka harus dapat membedakan umpan balik apa yang harus disertakan untuk membangun sistem desain di sekitar kebutuhan perusahaan.”

Siklus Hidup Komponen

Bekerja pada sistem desain ABB, Sial dipandu oleh satu filosofi menyeluruh: “Dokumentasi, dokumentasi, dokumentasi.” Untuk setiap elemen yang dapat digunakan kembali di situs web ABB, layar seluler, atau layar besar yang berdiri sendiri, Sial ingin menunjukkan apa yang disebutnya siklus hidup suatu komponen. Itu berarti penyimpanan catatan yang ekstensif untuk semua komponen dan pola—remah roti, header, input, atau tombol, untuk menyebutkan beberapa saja. “Bagaimana perjalanan yang dilaluinya? Keputusan apa yang diambil? Dengan begitu kita tidak selalu membuat ulang segalanya. Sebelum mencoba sesuatu, Anda dapat membaca dan melihat bahwa seseorang telah mengujinya,” kata Sial.

Dalam pengalamannya, filosofi ini berangkat dari pendekatan khas dokumentasi. Dalam dunia pengembangan produk yang serba cepat, misalnya, dokumentasi sering kali ditulis di akhir proyek atau ditinggalkan sama sekali. Tetapi untuk sistem desain, kata Sial, dokumentasi harus lebih dari sekadar renungan. “Sistem desain tidak pernah selesai; perlu perbaikan terus-menerus,” katanya. “Pembuat sistem desain dan konsumen ingin memahami proses pemikiran dan keputusan untuk terus meningkatkannya.”

Dokumentasi sangat penting untuk sistem desain sebesar ABB. “Dengan tim sebesar itu, Anda harus bisa berkembang,” katanya. “Bagaimana kami dapat memastikan bahwa setiap orang yang bergabung dengan tim dapat dengan cepat membuka komponen apa pun dan memahami bagaimana itu dimulai, bagaimana itu diedit, dan versi apa yang mereka gunakan?”

Menemukan Alat yang Tepat

Ada banyak alat di luar sana untuk membangun sistem desain, termasuk Figma, Sketch, dan Adobe XD. Sial bereksperimen dengan beberapa, mencoba campuran alat desain dan manajemen proyek sebelum memilih Figma, yang menawarkan banyak ruang untuk dokumentasi.

Sial dan timnya menentukan bahwa setiap komponen harus berada di dalam filenya sendiri. “Sebagian besar waktu, Anda mengerjakan satu komponen pada satu waktu. Jika Anda meletakkan semua komponen dalam satu file, itu memperlambat Figma. Dengan memberikan setiap komponen filenya sendiri, lebih cepat untuk dibuka dan Anda memiliki seluruh riwayat dan dokumentasi di satu tempat,” katanya.

Mengatur Hirarki

Sial mengatur sistem desain ABB sehingga file untuk setiap komponen dan pola memiliki halaman yang sama. Gambar yang mengikuti detail apa yang ada di setiap halaman.

Menutupi

Sial merekomendasikan untuk menyiapkan halaman sampul sederhana untuk setiap komponen. Di Figma, ini memungkinkan pratinjau thumbnail dari semua komponen dan membantu dengan kemampuan penelusuran file. Dalam pengaturan ABB, halaman sampul menyertakan nama komponen dan fase apa itu: desain, pengembangan, atau dirilis. Status dapat dengan mudah diperbarui saat komponen berjalan.

Inventaris, Kasus Penggunaan, dan Permintaan

Halaman ini berisi contoh berbagai cara komponen muncul dalam produk digital perusahaan. Dalam hal komponen bidang teks, misalnya, halaman inventaris akan menunjukkan tampilan bidang teks di abb.com dibandingkan dengan tampilannya di iPhone dibandingkan dengan tampilannya di perangkat Android. “Inventarisasi memungkinkan kami untuk memahami dengan jelas apa yang sudah ada di sana,” kata Sial.

Halaman ini juga harus menunjukkan cara komponen digunakan secara tidak benar. “Ini memungkinkan Anda untuk melihat produk Anda dan melihat di mana ada keberpihakan dan ketidaksejajaran,” kata Sial. Dia menyarankan tim yang meluncurkan proyek sistem desain untuk memulai dengan membuat katalog apa yang sudah ada. “Mulailah dengan inventaris dan itu akan memandu Anda saat Anda membuat desain,” katanya.

Referensi, Praktik Terbaik, dan Analisis Kompetitif

Sial menyarankan untuk membuat bagian dari setiap file komponen yang mirip dengan papan visi, menunjukkan bagaimana perusahaan lain merancang bagian yang sebanding. “Seperti hal lainnya, praktik terbaik adalah melakukan analisis kompetitif dan melihat bagaimana orang lain melakukannya,” katanya. “Amati produk lain dan lihat pembelajaran mereka.”

Tes dan Data

Halaman data hasil pengujian menggabungkan semua data yang terkait dengan pengujian komponen, termasuk hasil pengujian A/B dan umpan balik dari pengguna dan pemangku kepentingan. Singkatnya, Sial berkata, "Ini adalah keseluruhan cerita dari sebuah komponen." Mungkin tim desain mencoba variasi baru dua tahun lalu dan ternyata tidak berhasil? “Mungkin kami mengerjakan variasi itu dan kami membuangnya karena suatu alasan,” katanya. Jika demikian, sejarah semacam ini dapat menghemat waktu yang signifikan dengan memastikan bahwa desainer tidak mencobanya lagi.

Cakupan

Halaman berikutnya menjabarkan ruang lingkup komponen sehingga desainer dapat mewujudkan desain. Pada saat mereka tiba di halaman lingkup, Sial berkata, “Kamu punya cerita. Anda memahami inventaris semua produk. Anda tahu apa yang perlu Anda bangun dan Anda tahu persyaratannya. Sekarang saatnya untuk menuliskannya dan membuat ringkasannya.” Dia menambahkan bahwa menciptakan ruang lingkup harus menjadi proses kolaboratif dengan pemilik produk, pengembang, dan desainer.

Versi

Gambar versi final komponen dapat ditemukan di sini, dengan iterasi terbaru disematkan di atas. Desainer lain harus dapat meninjau dan mengomentarinya.

Bak pasir

Kotak pasir memungkinkan desainer untuk bereksperimen dengan berbagai iterasi komponen atau pola secara langsung di Figma. “Ini bisa berantakan, dan tidak ada standarisasi,” kata Sial. “Ini hanya taman bermain di mana seorang desainer memiliki kebebasan untuk melakukan apa saja.”

Komponen Figma

File juga berisi halaman untuk komponen Figma itu sendiri, elemen UI yang mudah diulang di seluruh sistem desain. Perancang dapat membuat perubahan pada komponen, dan perubahan itu akan mengisi semua komponen komponen tersebut di seluruh perusahaan, menjaga semuanya tetap konsisten. Halaman ini akan diekspor ke perpustakaan sistem desain Figma, dan setiap desainer individu dapat menarik dan melepas komponen Figma ke dalam desain mereka. Jika tim sistem desain perlu membuat perubahan pada komponen, mereka dapat membuatnya sekali dan menyebarkannya ke seluruh perusahaan.

Aturan Gaya

Selanjutnya, perancang dan pengembang sistem desain membuat halaman aturan gaya, semacam kumpulan semua elemen yang, kata Sial, "tidak terlihat dalam desain." Misalnya, bagaimana komponen akan dirender saat Anda menggulir halaman ke bawah? Ini juga tempat tim sistem desain melacak pertanyaan atau masalah yang belum terselesaikan. Dia mengatakan dia terkejut melihat betapa integralnya halaman ini: "Pada awalnya, kami pikir halaman ini tidak begitu penting, tetapi sekarang kami menyadari bahwa kami menghabiskan sebagian besar waktu kami di sini."

Serahkan

Catatan serah terima adalah instruksi untuk pengembang dalam menulis kode untuk komponen. Dokumen serah terima dimulai dengan anatomi komponen, kemudian mencakup variasinya.

Dokumen serah terima sistem ABB juga mencakup token desain. Menjadi semakin populer dalam sistem desain skala besar seperti ABB, token desain adalah potongan informasi gaya platform-agnostik tentang elemen UI, seperti warna, jenis huruf, atau ukuran font. Dengan token desain, seorang desainer dapat mengubah nilai—menunjukkan bahwa tombol ajakan bertindak harus berwarna oranye, bukan biru, misalnya—dan perubahan itu akan muncul di mana pun token digunakan, baik di situs web, iOS, atau platform Android.

Sial juga membuat plug-in token Figma untuk memperluas cakupan token yang dapat dibuat oleh desainer di Figma. “Figma mendukung warna, tipografi, bayangan, dan gaya grid,” katanya. Plug-in akan menghasilkan token untuk lebih banyak variabel, seperti opacity dan lebar perbatasan. Ini juga menciptakan konvensi penamaan standar, sehingga desainer tidak perlu melacak nama token secara manual. “Plugin menjembatani kesenjangan antara pengembang dan desainer. Hal ini memungkinkan keduanya untuk bekerja pada satu sumber kebenaran untuk desain; jika seseorang membuat perubahan di satu tempat, perubahan itu berlaku di mana-mana dalam desain dan kode,” katanya.

Sial menekankan bahwa dalam sistemnya, pengembang mengambil peran aktif selama pembuatan komponen. “Sejak awal, kami akan melibatkan pengembang kami ketika kami memiliki sesuatu yang siap untuk ditunjukkan kepada mereka,” katanya. “Kemudian kami menyadari bahwa itu tidak berhasil, dan sekarang kami benar-benar memulai sesi kickoff dengan mereka.”

Halaman Web Dokumentasi

Halaman terakhir dari setiap file berisi halaman web dengan desain akhir, yang menunjukkan bagaimana komponen terlihat sebagai produk jadi. “Kami membuat halaman yang menunjukkan bagaimana contoh langsung akan terlihat sehingga pengguna, dalam hal ini desainer kami, dapat melihat bagaimana tampilannya di akhir hari di situs web nyata,” kata Sial.

Kolaborasi Adalah Kunci

Peran perancang sistem desain sangat beragam. Seperti yang dikatakan Alejandro Velasco, “Mendesain sistem desain melibatkan begitu banyak peran, dan jika saya yang memimpin, saya adalah perekat untuk proyek tersebut.”

Ini adalah usaha besar dan belum tentu langkah yang tepat untuk semua perusahaan. Startup, misalnya, mungkin lebih baik memulai dengan sistem out-of-the-box seperti Google Material Design atau IBM Carbon Design System, daripada mendedikasikan sumber daya yang luas untuk membuatnya. Namun, waktunya mungkin akan tiba ketika itu tidak akan cukup, kata Alexandre Brito: “Begitu Anda memiliki banyak desainer yang bekerja sama, Anda mulai menyadari bahwa ada kebutuhan bagi seseorang untuk membuat aturan yang lebih sesuai dengan produk atau merek yang sedang Anda bangun.”

Membangun sistem desain membutuhkan kerja dan dedikasi; itu juga butuh kerjasama. Sial menekankan bahwa pelibatan semua pemangku kepentingan dalam pengembangan sistem ABB sepanjang proses menjadi prioritas. “Itu benar-benar pekerjaan berulang dengan seluruh tim saya. Itu semua tentang mendengarkan mereka dan kami meluangkan waktu untuk mempelajari dan mengujinya secara menyeluruh dan mengembangkan struktur ini, ”katanya.

Memiliki struktur yang mencakup dokumentasi ekstensif, termasuk sejarah dan praktik terbaik, merupakan inti dari sistem desain Figma. “Ini sukses karena orang bisa membaca dokumentasi di satu tempat,” kata Sial. “Mereka dapat melihat semuanya, mulai dari use case hingga desain dan beralih ke serah terima dan halaman komponen akhir. Orang-orang dapat melihat seluruh siklus hidup suatu komponen.”

Anda dapat menelusuri file Figma Abdul Sial secara keseluruhan di sini: Component Template .

Bacaan lebih lanjut di Blog Desain Toptal:

• Konsistensi Adalah Kunci – Bagaimana Membangun Sistem Desain Figma
• Kekuatan Struktur – Panduan untuk Merancang Model Sistem
• Memahami Sistem dan Pola Desain
• Kekuatan Figma sebagai Alat Desain
• Tutorial Mini – Memanfaatkan Fitur Figma untuk Seluruh Proses Desain