🐥 🐞 🏥 Figmiro. Membuat plugin untuk Figma (dan sedikit untuk Miro) 🧙🏿 👨‍🌾 ⏲️

Pada hari ketiga, atas saran dari kawan yang terbukti, kami memutuskan untuk membuat plug-in yang akan mengekspor tata letak dari Figma ke Miro sebagai gambar PNG.

Tim kami dengan antusias mulai menerjemahkan ide ini menjadi kenyataan, terutama dipanaskan oleh kesempatan untuk mendapatkan jackpot yang layak, karena, dengan keadaan yang benar-benar acak, kami mulai bekerja membuat plug-in sesaat sebelum penyelesaian kontes plug-in dari Miro.

Dalam keadilan, perlu dicatat bahwa gagasan integrasi seperti itu telah lama melekat di benak para desainer kami. Belum lama ini, seluruh tim desain pindah dari sekelompok Sketch / Zeplin ke platform Figma yang sekarang populer. Transfer - dipindahkan, tetapi banyak skenario yang sudah dikenal untuk menggunakan alat lama menjadi tidak tersedia.

Secara khusus, pada bulan Agustus 2019, robot mulai bekerja di situs perusahaan e-commerce besar. Skenario tradisional untuk bekerja dengan Sketch adalah sebagai berikut: kami menurunkan layout dari Sketch menggunakan plug- in khusus di Miro dan mendiskusikannya dengan tim klien. Kami menggunakan Miro sebagai gudang semua bahan untuk proyek. Lebih nyaman bekerja dengan komentar dan mengumpulkan perubahan pada peta layar (mengatur panah).

Ada sekitar 450 layout pada proyek ini. Suntingan tidak datang sekaligus, beberapa kali sehari kami membongkar tata letak dengan perubahan kecil. Semua pembongkaran di Figma terjadi secara manual karena kurangnya plug-in yang diperlukan: mengekspor PNG / JPG, disimpan, jatuh ke Miro, ditata dalam urutan yang benar.

Ganti teks - satu menit, bongkar - dari 20 menit menjadi satu jam. Untuk mengganti satu (!) Word dalam 15 layout, desainer menghabiskan seluruh jam. Kami menyadari bahwa ekspor perlu diotomatisasi, menghemat waktu dan sel syaraf desainer dan direktur seni kami.

Jadi, dipersenjatai dengan naskah, reaksi dan mobx (terima kasih, Figma atas kesempatan untuk menggunakan alat keren), kami mulai bekerja pada plugin.

Awalnya, menurut asumsi optimis kami, ada pekerjaan selama seminggu, maksimal dua - tugasnya adalah hanya mentransfer semua fitur Miro Plugin untuk Sketch ke Figma rails.

Tetapi, seperti yang sering terjadi dalam pengembangan perangkat lunak yang terkait dengan kegiatan penelitian, perkiraan optimis bisa sangat jauh dari kenyataan. Jadi dalam proses pembuatan plugin, sejumlah besar kendala teknis muncul.

Rintangan angka kali: REST API Miro

Karena Figma adalah aplikasi web (elektron digunakan untuk desktop), kami menyadari bahwa plugin kami akan berfungsi di lingkungan browser. Dengan demikian, semua permintaan yang akan kami kirimkan ke REST API Miro akan tunduk pada kebijakan browser CORS .

Dan ini berarti bahwa jika kita ingin mengirim permintaan dengan tubuh dalam format aplikasi / json (misalnya, untuk otorisasi) dan server tidak "menyukai" permintaan ini, maka respons dari server akan "mengirim" kita. Dalam kasus kami, itu terjadi.

Oleh karena itu, diputuskan untuk menulis proksi Anda di node.js, yang akan bersimpati pada keinginan kami, diotorisasi dengan login / kata sandi. Untuk melakukan ini, proxy menggunakan kor middleware terkenal untuk mengekspresikan.

Rintangan nomor dua: lagi REST API Miro

