👩🏾‍💼 🎨 🏂 Figmiro. Faire un plugin pour Figma (et un peu pour Miro) ✋🏼 🕺🏾 👸🏿

Le troisième jour, sur les conseils de camarades confirmés, nous avons décidé de créer un plug-in qui exportera les mises en page de Figma vers Miro sous forme d'images PNG.

Notre équipe a commencé avec enthousiasme à traduire cette idée en réalité, elle a été particulièrement chauffée par l'opportunité d'obtenir un jackpot décent, car, par un ensemble de circonstances complètement aléatoires, nous avons commencé à travailler sur la création d'un plug-in peu de temps avant la fin du concours de plug-in de Miro.

En toute honnêteté, il convient de noter que l'idée d'une telle intégration a longtemps persisté dans l'esprit de nos concepteurs. Il n'y a pas si longtemps, toute l'équipe de conception est passée d'un groupe de Sketch / Zeplin à la désormais populaire plate-forme Figma. Transfert - déplacé, mais de nombreux scénarios familiers d'utilisation d'anciens outils ne sont plus disponibles.

En août 2019 notamment, des robots ont commencé à travailler sur le site d'une grande entreprise de commerce électronique. Le scénario traditionnel pour travailler avec Sketch était le suivant: nous déchargeons les mises en page de Sketch à l'aide d'un plug- in spécial dans Miro et en discutons avec l'équipe cliente. Nous utilisons Miro comme référentiel de tous les matériaux du projet. Il est pratique de travailler avec des commentaires et de collecter les modifications apportées aux cartes d'écran (organiser les flèches).

Il y avait environ 450 présentations sur ce projet. Les modifications ne sont pas arrivées immédiatement, plusieurs fois par jour, nous avons déchargé les mises en page avec des changements mineurs. Tout le déchargement dans Figma a eu lieu manuellement en raison de l'absence du plug-in nécessaire: PNG / JPG exporté, enregistré, déposé dans Miro, disposé dans le bon ordre.

Remplacez le texte - une minute, déchargez - de 20 minutes à une heure. Pour remplacer un (!) Word dans 15 mises en page, les concepteurs ont passé une heure entière. Nous avons réalisé que les exportations devaient être automatisées, ce qui économisait le temps et les cellules nerveuses de nos designers et directeurs artistiques.

Donc, armés de dactylographie, de react et de mobx (merci, Figma pour l'opportunité d'utiliser des outils sympas), nous avons commencé à travailler sur le plugin.

Initialement, selon nos hypothèses optimistes, il y avait du travail pendant une semaine, un maximum de deux - la tâche consistait uniquement à transférer toutes les fonctionnalités de Miro Plugin for Sketch vers des rails Figma.

Mais, comme c'est souvent le cas dans le développement de logiciels associés aux activités de recherche, les estimations optimistes peuvent être très éloignées de la réalité. Ainsi, lors du processus de création du plugin, un nombre assez important d'obstacles techniques sont apparus.

Nombre d'obstacles: API REST Miro

Étant donné que Figma est une application Web (électron est utilisé pour le bureau), nous avons réalisé que notre plugin fonctionnera dans un environnement de navigateur. Ainsi, toutes les demandes que nous enverrons à l'API REST de Miro seront soumises aux politiques du navigateur CORS .

