🤳🏽 💋 👨🏽‍🔧 Figmiro. Ein Plugin für Figma erstellen (und ein bisschen für Miro) 🐾 👐🏼 🔜

Am dritten Tag haben wir auf Anraten bewährter Kameraden beschlossen, ein Plug-In zu erstellen, das Layouts als PNG-Bilder von Figma nach Miro exportiert.

Unser Team begann begeistert, diese Idee in die Realität umzusetzen. Besonders erfreulich war die Gelegenheit, einen anständigen Jackpot zu gewinnen, da wir unter völlig zufälligen Umständen kurz vor Abschluss des Plug-in- Wettbewerbs von Miro mit der Erstellung eines Plug- Ins begonnen haben.

Fairerweise ist anzumerken, dass die Idee einer solchen Integration in den Köpfen unserer Designer seit langem verweilt. Vor nicht allzu langer Zeit wechselte das gesamte Designteam von einer Reihe von Sketch / Zeplin auf die mittlerweile beliebte Figma-Plattform. Übertragung - verschoben, aber viele bekannte Szenarien für die Verwendung alter Tools sind nicht mehr verfügbar.

Insbesondere im August 2019 begannen Roboter auf dem Gelände eines großen E-Commerce-Unternehmens zu arbeiten. Das traditionelle Szenario für die Arbeit mit Sketch war wie folgt: Wir entladen Layouts aus Sketch mithilfe eines speziellen Plug-Ins in Miro und besprechen sie mit dem Client-Team. Wir verwenden Miro als Aufbewahrungsort für alle Materialien für das Projekt. Es ist praktisch, mit Kommentaren zu arbeiten und Änderungen an Bildschirmkarten zu sammeln (Pfeile anordnen).

Es gab ungefähr 450 Layouts für dieses Projekt. Die Änderungen erfolgten nicht sofort, mehrmals am Tag haben wir Layouts mit geringfügigen Änderungen entladen. Das gesamte Entladen in Figma erfolgte manuell, da das erforderliche Plug-In fehlte: exportiertes PNG / JPG, gespeichert, in Miro abgelegt und in der richtigen Reihenfolge angeordnet.

Ersetzen Sie den Text - eine Minute, entladen - von 20 Minuten auf eine Stunde. Um ein (!) Wort in 15 Layouts zu ersetzen, verbrachten die Designer eine ganze Stunde damit. Wir haben erkannt, dass Exporte automatisiert werden müssen, um Zeit und Nervenzellen unserer Designer und Art Direktoren zu sparen.

Ausgerüstet mit Typoskript, Reagieren und Mobx (danke Figma für die Möglichkeit, coole Tools zu verwenden) haben wir begonnen, an dem Plugin zu arbeiten.

Nach unseren optimistischen Annahmen wurde zunächst eine Woche lang gearbeitet, maximal zwei - die Aufgabe bestand lediglich darin, alle Funktionen des Miro Plugin for Sketch auf Figma-Schienen zu übertragen.

Aber wie es bei der Softwareentwicklung im Zusammenhang mit Forschungsaktivitäten häufig der Fall ist, können optimistische Schätzungen sehr weit von der Realität entfernt sein. Bei der Erstellung des Plugins sind also einige technische Hindernisse aufgetreten.

Anzahl der Hindernisse: REST API Miro

Da Figma eine Webanwendung ist (Elektron wird für den Desktop verwendet), haben wir festgestellt, dass unser Plugin in einer Browserumgebung funktioniert. Daher unterliegen alle Anfragen, die wir an die REST-API von Miro senden, den CORS- Browserrichtlinien .

Dies bedeutet, dass wenn wir eine Anfrage mit dem Text im Anwendungs- / JSON-Format senden möchten (z. B. zur Autorisierung) und der Server diese Anfrage nicht „mag“, die Antwort vom Server uns „sendet“. In unserem Fall ist es passiert.

Aus diesem Grund wurde beschlossen, Ihren Proxy auf node.js zu schreiben, was unseren Wünschen entspricht und durch Login / Passwort autorisiert wird. Zu diesem Zweck verwendet der Proxy die berühmten Middleware-Cors für Express.

Hindernis Nummer zwei: wieder REST API Miro