Setelah mempelajari dokumentasi resmi tentang Miro's REST API dan mencoba menerapkan gagasan kami untuk mengekspor gambar dari Figma ke Miro, kami menyadari bahwa dari seluruh variasi widget yang tersedia di Miro (widget berarti stiker, bentuk, teks, dll.) Antarmuka REST tidak memungkinkan kami membuat widget yang menarik bagi kami dengan gambar. Ini berarti bahwa tata letak yang kami berhasil konversi ke PNG pada tingkat Figma, kami tidak dapat mengirim ke papan yang diinginkan di Miro.

Tapi kemudian mereka ingat tentang plugin serupa untuk Sketch, yang entah bagaimana tahu bagaimana melakukan ekspor semacam itu. Diputuskan, untuk berbicara, untuk mengambil alih pengalaman dari rekan-rekan dan melihat kode sumber sketch_plugin, karena orang-orang dari Miro dengan ramah memposting kode sumber di Github . Dan kemudian ternyata beberapa hal sekaligus:

Pada abad mendatang, kami tidak berencana membuat plugin untuk Sketch, karena Frankenstein dari Objective-C dan JS, digunakan untuk mengembangkan plugins Sketch, memproyeksikan riak-riak di mata jumlah kurung kotak saat melihat sumber;

Masukkan kelas jika Anda juga suka menggabungkan semua yang terbaik dari JS dan Objective-C.
Model tangkapan layar ada di sini .

Plugin Sketch menggunakan API yang berbeda, yang tersedia di sini . API ini menyediakan kemampuan untuk membuat gambar pada papan yang dipilih di Miro. Ini merupakan nilai tambah. Kelemahannya adalah kami tidak menemukan dokumentasi di situ.

Setelah wahyu ini, tim kami memutuskan untuk mengambil API misterius dari plug-in Sketsa sebagai basis. Mengembara dalam gelap, tidak memiliki spesifikasi API ini bersama kami, kami masih mengatasi masalah mengimpor gambar ke Miro. Dan, tampaknya, di sini adalah mungkin untuk mengakhiri dan mengakhiri epos, tetapi tidak.

Kendala nomor tiga: kinerja

Selama pengujian beta pertama dari plugin, ternyata pengguna sering tidak senang dengan proses panjang mengekspor gambar dari Figma ke Miro. Misalnya, sekitar 3 menit, 30 tata letak diturunkan. Sekitar 70% waktu dari 3 menit ini diambil dengan mengirimkan badan permintaan ke server.

Ternyata, fakap kami adalah bahwa pada aplikasi proxy kami / json digunakan sebagai format yang diharapkan untuk gambar dan meta-data dan gambar-gambar ini sendiri ditransfer dalam bentuk UInt8Array. Secara alami, kami mengubah format yang diharapkan menjadi multipart / form-data, dan sekarang 30 tata letak yang sama dimuat dalam 50 detik yang dapat diterima. Tentu saja, masih ada ruang untuk tumbuh, tetapi semakin sedikit kecepatannya telah meningkat 3 kali, dan ini adalah kemenangan kecil kami.

Rintangan nomor empat: skenario tepi

Tampaknya skenario penggunaan plugin mudah untuk dipermalukan, tetapi dalam proses bekerja, kami menjumpai sejumlah besar keadaan tepi yang belum diproses dari operasi plugin, yang dengannya sesuatu harus dilakukan.

Jika kita meluangkan waktu untuk mengerjakan fungsional tertentu (baik itu otorisasi, ekspor tata letak sebagai gambar dari Figma, dll.) Sebagai N, maka pemrosesan skrip tepi untuk fungsi ini juga akan membutuhkan waktu N. Dan, tentu saja, waktu tambahan ini sangat menggeser tanggal rilis plugin. Tetapi pekerjaan ini memungkinkan untuk mencapai tingkat ketahanan alat yang baik.

Rintangan nomor lima: otorisasi

Jika Anda tiba-tiba ingin menulis sebuah plugin untuk Figma, bersiaplah untuk kenyataan bahwa otorisasi melalui layanan pihak ketiga (google, facebook, slack, dll) tidak akan tersedia untuk Anda, karena plugin di Figma bekerja melalui iframe, dan protokol oAuth tidak mendukung otorisasi melalui bingkai mengambang di kekuatan kebijakan keamanan tertentu (khususnya, untuk mencegah serangan clickjacking ).

