How to Instantly Convert from iOS to Android and Back with Figma Plugin
Hi there! My name is Varya Paniukova, I am a Product Designer at Joom and I have good news. We have published a Figma plugin that allows you to automatically rebuild the layout from one mobile platform to another: from iOS to Android and vice versa. Now you no longer have to do it manually! You can download it here.
Now let’s talk about the creation process and the usage nuances
We once had an extremely busy time with our product. Remember how everyone moved from Sketch to Figma? So do we. And of course, we had to not only rebuild the design system, but also transfer all the layouts. We have a small design team and limited resources, so the design debt was growing right before our eyes and something had to be done about it. It was especially painful on big features and during hot moments.
So we realized that in order to speed up the processes, we need a plugin to do the layout transfer from one platform to another for us.
At first, we hoped to find a pre-made solution, but, alas, there was none. More accurately, some companies had it, but only for internal use.
So we were like “Okay, no big deal, we have lots of developers, we’ll just have them code something quick”. We made a decision, discussed it with the devs, and the task was successfully moved to the development backlog. But not just to the backlog, to the very bottom of it.
Time went by, but we had no resources for development, and then we went with plan B — outsourcing. We compiled the tech specs, wrote down the logic and went out looking for a developer. And we found one! A talented 17-year-old kid who was still in school. He wrote the plugin for us in just one week, can you imagine that?
We tested it, tweaked it, and just look how beautiful it turned out. We take the layout, make a couple of clicks and presto:
From Android to iOS in a couple of seconds. Isn’t that magic?
Now, let’s talk about the nuances to make the plugin work for you:
- Only available for teams with the Professional plan. Unfortunately, this is the only way to access shared component libraries.
- Everything should be in components. Elements should not be groups, not a set of layers, but components. The plugin works on the principle of replacing component libraries. Keep this point in mind, otherwise there will be errors during the transfer.
3. The components must be identical. Identical element sets within components are a must. Stick to consistency. We made an Android copy, adapting it for iOS.
4. Component names must match. Different library components must have the same names, otherwise the plugin won’t be able to find a replacement and will generate an error. Make sure that the texts are the same everywhere and there are no typos anywhere.
That’s all! Clean up the libraries (if you haven’t already), check for name consistency and you can start using the plugin.
After development, we’ve implemented the plugin into our processes, made sure that it fits in and actually saves time. Now we are ready to share it with you. We’ll also be very happy if this plugin simplifies your design life as much as it did for ours. Download the plugin.
What’s next?
Within the team, we’ve been talking about coming to a unified design for both platforms. But that’s another story for another time.