Nachdem wir die offizielle Dokumentation zur Miro REST-API studiert und versucht hatten, unsere Idee, Bilder von Figma nach Miro zu exportieren, auf deren Grundlage umzusetzen, stellten wir fest, dass aus der Vielzahl der verfügbaren Widgets in Miro (mit Widgets meinen wir Aufkleber, Formen, Text usw.). Über die REST-Oberfläche können wir kein für uns interessantes Widget mit einem Bild erstellen. Dies bedeutet, dass die Layouts, die wir auf Figma-Ebene erfolgreich in PNG konvertiert haben, nicht an das gewünschte Board in Miro gesendet werden können.

Aber dann erinnerten sie sich an ein ähnliches Plugin für Sketch, das irgendwie weiß, wie man einen solchen Export macht. Es wurde sozusagen beschlossen, die Erfahrung von Kollegen zu übernehmen und sich den Quellcode von trace_plugin anzusehen, da die Jungs von Miro den Quellcode freundlicherweise auf Github gepostet haben . Und dann stellte sich heraus, dass mehrere Dinge gleichzeitig waren:

Im absehbaren Jahrhundert planen wir nicht, Plugins für Sketch zu erstellen, da der Frankenstein von Objective-C und JS, der zur Entwicklung von Sketch-Plugins verwendet wurde, beim Betrachten der Quelle Wellen in die Augen der Anzahl der eckigen Klammern projizierte.

Stellen Sie eine Klasse auf, wenn Sie auch das Beste aus JS und Objective-C kombinieren möchten.
Das Modell für den Screenshot lebt hier .

Das Sketch-Plugin verwendet eine andere API, die hier verfügbar ist . Diese API bietet die Möglichkeit, Bilder auf einem ausgewählten Board in Miro zu erstellen. Das ist ein Plus. Der Nachteil ist, dass wir keine Dokumentation dazu gefunden haben.

Nach diesen Enthüllungen entschied sich unser Team, die mysteriöse API aus dem Sketch-Plug-In als Grundlage zu verwenden. Wenn wir im Dunkeln wandern, ohne die Spezifikationen dieser API zu haben, überwinden wir immer noch das Problem des Importierens von Bildern in Miro. Und hier schien es möglich zu sein, das Epos zu beenden und zu beenden, aber nein.

Hindernis Nummer drei: Leistung

Beim ersten Beta-Test des Plugins stellte sich heraus, dass Benutzer häufig mit dem langen Prozess des Exportierens von Bildern von Figma nach Miro unzufrieden sind. Zum Beispiel wurden nach ca. 3 Minuten 30 Layouts entladen. Etwa 70% der Zeit von diesen 3 Minuten wurde durch Senden des Anforderungshauptteils an den Server benötigt.

Wie sich herausstellte, war unser Fakap, dass auf unserer Proxy-Anwendung / json als erwartetes Format für Bilder und Metadaten verwendet wurde und diese Bilder selbst in Form von UInt8Array übertragen wurden. Natürlich haben wir das erwartete Format in Multipart- / Formulardaten geändert, und jetzt wurden die gleichen 30 Layouts in akzeptablen 50 Sekunden geladen. Natürlich gibt es noch Raum zum Wachsen, aber je weniger sich die Geschwindigkeit verdreifacht hat, desto mehr war unser kleiner Sieg.

Hindernis Nummer vier: Kantenszenarien

Es schien, dass die Plugin-Nutzungsszenarien einfach zu blamieren waren, aber während des Arbeitens stießen wir auf eine große Anzahl unverarbeiteter Randzustände des Plugin-Betriebs, mit denen etwas getan werden musste.

Wenn wir uns die Zeit nehmen, um an einer bestimmten Funktion (sei es Autorisierung, Exportlayouts als Bilder aus Figma usw.) als N zu arbeiten, dauert die Verarbeitung von Edgeskripten für diese Funktionalität ebenfalls N Zeit. Und natürlich hat diese zusätzliche Zeit das Veröffentlichungsdatum des Plugins stark verschoben. Diese Arbeit ermöglichte es jedoch, ein gutes Maß an Werkzeugstabilität zu erreichen.

Hindernis Nummer fünf: Autorisierung

Wenn Sie plötzlich ein Plugin für Figma schreiben wollten, sollten Sie sich darauf einstellen, dass die Autorisierung über Dienste von Drittanbietern (Google, Facebook, Slack usw.) nicht für Sie verfügbar ist, da Plugins in Figma über Iframes funktionieren und das oAuth-Protokoll keine Autorisierung durch Floating Frames in bevorzugt die Stärke bestimmter Sicherheitsrichtlinien (insbesondere um Clickjacking- Angriffe zu verhindern ).