Et cela signifie que si nous voulons envoyer une demande avec le corps au format application / json (par exemple, pour l'autorisation) et que le serveur n'aimera pas cette demande, alors la réponse du serveur nous «enverra». Dans notre cas, c'est arrivé.

Par conséquent, il a été décidé d'écrire votre proxy sur node.js, qui sera sensible à nos envies, autoriser par login / mot de passe. Pour ce faire, le proxy utilise les célèbres cors middleware pour express.

Obstacle numéro deux: encore une fois l'API REST Miro

Après avoir étudié la documentation officielle sur l'API REST Miro et essayé de mettre en œuvre notre idée d'exporter des images de Figma vers Miro sur sa base, nous avons réalisé que de toute la variété des widgets disponibles dans Miro (par widgets, nous entendons des autocollants, des formes, du texte, etc.) L'interface REST ne nous permet pas de créer un widget qui nous intéresse avec une image. Cela signifie que ces mises en page que nous avons réussi à convertir en PNG au niveau Figma, nous ne pouvons pas les envoyer au tableau souhaité dans Miro.

Mais ensuite, ils se sont souvenus d'un plugin similaire pour Sketch, qui sait en quelque sorte comment effectuer une telle exportation. Il a été décidé, pour ainsi dire, de reprendre l'expérience de ses collègues et de regarder le code source sketch_plugin, car les gars de Miro ont gentiment posté le code source sur Github . Et puis il s'est avéré plusieurs choses à la fois:

Dans le siècle prévisible, nous ne prévoyons pas de créer des plugins pour Sketch, car le Frankenstein d'Objective-C et JS, utilisé pour développer des plugins Sketch, projetait des ondulations aux yeux du nombre de crochets lors de la visualisation de la source;

Mettez une classe si vous aimez aussi combiner tout le meilleur de JS et Objective-C.
Le modèle de la capture d'écran vit ici .

Le plugin Sketch utilise une API différente, qui est disponible ici . Cette API offre la possibilité de créer des images sur une carte sélectionnée dans Miro. C'est un plus. L'inconvénient est que nous n'avons pas trouvé de documentation à ce sujet.

Après ces révélations, notre équipe a décidé de prendre la mystérieuse API du plug-in Sketch comme base. Errant dans le noir, n'ayant pas les spécifications de cette API avec nous, nous surmontons toujours le problème de l'importation d'images dans Miro. Et, il semblerait, ici, il était possible de mettre fin à l'épopée, mais non.

Obstacle numéro trois: les performances

Lors du premier test bêta du plugin, il s'est avéré que les utilisateurs étaient souvent mécontents du long processus d'exportation d'images de Figma vers Miro. Par exemple, environ 3 minutes, 30 mises en page ont été déchargées. Environ 70% du temps de ces 3 minutes a été pris en envoyant le corps de la demande au serveur.

Il s'est avéré que notre fakap était que sur notre application proxy / json était utilisé comme format attendu pour les images et les métadonnées et ces images elles-mêmes ont été transférées sous la forme d'UInt8Array. Naturellement, nous avons changé le format attendu en multipart / form-data, et maintenant les 30 mêmes dispositions ont été chargées en 50 secondes acceptables. Bien sûr, il y a encore de la place pour grandir, mais moins la vitesse a augmenté 3 fois, et c'était notre petite victoire.

Obstacle numéro quatre: scénarios de bord

Il semblait que les scénarios d'utilisation du plugin étaient simples à déshonorer, mais en cours de travail, nous avons rencontré un grand nombre d'états de bord non traités de l'opération du plugin, avec lesquels quelque chose devait être fait.

Si nous prenons le temps de travailler sur une certaine fonctionnalité (qu'il s'agisse d'autorisation, d'exporter des mises en page sous forme d'images à partir de Figma, etc.) en tant que N, le traitement des scripts de bordure pour cette fonctionnalité prendra également N temps. Et, bien sûr, ce temps supplémentaire a considérablement changé la date de sortie du plugin. Mais ce travail a permis d'atteindre un bon niveau de résilience des outils.

Obstacle numéro cinq: autorisation

Si vous vouliez soudainement écrire un plugin pour Figma, préparez-vous au fait que l'autorisation via des services tiers (google, facebook, slack, etc.) ne sera pas disponible pour vous, car les plugins dans Figma fonctionnent via des iframes et le protocole oAuth ne favorise pas l'autorisation via des cadres flottants dans la force de certaines politiques de sécurité (en particulier pour empêcher les attaques de détournement de clics ).

Qu'est-ce que cela signifie dans le contexte de notre plugin? Cela signifie que les utilisateurs enregistrés dans Miro via des services tiers ne pourront pas se connecter via le plugin en utilisant le nom d'utilisateur / mot de passe et sélectionner la carte souhaitée vers laquelle vous souhaitez exporter les mises en page de Figma. Et ils ne pourront pas le faire, car lors de l'inscription via des services tiers, Miro définit uniquement l'e-mail pour le futur compte utilisateur, mais pas le mot de passe.

La solution de contournement que nous avons choisie est très simple: nous avertissons l'utilisateur du plugin que s'il est enregistré via un service tiers dans Miro et n'a pas de mot de passe, il doit utiliser la fonction standard "Récupération de mot de passe par email" afin de recevoir ou restaurer le mot de passe.

En conséquence, nous n'avons pas réussi à rivaliser avec Miro. L'évaluation optimiste à 2 semaines de développement ne s'est pas concrétisée et est passée à 2 mois, puisque nous étions impliqués dans ce projet pendant notre temps libre.

Le piquant ajouté à la situation est le fait que pendant que nous résolvions des problèmes techniques, Miro a annoncégagnants, parmi lesquels Semyon Volkov et Roman Krasilnikov avec un plugin Figma2Miro similaire. Leur projet a pris la sixième place. Contrairement à notre implémentation, qui était encore plus un plugin Figma (du point de vue de l'interface utilisateur et de la plate-forme qui lance l'exportation), ils ont créé le plugin pour Miro.

Mais, malheureusement, la solution créée par les gars ne répondait pas aux besoins des robots, et c'est pourquoi nous avons continué à travailler sur notre propre plug-in, qui était bientôt prêt. Le plugin s'appelle Figmiro.

Maintenant, grâce à Figmiro, nos concepteurs gagnent beaucoup de temps à importer des mises en page d'un système à un autre. Par exemple, cette heure de déchargement des mises en page d'une citation de Sergey Kutkov s'est transformée en 2 (!) Minutes.

En résumé, je tiens à noter que le travail sur Figmiro était plus de nature recherche. Lorsque vous travaillez sur l'intégration de deux systèmes tiers sous une forme ou une autre, vous devez vous préparer à un niveau élevé d'incertitude, de manque d'informations dans le cadre de la résolution du problème. Dans notre cas, nous avons passé la majeure partie du temps à rechercher les capacités API des deux plates-formes, à tester des hypothèses et à trouver des solutions.

Ce que le plugin Figmiro peut faire

Tout fonctionne de la même manière que dans Sketch: sélectionnez des cadres, cliquez sur le bouton et les dispositions apparaissent dans Miro:

Téléchargez les images sélectionnées sur la carte sélectionnée dans Miro.
Remplacer les mises en page précédemment déchargées tout en conservant une position sur les tableaux.

À l'avenir, nous prévoyons de prendre en charge le plugin et d'optimiser son travail de manière à accélérer le processus de déchargement et de synchronisation. Si Miro met à jour son API, nous reconstruirons le plugin pour lui.

Le plugin Figmiro a fonctionné

Designer Anton Magartsov, développeur iOS leader Roman Churkin, développeurs frontend Anton Eryshev et Ilya Krupnov, responsable du développement du serveur Andrei Muravyov et directeur artistique Sergey Kutkov.

Tous les liens:

Plugin dans Github ,
Proxy dans Github ,
Plugin dans Figma .

Nous collectons des commentaires sur le fonctionnement du plugin sur GitHub.

PS
Nous savons combien il est difficile de créer des API publiques pour les services, tout en répondant au maximum à tous les besoins des utilisateurs de ces API.

L'équipe Redmadrobot est reconnaissante aux gars de Miro et Figma pour l'opportunité d'automatiser nos processus commerciaux de routine.

Figmiro. Faire un plugin pour Figma (et un peu pour Miro)