At Localazy, we love and use Figma, and many of our clients do too. This collaborative design platform, born in 2012 and enjoyed by thousands of users around the world, is the ideal solution to tackle the design process flawlessly.
When looking for new integrations, Figma was a no-brainer. Our team, as well as a bunch of our customers, regularly used it, and the collaboration feels natural. So we wanted to welcome it into our platform.
We started with only our Android integration back in 2020 and many more followed like iOS, PO, SRT Subtitles, Angular, Excel, or JavaScript, to just name a few. Still, most of these are just simple file formats or developer-oriented frameworks. So unlike previous integrations, Figma needed a different approach.
Check Localazy's list of integrations here!
The Figma plugin required a specific design and more work than previous integrations because it needed its own user-facing interface outside of Localazy, the data management is different, and the plugin is required to work both ways. Extracting texts from Figma to a JSON file and uploading it to Localazy wouldn't be too practical for most use-cases.
So in June 2021, our Figma project started. We accepted the challenge, talked to our users, explored the different options available on the market, and got to work. Four months later, we launched the integration. 🎉
Here's how we did it and what you can accomplish with it as a Localazy user.
🤔 Hold on... what is Figma?
Technically speaking, Figma is online prototyping and vector graphics editor that focuses on UI and UX. Plainly speaking, it is a design tool with an easy-to-use, collaborative interface that helps you create stunning visuals and content in your browser with powerful capabilities and countless community-made resources and plugins to enhance and customize your design workflow.
If you've never heard of this tool, you're really missing out! It is an excellent asset for any company interested in creating compelling content presented in an attractive, modern way.
Figma is ideal for prototypes of digital products, such as web and mobile apps. It is also excellent for the design of landing pages, newsletters, and complete websites, but you can use it to create leaflets, presentations, infographics, and much more. We've done it all!
Learn more about Figma on its official website.
✏️ Why do we love it?
Why wouldn't we? Figma really does wonders for design collaboration. For starters, it is a very user-friendly tool that can be learned and managed quickly by entire teams. It streamlines processes and acts as a collaborative hub for all your efforts.
As we outlined earlier, versatility is also plentiful. You can adapt content for different media formats, and it is easily malleable. This means localization and translation can be done flawlessly, as teams can adjust the design to the particularities of every language.
"Many startups use the Localazy + Figma duo to iterate faster and bring new features to the market with decreased effort across their team"
Jakub Dubec, CMO
Figma streamlines processes and acts as a collaborative hub for all your design localization efforts
But there's more! These are other outstanding features that we like over here at Localazy HQ:
- Flawless design tools: resizing buttons, toggling, stretching, dynamic overlays, vector pens, mobile edits... Figma offers easy fixes for nearly every design pain point, automating what used to be lengthy manual modifications.
- Great for teams: collaborative efforts are really propelled when using Figma. Shared notes and multiple viewing enable to perfect the final result and discussing specific copywriting, localization, or design issues is easier than ever.
- Can be used throughout the whole process: the tool is designed to walk teams through every phase of product development. Brainstorming can start in a FigJam workshop and continue on the asset library.⏰
- Export options: when the work is done, exporting is super easy, and it is available in different formats, ranging from PDF to PNG, JPG, and SVG. You can also export assets in bulk!
- Price: you can use Figma at really affordable rates. Even for free! Different options are offered depending on the size of your company, with plans starting at $12/month per user.
It was love at first sight for our designer, Ondřej Půček. "As an art director, I love that with Figma, I can keep all my visual assets in one place, easily accessible to anyone within our team - even the newcomers - in their browser. I really love the variations feature that was added just recently. It simplifies the work with components and keeps our team library clean and tidy", he explains.
But if he had to choose just one outstanding feature, it would undoubtedly be auto-layout, which allows to "prepare really complex designs that you can reuse in various layouts without the need to align individual parts each time." A real timesaver indeed! ⏰
💭 Why create a Figma plugin?
Our aim was simple: we wanted to make it easier for our customers to translate, edit and implement the content of their Figma designs in the most intuitive way possible.
As our CMO, Jakub Dubec puts it, "many innovative startups use the Localazy + Figma duo to iterate faster and bring new features to the market with decreased effort across their team."
So this was a no-brainer. Many users across all sectors could benefit from it! 👌 And it seems that we were right: so far, our integration has been used, tested, and loved by a wide range of users, including enterprise clients as well as smaller agency teams who use Localazy & Figma to design multilingual products for their clients.
👩💻 How did we do it?
Developing, testing, and launching a plugin is an extensive process. Our Figma integration was no exception. So let's hear what our team has to say about it!
💡 The big idea
Naturally, the idea came first. Our Product Manager, Jan Bílek, was instrumental in the process from the first brainstorming sessions. "We wanted to enable users to start their localization process already at the design phase. We encourage teams to agree on the copy as early as possible to prevent unnecessary round trips and speed up the whole development process", he explains.
The result we were looking for was simple: the finalized texts could be used directly in any app, thanks to Localazy and our Figma plugin. The next step was then to develop the plugin.
⚙️ The development process
The process was long but also fun and satisfying when it came to developing the integration. We decided to write the plugin in Vue 3. It took three months to finesse all the integration features.
Our Front End Developer, David Václavek (who did most of the development), sums it up perfectly: "I remember spending late evening hours before sleep just thinking about how to rewrite a piece of code I've just done during the day to make it run faster. I also remember me sitting in the office, being in the zone for a couple of hours, staring into the screen, and then just noticing everyone already went home."
At that time, our team was also developing the Localazy Public API and OAuth for authentication, so we tried it out on the Figma plugin.
Fortunately, David wasn't alone: "The Figma developers community was helpful whenever I asked for advice. They also explained to me some detailed differences in API methods when I reported an issue on GitHub. Basically, when I got through the part of learning the platform, I started enjoying the development more and more".
It took three months to finesse all the integration features. The proccess was long, but also fun and satisfying
From then on, it was trial and error. After conquering the Figma API, our team went through a few UI redesigns, made a few UX-related changes, and tested the plugin extensively.
The release date was postponed several times, but the first official version of the plugin eventually launched in November 2021. Here's a confession from our developer: "Fixing the issues itself and thinking about how to make the plugin simple and fast was challenging but fun. But when you think you're almost at the end of development and you manage to find another issue - that's the biggest mental challenge!".
There were also challenges from the design side. As Ondřej puts it, "we wanted our users to avoid the usual mistakes that can happen while uploading nodes from Figma to Localazy."
This meant that ongoing warnings had to be delivered to ensure the safety of their materials and keep everyone informed on the state of the plugin. It all paid off, as many design and front-end elements have definitely made the localization job easier, solving common pain points. For instance:
- No need to manually copy/paste the strings.
- No need to hassle with spreadsheet files.
- Selective upload/download with per-text design language check.
- Continuous design localization problem & keeping track of updates.
- Ability to quickly check your design prototypes in more languages.
- Having Figma as SoT, you can easily use the uploaded strings in the app code.
- People can cooperate at the same time: designer uploads, the translator translates...
...and much more!
Here's a practical example from David: "Imagine you're designing a product with global ambitions and there's no Localazy. You made a great design, and everyone loves it in your country. You did the extra hard work, manually copied/pasted the designs, and translated them into a couple of languages.
But then you realize that you don't have enough space to fit texts in other languages because of the distribution of word lengths. And not only that: there are some right-to-left languages. Designs are ruined, your head is about to explode, you have to redesign it and go through the pain again..."
No string copy-pasting, no spreadsheets, no global downloads: with the plugin you can have your team cooperate at the same time and keep track of multilingual design updates
"With Localazy ready to help, you can start designing, uploading strings continuously, translating your current progress into some languages, downloading it to Figma, adjusting the designs to play well with the translations... Then you continue designing another section and do the same again. How easy is that? 😀 And all of it in just a couple of clicks, almost no manual work needed".
Testing the final product
When the plugin started to take shape, we tested it extensively. Manual tests were performed before release, and we contacted some beta users to check it out. One of them was Michal Kessel Shitrit, an affiliate partner who works as a localization, design, and UX writing expert. The plugin was a godsend for Michal, as collaborative copywriting and design are essential to her job.
"I love how Figma plugins like the Localazy plugin let clients enjoy the best of both worlds. They can keep a tighter link between the design in Figma and the localized strings. And they can easily see and test the localized copy in-context", she says.
The expert tested the plugin in its early stages and liked what she saw. Downloading and uploading processes were straightforward and minimal adjustments were required: "You may need a different or smaller font, or to align your localized copy to the right. But it still saves infinite amounts of time compared to the old copy-and-paste method".
"The plugin lets clients enjoy the best of both worlds. They can keep a tighter link between the design in Figma and the localized strings. And they can easily see and test the localized copy in-context"
Michal Kessel Shitrit, beta tester
Other benefits highlighted by Michal were:
- Non-designers don't have to mess with design features.
- No strings are left behind when reviewing a project.
- The continuous translation is very helpful for big products: there's no need to recreate the project for every new little feature.
When testing, our team of testers also discovered certain features that were overlooked at first. As our PM explains, initially, it was possible to upload only entire documents, and it wasn't allowed to work with selected nodes: "It wasn't overlooked though: we'd intentionally omitted this functionality to simplify the development and user testing. Beta users, however, verified that this functionality was crucial for the general usability of the plugin".
The plugin was an immediate success at Localazy's HQ. Our CMO "immediately wanted to use it and play around because localization at the design phase is important not only for product development but also for brand communication".
"I was really happy because I constantly push our development team to open Localazy to new audiences important to our business. Figma localization plugin is a huge step towards UX, UI and the overall design community".
Nowadays, we have dozens of active users, and we use the integration as well on a daily basis. For instance, we prepare our design files in English with pre-finalized texts, finish the texts and translate them to the languages we want to use in the near future in our platform. Then we download the nodes back to Figma and adjust the design. We also use the plugin to translate our banners and ads to different languages.
🚀 What's next?
Our plugin is up and running, and we couldn't be more pleased. It was approved to be listed in the Figma community in just 5 days! But that doesn't mean our work has finished. Here's an update from our Product Manager, Jan: "We would like to add support for FigJam and solve the issue of importing the design with more developer-friendly keys. We also plan to support upload of languages other than the source language."
Our designer foresees new customizable features, "like avoiding all the nodes with content consisting of purely numerical values, and the introduction of a parser to keep the names of the source keys simple and easy to use in the code as Jan mentioned."
Even more ideas were discussed actually, but I will keep it a secret for now. As always, we will try to improve the experience as much as we can, I can promise you that. 😉
"We would like to add support for FigJam and solve the issue of importing the design with more developer-friendly keys. We also plan to support upload of languages other than the source language."
Jan Bílek, PM
And our star tester adds a suggestion for new integrations: "It would be incredible to have support for Zeplin or Invision. A lot of my clients use it as their SOC for design". Noted, Michal! 📝
Do you have suggestions you would like to share with our team? Feel free to share your ideas with us here or tell us in the comments!
👀 Wanna try it for yourself?
If you've read this far, you definitely have to try our plugin. Designers, marketers, and copywriters are already using Localazy + Figma for their daily efforts.
As our CMO eloquently puts it, "those people are able to create multilingual designs from their favorite design tool without the need of a developer for connection with their i18n/l10n/translation management platform. All they need is to authorize with Localazy and get started."
Check out our Figma plugin workflow guide here and start reaping the benefits of a flawless design localization integration!
Top comments (0)