Was bedeutet das im Kontext unseres Plugins? Dies bedeutet, dass Benutzer, die über Dienste von Drittanbietern in Miro registriert sind, sich nicht über das Plugin mit dem Benutzernamen / Passwort anmelden und die gewünschte Karte auswählen können, auf der Sie Layouts aus Figma exportieren möchten. Dies ist nicht möglich, da Miro bei der Registrierung über Dienste von Drittanbietern nur die E-Mail-Adresse für das zukünftige Benutzerkonto festlegt, nicht jedoch das Kennwort.

Die von uns gewählte Problemumgehung ist sehr einfach: Wir warnen den Benutzer des Plugins, dass er, wenn er über einen Drittanbieter in Miro registriert ist und kein Kennwort hat, die Standardfunktion "Kennwortwiederherstellung per E-Mail" verwenden muss, um das Kennwort zu erhalten oder wiederherzustellen.

Bild

Infolgedessen ist es uns nicht gelungen, mit Miro zu konkurrieren. Die optimistische Einschätzung nach 2 Wochen Entwicklungszeit kam nicht zustande und wuchs auf 2 Monate an, da wir in unserer Freizeit an diesem Projekt beteiligt waren.

Die Situation wird noch pikanter, weil Miro technische Probleme gelöst hatGewinner, darunter Semyon Volkov und Roman Krasilnikov mit einem ähnlichen Figma2Miro-Plugin. Ihr Projekt belegte den sechsten Platz. Im Gegensatz zu unserer Implementierung, die noch mehr ein Figma-Plugin war (aus Sicht der Benutzeroberfläche und der Plattform, die den Export initiiert), haben sie das Plugin für Miro erstellt.

Leider entsprach die von den Jungs entwickelte Lösung nicht den Anforderungen der Roboter, und deshalb arbeiteten wir weiter an unserem eigenen Plug-In, das bald fertig war. Das Plugin heißt Figmiro.

Dank Figmiro sparen unsere Designer jetzt viel Zeit beim Importieren von Layouts von einem System in ein anderes. Zum Beispiel wurde diese Stunde des Entladens von Layouts aus einem Zitat von Sergey Kutkov zu 2 (!) Minuten.

Zusammenfassend möchte ich darauf hinweisen, dass die Arbeit an Figmiro eher forschender Natur war. Wenn Sie an der Integration von zwei Systemen von Drittanbietern in der einen oder anderen Form arbeiten, müssen Sie auf ein hohes Maß an Unsicherheit und Informationsmangel im Rahmen der Problemlösung vorbereitet sein. In unserem Fall haben wir den Löwenanteil der Zeit damit verbracht, die API-Funktionen beider Plattformen zu untersuchen, Hypothesen zu testen und Lösungen zu finden.

Was das Figmiro-Plugin kann

Alles funktioniert genauso wie in Sketch: Wählen Sie Frames aus, klicken Sie auf die Schaltfläche, und in Miro werden Layouts angezeigt:

Laden Sie ausgewählte Frames in Miro auf die ausgewählte Karte hoch.
Überschreiben zuvor entladener Layouts unter Beibehaltung einer Position auf den Boards.

In Zukunft planen wir, das Plugin zu unterstützen und seine Arbeit so zu optimieren, dass der Entlade- und Synchronisierungsprozess beschleunigt wird. Wenn Miro seine API aktualisiert, werden wir das Plugin dafür neu erstellen.

Figmiro Plugin hat funktioniert

Der Designer Anton Magartsov, der führende iOS-Entwickler Roman Churkin, die Frontend-Entwickler Anton Eryshev und Ilya Krupnov, der Serverentwicklungsmanager Andrei Muravyov und der Art Director Sergey Kutkov.

Alle Links:

Plugin in Github ,
Proxy in Github ,
Plugin in Figma .

Wir sammeln Feedback zum Betrieb des Plugins auf GitHub.

PS
Wir wissen, wie schwierig es ist, öffentliche APIs für Dienste zu erstellen und gleichzeitig alle Anforderungen der Benutzer dieser APIs maximal zu erfüllen.

Das Redmadrobot-Team dankt den Mitarbeitern von Miro und Figma für die Möglichkeit, unsere routinemäßigen Geschäftsprozesse zu automatisieren.

Figmiro. Ein Plugin für Figma erstellen (und ein bisschen für Miro)