On the third day, on the advice of trusted comrades, we decided to create a plug-in that will export layouts from Figma to Miro as PNG images.
Our team enthusiastically began to translate this idea into reality, it was especially heated by the opportunity to get a decent jackpot, because, by a completely random set of circumstances, we started work on creating a plug-in shortly before the completion of the plug-in contest from Miro.
In fairness, it is worth noting that the idea of such integration has been lingering in the minds of our designers for a long time. Not so long ago, the entire design team moved from a bunch of Sketch / Zeplin to the now popular Figma platform. Transfer – moved, but many familiar scenarios for using old tools have become unavailable.
In particular, in August 2019, robots began working on the site of a large e-commerce company. The traditional scenario for working with Sketch was as follows: we unload layouts from Sketch using a special plugin at Miro and discussing them with the client team. We use Miro as a repository of all materials for the project. It’s convenient to work with comments and collect changes to screen maps (arrange arrows).
There were about 450 layouts on this project. Edits came not at once, several times a day we unloaded layouts with minor changes. All unloading in Figma took place manually due to the lack of the necessary plug-in: exported PNG / JPG, saved, dropped into Miro, laid out in the correct order.
Replace the text – a minute, unload – from 20 minutes to an hour. To replace one (!) Word in 15 layouts, designers spent an entire hour. We realized that exports needed to be automated, saving the time and nerve cells of our designers and art directors.
So, armed with typescript, react and mobx (thanks, Figma for the opportunity to use cool tools), we started working on the plugin.
Initially, according to our optimistic assumptions, there was work for a week, a maximum of two – the task was only to transfer all the capabilities of Miro Plugin for sketch on rails Figma.
But, as is often the case in software development associated with research activities, optimistic estimates can be very far from reality. So in the process of creating the plugin, a rather large number of technical obstacles arose.
Obstacle number times: REST API Miro
Since Figma is a web application (electron is used for the desktop), we realized that our plugin will work in a browser environment. Thus, all requests that we will send to Miro’s REST API will be subject to browser policies. CORS.
And this means that if we want to send a request with the body in application / json format (for example, for authorization) and the server will not “like” this request, then the response from the server will “send” us. In our case, it happened.
Therefore, it was decided to write your proxy on node.js, which will be sympathetic to our desires, authorize by login / password. For this, the proxy uses the well-known middleware cors for express.
Obstacle number two: once again REST API Miro
Having studied the official documentation on the Miro REST API and tried to implement our idea of exporting images from Figma to Miro on its basis, we realized that from the whole variety of available widgets in Miro (by widgets we mean stickers, figures, text, etc.) The REST interface does not allow us to create a widget with a picture of interest to us. This means that we cannot send the layouts that we successfully converted to PNG at the Figma level to the desired board in Miro.
But then they remembered about a similar plugin for Sketch, which somehow knows how to do such an export. It was decided, so to speak, to take the experience from colleagues and look at the source code sketch_plugin, since the guys from Miro kindly posted the source code on Github. And then it turned out several things at once:
- In the foreseeable century, we do not plan to make plugins for Sketch, because the Frankenstein from Objective-C and JS, used to develop Sketch plugins, projected ripples in the eyes of the number of square brackets when viewing the source;
Put a class if you also like combining all the best from JS and Objective-C.
The model for the screenshot dwells here.
- The Sketch plugin uses a different API that is available here. This API provides the ability to create images on a selected board in Miro. This is a plus. The downside is that we did not find documentation on it.
After these revelations, our team decided to take the mysterious API from the Sketch plug-in as the basis. Wandering in the dark, without having the specifications of this API, we still overcome the problem of importing images into Miro. And, it would seem, here it was possible to put an end to the epic, but no.
Obstacle number three: performance.
During the first beta testing of the plugin, it turned out that users are often unhappy with the long process of exporting images from Figma to Miro. For example, about 3 minutes, 30 layouts were unloaded. About 70% of the time from these 3 minutes was taken by sending the request body to the server.
As it turned out, our fakap was that on our proxy application / json was used as the expected format for images and meta data and these images themselves were transferred in the form of UInt8Array. Naturally, we changed the expected format to multipart / form-data, and now the same 30 layouts were loaded in an acceptable 50 seconds. Of course, there is still room to grow, but the less the speed has increased 3 times, and this was our small victory.
Obstacle number four: edge scenarios
It seemed that the plugin usage scenarios were simple to disgrace, but in the process of working, we encountered a large number of unprocessed edge states of the plugin’s operation, with which something had to be done.
If we take the time to work on a certain functional (be it authorization, export layouts as images from Figma, etc.) as N, then the processing of edge scripts for this functionality will also take N time. And, of course, this extra time greatly shifted the release date of the plugin. But this work allowed to achieve a good level of tool resiliency.
Obstacle number five: authorization.
If you suddenly wanted to write a plugin for Figma, be prepared for the fact that authorization through third-party services (google, facebook, slack, etc) will not be available to you, because plugins in Figma work through iframes, and the oAuth protocol does not favor authorization through floating frames in the strength of certain security policies (in particular, to prevent clickjacking attacks).
What does this mean in the context of our plugin? This means that users who are registered in Miro through third-party services will not be able to log in via the plugin using the username / password and select the desired board where you want to export layouts from Figma. And they won’t be able to, because when registering through third-party services, Miro sets only an email for a future user account, but not a password.
The workaround that we chose is very simple: we warn the user of the plugin that if he is registered through a third-party service in Miro and does not have a password, he needs to use the standard function “Password recovery by email” in order to receive or restore the password.
As a result, we successfully did not manage to compete with Miro. The optimistic assessment at 2 weeks of development did not materialize and grew into 2 months, since we were engaged in this project in our free time from the main work.
The fact that while we were solving technical problems, Miro added piquancy to the situation announced winners, among whom were Semyon Volkov and Roman Krasilnikov with a similar plug-in Figma2Miro. Their project took sixth place. Unlike our implementation, which was still more a plug-in for Figma (from the point of view of the UI and the platform that initiates the export), they made the plug-in for Miro.
But, unfortunately, the solution created by the guys did not meet the needs of the robots, and that is why we continued to work on our own plug-in, which was soon ready. The plugin is called Figmiro.
Now, thanks to Figmiro, our designers are saving a lot of time importing layouts from one system to another. For example, that hour of unloading layouts from a quote by Sergey Kutkov turned into 2 (!) Minutes.
Summarizing, I want to note that the work on Figmiro was more of a research nature. When you work on the integration of two third-party systems in one form or another, you need to be prepared for a high level of uncertainty, lack of information in the framework of solving the problem. In our case, we spent the lion’s share of the time researching the API capabilities of both platforms, testing hypotheses, and finding solutions.
What the Figmiro plugin can do
Everything works the same as we used to do in Sketch: select frames, click on the button, and layouts appear in Miro:
- Upload selected frames to the selected board in Miro.
- Overwriting previously unloaded layouts while maintaining a position on the boards.
In the future we plan to support the plugin and optimize its work in such a way as to speed up the process of unloading and synchronization. If Miro updates its API, we will rebuild the plugin for it.
Figmiro plugin worked
Designer Anton Magartsov, leading iOS developer Roman Churkin, frontend developers Anton Eryshev and Ilya Krupnov, server development manager Andrei Muravyov and art director Sergey Kutkov.
we collect feedback on the operation of the plugin on GitHub.
We know how difficult it is to create public APIs for services, while maximally meeting all the needs of users of these APIs.
The Redmadrobot team is grateful to the guys from Miro and Figma for the opportunity to automate our routine business processes.