Apa artinya ini dalam konteks plugin kami? Ini berarti bahwa pengguna yang terdaftar di Miro melalui layanan pihak ketiga tidak akan dapat masuk melalui plugin menggunakan nama pengguna / kata sandi dan memilih papan yang diinginkan di mana Anda ingin mengekspor tata letak dari Figma. Dan mereka tidak akan dapat melakukan ini, karena ketika mendaftar melalui layanan pihak ketiga, Miro hanya menetapkan email untuk akun pengguna masa depan, tetapi tidak dengan kata sandi.

Solusi yang kami pilih sangat sederhana: kami memperingatkan pengguna plugin bahwa jika ia terdaftar melalui layanan pihak ketiga di Miro dan tidak memiliki kata sandi, ia perlu menggunakan fungsi standar "Pemulihan kata sandi melalui email" untuk menerima atau mengembalikan kata sandi.

gambar

Akibatnya, kami berhasil tidak berhasil bersaing dengan Miro. Penilaian optimis pada 2 minggu pengembangan tidak terwujud dan tumbuh menjadi 2 bulan, karena kami terlibat dalam proyek ini di waktu luang kami.

Kesederhanaan ditambahkan ke situasi adalah kenyataan bahwa sementara kami sedang memecahkan masalah teknis, Miro mengumumkanpemenang, di antaranya adalah Semyon Volkov dan Roman Krasilnikov dengan plugin Figma2Miro serupa. Proyek mereka mengambil tempat keenam. Tidak seperti implementasi kami, yang masih lebih merupakan plug-in untuk Figma (dari sudut pandang UI dan platform yang memulai ekspor), mereka membuat plug-in untuk Miro.

Tapi, sayangnya, solusi yang dibuat oleh para pria tidak memenuhi kebutuhan robot, dan itulah sebabnya kami terus bekerja pada plug-in kami sendiri, yang segera siap. Plugin ini disebut Figmiro.

Sekarang, berkat Figmiro, desainer kami menghemat banyak waktu mengimpor tata letak dari satu sistem ke sistem lainnya. Sebagai contoh, saat itu tata letak pembongkaran dari kutipan oleh Sergey Kutkov berubah menjadi 2 (!) Menit.

Meringkas, saya ingin mencatat bahwa pekerjaan di Figmiro lebih bersifat penelitian. Ketika Anda bekerja pada integrasi dua sistem pihak ketiga dalam satu bentuk atau yang lain, Anda perlu dipersiapkan untuk tingkat ketidakpastian yang tinggi, kurangnya informasi dalam rangka memecahkan masalah. Dalam kasus kami, kami menghabiskan sebagian besar waktu meneliti kemampuan API dari kedua platform, menguji hipotesis, dan menemukan solusi.

Apa yang dapat dilakukan oleh plugin Figmiro

Semuanya berfungsi sama seperti yang biasa kita lakukan di Sketsa: pilih bingkai, klik tombol, dan tata letak muncul di Miro:

Unggah bingkai yang dipilih ke papan yang dipilih di Miro.
Timpa tata letak yang sebelumnya tidak dimuat dengan tetap mempertahankan posisi di papan tulis.

Di masa mendatang, kami berencana untuk mendukung plugin dan mengoptimalkan kerjanya sedemikian rupa untuk mempercepat proses pembongkaran dan sinkronisasi. Jika Miro memperbarui API-nya, kami akan membangun kembali plugin untuknya.

Plugin Figmiro bekerja

Desainer Anton Magartsov, pengembang iOS terkemuka Roman Churkin, pengembang frontend Anton Eryshev dan Ilya Krupnov, manajer pengembangan server Andrei Muravyov dan direktur seni Sergey Kutkov.

Semua tautan:

Plugin di Github ,
Proxy di Github ,
Plugin di Figma .

Kami sedang mengumpulkan umpan balik tentang pengoperasian plugin di GitHub.

PS
Kita tahu betapa sulitnya membuat API publik untuk layanan, sementara secara maksimal memenuhi semua kebutuhan pengguna API ini.

Tim Redmadrobot berterima kasih kepada orang-orang dari Miro dan Figma atas kesempatan untuk mengotomatisasi proses bisnis rutin kami.

Figmiro. Membuat plugin untuk Figma (dan sedikit untuk Miro)