Bagaimana kami membangun semua proses pengembangan dan implementasi desain di sekitar satu alat.
Hai Saya Vanya Solovyov , direktur desain di DocDoc (bagian dari kelompok Sberbank). Hari ini adalah kolom Tim-Tim, di mana saya akan menjelaskan bagaimana kita bergaul dengan tim lain.
Pada 2017, antarmuka kami dibuat di Sketch , prototipe dirakit di Marvel , dan pengembangan dilewatkan melalui Zeplin . Semuanya standar untuk saat itu hingga Figma muncul.
Artikel ini bukan tentang membandingkan alat, artikel seperti itu telah ditulis dalam kelimpahan. Dia adalah tentang bagaimana di perusahaan kami Figma membantu:
- desain untuk menjadi publik, dan bukan hak istimewa satu desainer;
- mengatur seluruh proses pekerjaan desain tanpa dokumentasi yang tidak perlu;
- Singkirkan alat dan sumber daya yang tidak perlu untuk mendukungnya.
Untuk desainer
Perancang tidak lagi menyimpan tata letak secara lokal, sebagai file. Itu tidak bertukar tangkapan layar antarmuka dengan manajer dan tidak mengirim tata letak yang diperlukan untuk desainer lain. Tata letak memiliki tautan dan tersedia untuk semua peserta dalam proses.
Membuat mock-up → membuat prototipe interaktif → menyerahkannya ke pengembangan - dan semua ini dengan satu tautan.
Proses menciptakan desain berhenti melampaui "tujuh meterai", menjadi publik. Kasus umum dalam pekerjaan kami: desainer membuat antarmuka, peserta lain dalam tugas memasuki tata letak dan meninggalkan sarannya dalam bentuk komentar.
Di Figma, nyaman tidak hanya mempertahankan tata letak Anda, menggunakan sistem desain umum, tetapi juga berinteraksi dengan pengembang, penguji, dan manajer. Ketika tim produk melihat fitur, sangat penting untuk tidak menghasilkan versi dan tata letak yang tidak perlu agar tidak memperlambat seluruh tim. Andrey Goranov, desainer.
Untuk manajer
Kami memiliki tujuh manajer produk dan masing-masing adalah pemimpin di bidangnya masing-masing. Demi kenyamanan mereka, kami mengatur file sedemikian rupa sehingga setiap orang memiliki proyek mereka sendiri di Figma : janji temu dengan dokter, diagnostik, telemedicine, dll. Satu tautan sudah cukup bagi mereka sehingga semua perkembangan pada tugas mereka sudah dekat.
Contoh Proyek Telemedicine
Mereka membawa perbaikan dalam bentuk komentar ke bagian tata letak yang diperlukan. Kami bersama-sama memutuskan bahwa kami tidak akan menerima suntingan besar di mana pun: baik dalam protokol, maupun dalam Jira , maupun dalam pesan. Dalam komentar, desainer yang diperlukan disebutkan dan pemberitahuan dikirimkan kepadanya melalui surat.
Semuanya disimpan online, jangan goyangkan bahwa Anda tidak akan mendapatkan akses ke tata letak, bekerja dari komputer lain. Saya tahu pasti bahwa perbaikan hanya dapat dilakukan dalam bentuk komentar di tata letak dan akan dibuat. Ini sangat keren. Selain itu, riwayat komentar memungkinkan Anda untuk memulihkan acara. Grisha Garshin, manajer
Untuk pengembang dan penguji
Sebelumnya, ketika kami memberikan tata letak kepada pengembang melalui Zeplin , mereka dan desainer memiliki gagasan yang berbeda tentang tata letak. Desainer melihat gambar lengkap transisi di Sketch , dan pengembang hanya layar tertentu di Zeplin . Orang-orang tidak selalu mengerti layar mana yang harus diikuti, dan menghabiskan waktu bertanya.
Pengembang hanya melihat tata letak tertentu di Zeplin
Dalam Figma, pengembang melihat gambar yang sama persis dengan perancang. Untuk persatuan, kami mematuhi organisasi tata letak seperti itu: transisi horizontal antara layar, vertikal - layar dalam. Ini membantu para lelaki merasa "betah" di mock-up.
Transisi horizontal antara layar, layar vertikal - dalam
Nyaman bahwa semua tata letak ada di satu tempat dan semua orang memiliki akses, nyaman untuk melakukan tinjauan - ada komentar. Layout selalu relevan dan dalam bentuk yang sama untuk semua peserta, adalah nyaman bahwa layout terpisah untuk iOS dan Android . Hal keren lainnya adalah Anda dapat membuat tautan ke layar tertentu, dan memasukkannya ke dalam dokumentasi. Irina Mukhina, penguji.
Kami menggunakan nama variabel yang sama dalam warna dan gaya, ini membantu untuk tidak menghasilkan entitas yang tidak perlu dalam tata letak antarmuka. Pengembang dapat membongkar elemen apa pun secara mandiri dalam tata letak, tanpa membuang waktu meminta desainer untuk melakukannya. Misalnya, Anda bisa mendapatkan kode svg untuk ikon atau mengekspornya dalam format yang diinginkan.
Ketika Anda terbiasa dengan layanan online seperti Figma , alat-alat sebelumnya tampak primitif dan sangat jauh. Tidak ada hosting file, masalah lisensi, instalasi perangkat lunak, sebagai gantinya - hanya tautan ke deskripsi tugas di Jira . Untuk mendapatkan gaya CSS suatu elemen, dua klik sudah cukup. Peter Dorozhkin, pengembang.
Untuk seorang pemasar
Kami juga melakukan tugas pemasaran web dalam Figma . Mereka memiliki proyek sendiri, di mana semua tata letak disimpan. Jadi desainer pemasaran lebih mudah untuk mematuhi identitas perusahaan kami - semua elemen ada di Figma .
Temukan stok yang Anda lakukan pada musim gugur 2018? Pf, mudah!
Ini bekerja dengan baik dan sebaliknya: perancang pemasaran menggambar ilustrasi, mentransfernya ke Figma . Perancang produk membawa mereka ke antarmuka dan, jika perlu, menyesuaikan bentuk dan warna sedikit - karena semuanya vektorial.
Kami sedang mengerjakan desainer ilustrasi di Figma.
Mudah dijelaskan kepada perancang di mana dan elemen visual apa yang perlu diubah / dihapus / ditambahkan. Alih-alih seribu kata, Anda dapat menunjukkan sekali di mana dan apa yang perlu dilakukan. Desainer dapat kembali ke komentar ini kapan saja nyaman untuk mereka. Katya Fedyunina, pemasar
Dan ketika tugas pemasaran, tetapi berkaitan langsung dengan produk, kerja tim desainer dari dua departemen pergi ke tingkat yang baru. Satu muncul dengan konsep visual, yang lain mencoba pada antarmuka - semua dalam satu tata letak dan pada satu waktu!
Pikiran utama
Desain adalah hasil kerja tim, bukan hanya satu orang. Berusaha keras untuk memastikan bahwa setiap peserta dapat berinteraksi dengan dia dengan nyaman. Pergi dari alat-alat lokal dan cari orang-orang yang menghubungkan Anda dan proses Anda.